javascript - 在 ReactJS 项目中为 Appcues 设置识别用户

Question

我正在尝试在 ReactJS 项目中设置 Appcues 并且 documentation 声明添加以下内容以识别当前用户:

  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    
  });

但是，这会引发以下错误:

'Appcues' is not defined

这个错误对我来说很有意义，因为对象 Appcues 被引用但没有被导入或创建。

尝试修复:

由于 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 是否为空；然后，设置用户的身份(如果不为空)或加载 Appcues 脚本，然后递归调用自身(函数)。

识别用户

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');
    });
  }
}

在需要时动态加载脚本

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))
};

干杯!