Installation For Single Page Applications

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 Zata will be slightly different.

Normally, Zata 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 zata.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.

1. Adding Script and Capturing Properties and Events

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

For React apps:

<script>
  window.zataProductConfig = {
    secret: "appsecret"
  };
</script>
<script src="https://app.zata.io/js/zata-embed.js"></script>
<script>
  zataProduct.identify( 
    "UNIQUE USER ID", // Used to identify users 
    { 
         name: "John Doe", // Full name 
         email: "[e-mail]", // Email address 
         created_at: "1519205055" // Signup date as a Unix timestamp 
        // Additional user properties 
        // projectId: "1"
        // trialEnds: '2019-10-31T09:29:33.401Z'
    }     
  );
</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 zataProduct.identify()
       zataProduct.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 Secret" with your own app token.

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

2. Handling Page Reloads

Next, you must call zataProduct.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.zataProduct.reload()}>
// Example 2:
<Router onUpdate={()=>window.zataProduct.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.zataProduct.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.zataProduct) {
           $window.zataProduct.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.zataProduct.reload();
      }
    });
  }
}

3. Handling Change in User Properties Without Page Refresh

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

This will cause Zata 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.