Using Appcues with React and react-router

React apps are what we consider single-page apps (SPAs). They only trigger a full page load when they are first loaded. Otherwise, navigating across pages in your app doesn't trigger a page load, which means that Appcues doesn't know when the page has changed. Obviously this causes problems for content targeted by URL.

Enter the Appcues.start() call.

You can call the   Appcues.start() function to tell Appcues when you're on a new page/view. This causes Appcues to look at the current page and user properties and check if there's any content that should be shown. So ideally in an React app you'll call Appcues.start() any time there's a navigation event or new view.

What does this look like in React? Well, if you're using  react-router, then you might use the onUpdate event:

<Router onUpdate={()=>window.Appcues.start()}

Appcues.identify() call.

In your application, you will most likely have some sort of user authentication where your users are identified. While you can include the Appcues.identify() into your html file, to avoid over-identifying your users, you might want to call it once somewhere user authentication occurs in your application.

Here's an example with Firebase auth:

import React, {Component} from 'react';
import firebase from 'firebase';

class App extends Component {

  componentWillMount() {
    firebase.auth().onAuthStateChanged((user) => {
      if (user) {
        
        // now that we have a reference to the user, we can identify them with Appcues
        window.Appcues.identify(user.uid, {
          email: user.email,
          displayName: user.displayName
        });
        
      }
    })
  }

  render() {
    // render function
  }
}

Still need help? Contact Us Contact Us