Question

我正在尝试在ReactJS项目和documentation状态中设置Appcues以添加以下内容以识别当前用户：

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

然而，这会引发错误：

＆＃39; Appcues＆＃39;未定义

此错误对我有意义，因为对象Appcues已被引用但未导入或创建。

尝试修复：

由于Appcues是从script导入的，我尝试通过Appcues访问window，但是当我在浏览器中转到我的项目时，它会导致我的演示未加载：

  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）或加载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))
};

干杯！

Answer 2

您的里程可能会有所不同，但是我们使用npm包load-script动态地将Appcues引导到我们的应用程序中，而不是使用从服务器下载的html中的脚本标记。

这样我们只有在确认脚本已加载后才会触摸Appcues。

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

2 个答案: