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

我正在尝试在ReactJS项目中设置Appcues，并且documentation状态添加以下内容以标识当前用户:

  Appcues.identify({UNIQUE_USER_ID}, { // Unique identifier for current user
    name: "John Doe",   // Current user's name
    email: "[email protected]", // Current user's email
    created_at: 1234567890,    // Unix timestamp of user signup date
  });

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



因为我引用了Appcues对象，但未导入或创建该错误，所以对我来说，此错误是有意义的。

尝试修复:

由于Appcues是从script导入的，因此我尝试通过Appcues访问window，但是当我在浏览器中进入项目时，这导致我的演示无法加载:

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

是否有人知道如何设置在ReactJS项目中为Appcues标识用户？

最佳答案

创建一个递归函数，检查window.Appcues是否为空；然后，要么设置用户的身份(如果不为null)，要么加载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))
};

干杯!

关于javascript - 在ReactJS项目中设置识别Appcues的用户，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47662483/