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:
1
<script>
2
window.zataProductConfig = {
3
secret: "appsecret"
4
};
5
</script>
6
<script src="https://app.zata.io/js/zata-embed.js"></script>
7
<script>
8
zataProduct.identify(
9
"UNIQUE USER ID", // Used to identify users
10
{
11
name: "John Doe", // Full name
12
email: "[email protected]", // Email address
13
created_at: "1519205055" // Signup date as a Unix timestamp
14
// Additional user properties
15
// projectId: "1"
16
// trialEnds: '2019-10-31T09:29:33.401Z'
17
}
18
);
19
</script>
Copied!
For Angular apps:
1
// Login controller example:
2
.controller('login'), function($scope, $rootScope, AUTH_EVENTS, AuthService) {
3
$scope.credentials = {
4
username: '',
5
password: ''
6
};
7
$scope.login = function (credentials) {
8
AuthService.login(credentials).then(function (user) {
9
$rootScope.$broadcast(AUTH_EVENTS.loginSuccess);
10
$scope.setCurrentUser(user);
11
12
// Call zataProduct.identify()
13
zataProduct.identify(currentUser.id, {
14
name: currentUser.name,
15
email: currentUser.email,
16
created_at: currentUser.created_at
17
// Additional user properties.
18
// is_trial: {{ request.user.is_trial }},
19
// plan: "{{ request.user.plan }}"
20
});
21
}, function () {
22
// Login Failed
23
});
24
});
Copied!
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:
1
/*
2
* React V3 and below
3
*/
4
// Example 1:
5
<Route path='/' component={App} onChange={()=>window.zataProduct.reload()}>
6
// Example 2:
7
<Router onUpdate={()=>window.zataProduct.reload()}/>
8
9
/*
10
* React V4 and above
11
*/
12
// In the `componentDidUpdate` of the component wrapping your entire app
13
// usually called <App />
14
function componentDidUpdate(prevProps) {
15
// NOTE: in order to have access to this information, you will need
16
// to wrap this component in the `withRouter` HOC
17
const { location: { pathname } } = this.props;
18
const previousLocation = prevProps.location.pathname;
19
if (pathname !== previousLocation) {
20
window.zataProduct.reload();
21
}
22
}
23
// NOTE: There are several different methods of listening to this route change in
24
// V4, but this one covers all edge cases not covered by other methods
25
// and is the one endorsed in the React Router v4 migration guide
26
// https://github.com/ReactTraining/react-router/issues/4278#issuecomment-299692502
Copied!
And on an Angular app, it would look something like this:
1
// For example, in your App.js:
2
angular.module('yourapp').run(function($rootScope, $window) {
3
$rootScope.$on('$locationChangeSuccess', function() {
4
if ($window.zataProduct) {
5
$window.zataProduct.reload();
6
}
7
});
8
});
9
10
/*
11
* Angular 2 and above
12
*/
13
14
// You'll need to subscribe to the router's NavigationEnd event
15
// Do this in the component where your app is bootstrapped
16
import { Component } from '@angular/core';
17
import { Router, NavigationEnd } from '@angular/router';
18
@Component({
19
selector: 'app-root',
20
templateUrl: './app.component.html',
21
styleUrls: ['./app.component.css']
22
})
23
export class AppComponent {
24
title = 'app';
25
constructor(router: Router) {
26
router.events.subscribe(event => {
27
if (event instanceof NavigationEnd) {
28
window.zataProduct.reload();
29
}
30
});
31
}
32
}
Copied!

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.
Last modified 5mo ago