Install Tracking Code on Single-Page Application

If you are using multi-page website or a CMS, then you can track your contacts using this method. Now it is becoming important to track single-page websites and web applications because these have become a modern standard. This tracking of contacts helps in getting data that can be used to drive meaningful and accurate interactions.

Embedding the Aritic PinPoint tracking code

The first step follows the general way of embedding your JavaScript code into your single-page website or web application. To do this, simply go to Advanced Settings from your Aritic PinPoint dashboard and click on Tracking settings to set it as per your needs. You can follow this guide too.

1. Tracking the new page view

Till now, it was pretty simple. The challenge begins when you have to start tracking a new page view. This is because a single-page website has no regular page loading unlike usual websites. Add to this, Aritic PinPoint cannot detect a page view automatically. This means you will need to let Aritic PinPoint know whenever you change the URL and page titles. You can do this using the setCustomerUrl and setDocumentTitle.

window.addEventListener('hashchange', function() {
var _aaq = window._aaq = window._aaq || [];
_aaq.push(['setCustomUrl', '/' + window.location.hash.substr(1)]);
_aaq.push(['setDocumentTitle', 'My New Title']);
_aaq.push(['trackPageView']);
});

2. Resetting custom variables set previously

If your “page” scope has a set custom variable, you will have to delete them again so that they are attributed to the new page only.

_aaq.push(['deleteCustomVariables', 'page']);
_aaq.push(['trackPageView']);

P.S. We recommend you use Custom Dimensions instead of Custom Variables.

3. Updating generation time

Before tracking a new page, you will have to update the generation time. If not done so, the initial page generation time will be applicable for all your subsequent page views. Incase you hadn’t loaded any new content from the server when the page changed, make sure the value is set to zero.

_aaq.push(['setGenerationTimeMs', 0]);
_aaq.push(['trackPageView']);

If you do load content from the server, you must measure the time taken to load this content (in milliseconds) and set the required time.

_aaq.push(['setGenerationTimeMs', timeItTookToLoadPage]);
_aaq.push(['trackPageView']);

4. Referrer Updation

Based on whether you want to set the previous page as the referrer to your new page, update the Referrer URL by setting it to the previous URL.

_aaq.push(['setReferrerUrl', previousPageUrl]);
_aaq.push(['trackPageView']);

Informing Aritic PinPoint about new content

Your single-page DOM may change when a new page is shown. For instance, it may be that you have replaced some parts of your page with new content that you loaded from your server via Ajax. This means you will need to instruct Aritic PinPoint specifically to scan the DOM for the new content. Below are the various types of contents:

1. Audio and Video tracking

If you are using a media analytics feature to track your audios and videos, you will need to call the function like –

_aaq.push(['MediaAnalytics::scanForMedia', documentOrElement]);

After calling, when you don’t input any parameters, it will start scanning the DOM of your new media. You can alternatively pass a part or element to scan a certain part of your website or app for the new media.

2. Tracking of forms

If you are using Form Analytics feature to measure your form’s performance, you will need to call the following whenever a new page is displayed, where document0rElement points to either document to re-scan the entire DOM where no parameter is set by default, or you can pass an element to restrict re-scan of a part or specific area.

_aaq.push(['FormAnalytics::scanForForms', documentOrElement]);

3. Link tracking

Assuming that you are using link tracking feature to measure both outlinks and downloads, the entire DOM for newly added links need to be re-scanned whenever your DOM changes. To ensure that Aritic PinPoint tracks such links, call the method:

_aaq.push(['enableLinkTracking']);

4. Content tracking

Whenever a new page is displayed and any part of your DOM changes, you will need to call the following method since you are using content tracking feature; where document 0r Element points to either document to re-scan the entire DOM where no parameter is set by default, or an element is similar to some other method. Aritic PinPoint will start scanning the page for new content blocks.

_aaq.push(['trackContentImpressionsWithinNode', documentOrElement]);

Sample Code:

Sample Code to be added on the single page where tracking for the contact should happen:

<script>var currentUrl = location.href;
var _aaq = window._aaq = window._aaq || [];
_aaq.push(['setReferrerUrl', currentUrl]);
currentUrl = '' + window.location.hash.substr(1);
_aaq.push(['setCustomUrl', currentUrl]);
_aaq.push(['setDocumentTitle', 'My New Title']);

// remove all previously assigned custom variables
_aaq.push(['deleteCustomVariables', 'page']);
_aaq.push(['setGenerationTimeMs', 0]);
_aaq.push(['trackPageView']);</script>

If tracking media and forms then also include following code:

var content = document.getElementById('content');
_aaq.push(['MediaAnalytics::scanForMedia', content]);
_aaq.push(['FormAnalytics::scanForForms', content]);

_aaq.push(['enableLinkTracking']);

Note: While you are using above tracking scripts for single page tracking; then, make sure you are using following Script on your pages to track the contact.

<script src="https://yourAriticPinPointUrl/ma/patc.js"></script>