Single-page Application (SPA) Guide (technical)

Single-page Applications (SPAs) 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 and can hinder certain targeting.

Below are instructions on how to properly install specific to your SPA.

React and React-router Instructions

Enter the Appcues.page() call.
You can call the  Appcues.page() 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.page() 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.page()}

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

AngularJS Instructions

Enter the Appcues.page() call.
You can call the  Appcues.page() 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 Angular app you'll call Appcues.page() any time there's a navigation event or new view.

What does this look like in Angular? Well, if you're using  the angular ui-router, then you may be tempted to use the $viewContentLoaded event, since it seems like it would fire after the state has changed and you're on a new "page" in your app. However, this event actually fires before the URL has been updated. You'll end up with Appcues checking the previous page's URL, not the one you just navigated to. One solution we've found is to make use of the $locationChangeSuccess event, which is "broadcasted after a URL was changed," according to the docs. This will ensure that the URL that Appcues checks is the correct (i.e. current) one.

To debug your Appcues.page call for single page apps, publish something using "Show only to my team" targeting and see if the flow shows automatically. If you need to refresh the page in order for Appcues to appear, that indicates it's in the wrong place. Let us know and we can take a look for you.

Here's an example!

// For example, in your App.js:
  angular.module('yourapp').run(function($rootScope, $window) {
   $rootScope.$on('$locationChangeSuccess', function() {
       if ($window.Appcues) {
          $window.Appcues.page();
        }
     });
   });

Angular 2, 4, 5 Instructions

Enter the Appcues.page() call.
You can call the Appcues.page() 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, you'll call  Appcues.page() any time there's a navigation event or new view.

What does this look like in Angular 2, 4 & 5? We suggest using the NavigationEnd event to trigger Appcues.page():

this.router.events
  .subscribe((event) => {
    if (event instanceof NavigationEnd) {
      window.Appcues && window.Appcues.page();
    }
  });

Still need help? Contact Us Contact Us