I am trying to set up Appcues in a ReactJS project and the documentation states to add the following to identify the current user:

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

However, this throws the error that:

'Appcues' is not defined

This error makes sense to me since the object, Appcues, is referenced but not imported or created.

Attempt to fix:

Since Appcues is imported from a script, I tried accessing Appcues through the window, but it results in my demo not being loaded when I go to my project in the browser:

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

Does anyone understand how to set up identifying a user for Appcues in a ReactJS project?

I am trying to set up Appcues in a ReactJS project and the documentation states to add the following to identify the current user:

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

However, this throws the error that:

'Appcues' is not defined

This error makes sense to me since the object, Appcues, is referenced but not imported or created.

Attempt to fix:

Since Appcues is imported from a script, I tried accessing Appcues through the window, but it results in my demo not being loaded when I go to my project in the browser:

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

Does anyone understand how to set up identifying a user for Appcues in a ReactJS project?

• javascript
• reactjs
• window

2 Answers 2

Create a recursive function that checks to see if window.Appcues is null; then, either set up the identity of the user (if not null) or load the Appcues script and then recursively call itself (the function).

Identify User

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

Dynamically load script when needed

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

Cheers!

Your mileage may vary, however we use the npm package load-script to bootstrap Appcues into our application dynamically, rather than using the script tag in the html that es down from the server.

This way we only touch the Appcues once we can confirm the script has loaded.