Install Userpilot on Single Page Application Frameworks

If your web app is running on a Single Page Application framework, such as Angular or React, and is characterized by very few page refreshes, then installing Userpilot will be slightly different.

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. 

Here is what we recommend you do.

First, include the Userpilot script in your HTML code before the closing   </body> tag as you normally would.

For React apps:

<script src = "https://deploy.userpilot.io/App Token.js"></script>
<script>
  userpilot.identify( 
    "UNIQUE USER ID", // Used to identify users 
    { 
         name: "John Doe", // Full name 
         email: "customer@example.com", // Email address 
         created_at: "1519205055" // Signup date as a Unix timestamp 
         // Additional user properties 
         // projectId: "1"
    }     
  );
</script>

For Angular apps:

 // Login controller example: 
 .controller('login'), function($scope, $rootScope, AUTH_EVENTS, AuthService) {
   $scope.credentials = {
     username: '',
     password: ''
   };
   $scope.login = function (credentials) {
     AuthService.login(credentials).then(function (user) {
       $rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
       $scope.setCurrentUser(user);
       
       // Call userpilot.identify()
       userpilot.identify(currentUser.id, {
         name: currentUser.name,
         email: currentUser.email,
         created_at: currentUser.created_at
         // Additional user properties.
         // is_trial: {{ request.user.is_trial }},
          // plan: "{{ request.user.plan }}"
       });
     }, function () {
        // Login Failed
     });
 });

IMPORTANT: If you are copy pasting the above example code, then don't forget to fill in the "App Token" with your own app token.

You must also pass the "UNIQUE USER ID" to help Userpilot identify each user.

Next, 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.

For example, in a React app it would look something like this:

/*
* React V3 and below
*/
// Example 1:
<Route path='/' component={App} onChange={()=>window.userpilot.reload()}>
// Example 2:
<Router onUpdate={()=>window.userpilot.reload()}/>

/*
* React V4 and above
*/
// In the `componentDidUpdate` of the component wrapping your entire app
// usually called <App />
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();
    }
}
// NOTE: There are several different methods of 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
// https://github.com/ReactTraining/react-router/issues/4278#issuecomment-299692502

And on an Angular app, it would look something like this:

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

/*
* Angular 2 and above
*/

// You'll need to subscribe to the router's NavigationEnd event
// Do this in the component where your app is bootstrapped
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();
      }
    });
  }
}

IMPORTANT: If your user's data changes in some way without a page load, you should call the userpilot.identify() function.

This will cause Userpilot to check for any new changes to the user's data. You only need to include whatever has changed—you don't need to include all user data in each update.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.