はReactJSプロジェクトでAppcuesためのユーザー

Question

を特定の設定私は、現在のユーザを識別するために、以下を追加しReactJSプロジェクトとdocumentation状態でAppcuesを設定しようとしています

'Appcues'

このエラーは定義されていないが、オブジェクトので、私には理にかなって、：エラーこと10が参照されるが、インポートまたは作成されない。修正する

試み：

Appcuesはscriptから輸入されているので、私はwindowを通じてAppcuesにアクセスしようとしたが、私は、ブラウザで私のプロジェクトに行くとき、それはロードされていない、私のデモでの結果：

window.Appcues.identify({UNIQUE_USER_ID}, { // Unique identifier for current user 
    name: "John Doe", // Current user's name 
    email: "john.doe@example.com", // Current user's email 
    created_at: 1234567890, // Unix timestamp of user signup date  
    }); 

誰もがReactJSプロジェクトでAppcuesのためのユーザを識別設定する方法を理解していますか？

Answer 1

window.Appcuesがnullかどうかを確認する再帰関数を作成します。ユーザーのID（nullでない場合）を設定するか、Appcuesスクリプトをロードしてから、再帰的に自分自身（関数）を呼び出します。

function newScript(src) { 
    // create a promise for the newScript 
    return new Promise(function(resolve, reject){ 
    // create an html script element 
    var script = document.createElement('script'); 
    // set the source of the script element 
    script.src = src; 
    // set a listener when the script element finishes loading the script 
    script.addEventListener('load', function() { 
     // resolve if the script element loads 
     resolve(); 
    }.bind(this)); 
    // set a listener when the script element faces any errors while loading 
    script.addEventListener('error', function (e) { 
     // reject if the script element has an error while loading the script 
     reject(e); 
    }.bind(this)); 
    // append the script element to the body 
    document.body.appendChild(script); 
    }.bind(this)) 
}; 

乾杯を必要なときに

はユーザー

function identifyUser(userID, name, email, createdAt) { 
    // if window.Appcues is not undefined or null.. 
    if (window.Appcues != undefined && window.Appcues != null) { 
    // set up the identity of the user 
    window.Appcues.identify(userID, { // Unique identifier for current user 
     name: name, // Current user's name 
     email: email, // Current user's email 
     created_at: createdAt, // Unix timestamp of user signup date 
    }); 
    // else... 
    } else { 
    // load the script for Appcues 
    newScript("//fast.appcues.com/30716.js").then(function() { 
     // then recursively call identifyUser to initialize the identity of the user 
     identifyUser(userID, name, email, createdAt); 
    // catch any error and print to the console 
    }.bind(this)).catch(function(error) { 
     console.log('identifyUser: error on loading script'); 
    }); 
    } 
} 

動的にロードスクリプトを特定します！

Answer 2

あなたの走行距離は異なる場合がありますが、npmパッケージload-scriptを使用して、サーバーから降りてくるHTMLのスクリプトタグを使用するのではなく、アプリケーションにAppcueを動的にブートストラップします。

この方法では、スクリプトがロードされたことを確認できたらAppcuesに触れるだけです。