Installation Guide For Single Page Applications (SPAs)

Single page apps (SPA) are the type of app that will fully load only once and will not require user reloading while navigating through different pages inside the app. 

Normally, Userpilot would depend on page reloads (refresh) to update and trigger new Experiences. Since single page applications do not reload after URL changes, you must call userpilot.reload(); after each URL change. This is typically done in your application’s router and is handled after a successful page (URL) change.

Below are some examples of how to install Userpilot on both React and Angular. 

Note: You will need to call userpilot.identify when the user first logs in to your application before calling userpilot.reload function.

Installing for React

For React V3 and below you can call the userpilot.reload(); method directly inside the react-router using the onUpdate event. 

<Router onUpdate={()=>window.userpilot.reload()}/>

In V4 and above, you will need to call the method through the componentDidUpdate of the component wrapping your entire app.

For example

function componentDidUpdate(prevProps) {
// NOTE: in order to have access to this information, you will need
// to wrap this component in the `withRouter` HOC
const { location: { pathname } } = this.props;
const previousLocation = prevProps.location.pathname;
if (pathname !== previousLocation) {
        window.userpilot.reload();
    }
}

There are other methods listening to this route change in V4, but this one covers all edge cases not covered by other methods and is the one endorsed in the React Router v4 migration guide. Please visit https://github.com/ReactTraining/react-router/issues/4278#issuecomment-299692502 for more information. 

Installing for AngularJs

The best way to listen to page changes in AngularJS is to make use of the event $locationChangeSuccess that will fire only after the URL has changed. 

IMPORTANT: While it's true that the event $viewContentLoaded will fire when the content is loaded and you are on a new page. However, this event will actually fire before the URL has been updated causing Userpilot to return content targetted for the previous page. 

An example of how to that would look like bellow

angular.module('yourapp').run(function($rootScope, $window) {
    $rootScope.$on('$locationChangeSuccess', function() {
        if ($window.userpilot) {
           $window.userpilot.reload();
        }
    });
});

Installing for Angular 2 and above

In angular 2, 4 and 5 we recommend using NavigationEnd event to trigger userpilot.reload() 

Here how it's done. 

import { Component } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  constructor(router: Router) {
    router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        window.userpilot.reload();
      }
    });
  }
}
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.