This article provides information about the use of the SPA Mode in our JavaScript tracking library.
If the website or application that you want to track with Infinity is a Single Page Application (also known as Browser Applications),
then the usual page load events are not dispatched by the visitor's browser as they navigate around your site.
SPA Mode puts you (and your application) in more control of what happens, and when, rather than our library performing tasks based on native browser events.
This article assumes a more advanced level of JavaScript knowledge, as you will need to integrate it directly into your SPA.
In most cases, you would put all of the configuration required in a single place, in the <head> of your site.
However, in SPA Mode, you only put the parts that do not relate to state, or actually performing tracking.
For example, in your main index file you would have just the setup;
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var _ictt = _ictt || [];
_ictt.push(['_setIgrp', 'XXX']);
_ictt.push(['_enableSPAMode']);
(function() {
var ict = document.createElement('script'); ict.type = 'text/javascript'; ict.async = true;
ict.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'ict.infinity-tracking.net/js/nas.v1.min.js';
var scr = document.getElementsByTagName('script')[0]; scr.parentNode.insertBefore(ict, scr);
})();
</script>
...
</head>
<body>
...
</body>
</html>
When your application is loaded into the browser, our library will be downloaded and setup, but no tracking will be performed.
You will need to tell it when to track, by hooking it to your application's router. This approach is compatible with any implementation that allows hooks/callbacks to be added to route changes.
The key aspect, is that your application must call _ictt.push(['_track']); whenever you transition/change to a new 'page'.
With EmberJS
For example, in EmberJS, you can hook it to the didTransition event.
The simplest version of this are 5 lines, where we reopen the Router below.
This will tell our Library to perform a tracking request, whenever your application transitions to a new route.
// app/router.js
import Ember from 'ember';
import config from './config/environment';
/* global _ictt */
const Router = Ember.Router.extend({
location: config.locationType
});
Router.map(function() {
// your application routes
});
Router.reopen({
performInfinityTracking: () => {
_ictt.push(['_track']);
}.on('didTransition')
});
export default Router;
If you want to include integrations code and you are using SPA Mode, then you should do this in the same place as your _track call is made.
The structure of integrations code is identical to non-SPA code, however before the integrations are added to the config, and before_track, you should call _resetIntegrations.
This ensures the integrations are run against the correct browser and application state.
An example of the same didTransition hook is below.
Router.reopen({
performInfinityTracking: () => {
_ictt.push(['_resetIntegrations']);
_ictt.push(['_enableGAIntegration', {'gua':true,'ga':false}]);
_ictt.push(['_track']);
}.on('didTransition')
});
If you want to include callbacks and you are using SPA Mode, then you should do this in the same place as your _track call is made.
The structure of callbacks is identical to non-SPA code, however before the callbacks are added to the config, and before _track, you should call _resetCallbacks.
This ensures the callbacks are run (and allows them to be run again) against the correct browser and application state.
An example of the same didTransition hook is below.
Router.reopen({
performInfinityTracking: () => {
_ictt.push(['_resetCallbacks']);
_ictt.push(['_addCallback', () => { console.log('Callback was Fired'); } ]);
_ictt.push(['_track']);
}.on('didTransition')
});
If you want to add custom vars and you are using SPA Mode, then you should do this in the same place as your _track call is made.
The structure of custom vars is identical to non-SPA code, however before the custom vars are added to the config, and before _track, you should call _resetCustomVars.
This ensures the custom vars are sent (and allows them to be sent again) against the correct browser and application state.
An example of the same didTransition hook is below.
Router.reopen({
performInfinityTracking: () => {
_ictt.push(['_resetCustomVars']);
_ictt.push(['_setCustomVar', ['clients_key', 'clients_custom_value']]);
_ictt.push(['_track']);
}.on('didTransition')
});
If you want to set a segment and you are using SPA Mode, then you should do this in the same place as your _track call is made.
The structure of setting a segment is identical to non-SPA code, however before the segment is set in the config, and before _track, you should call _resetSegment.
This ensures the segment is used in the right tracking requests (and allows them to be changed between).
An example of the same didTransition hook is below.
Router.reopen({
performInfinityTracking: () => {
_ictt.push(['_resetSegment']);
_ictt.push(['_setSegment', 123]);
_ictt.push(['_track']);
}.on('didTransition')
});
You will set one phone number per Tracking Pool, each phone number must be unique.
Step 1
Navigate to the JavaScript Config Page of your Call Tracking Portal
Step 2
For each tracking pool enter the number you would like us to search the page for.
Make sure you have entered the number as it is with no space, formatting or international prefixes. Remember, this number must be unique per tracking pool, example below:
If you have more than 20 tracking pools, please click the drop down to load the next set of tracking pools.
Step 3
Select Save!
Once you start to see the numbers updating on your page you will know that the dynamic numbers are working.
Please login to rate this article
Getting Started
Enhancing your Installation
Frequently asked questions
Call Management
Number Management
Infinity API