Single Page Application Tracking

Decibel Insight can be implemented on Single Page Applications (SPAs) using technologies such as AngularJS or Backbone.js by deploying the regular Decibel Insight Tracking Code. If the application is designed using the HTML 5 History API, virtual pageviews will be automatically detected and tracked by Decibel Insight.

If the application does not change the URL to denote virtual pageviews, it will be necessary to use the trackPageView JavaScript API end-point. See below for more details.

Example Code

The below is an example of trackPageView being used to pass /About-Us as the page URL.

decibelInsight('trackPageView', '/About-Us');

Passing Data Layer Variables

The trackPageView end-point allows for the passing of Data Layer variables to pass the pages names into Decibel. Page names are often stored within the property’s data layer such as dataLayer.page_name, meaning the following trackPageView call could be made:

decibelInsight('trackPageView', dataLayer.page_name);

By way of an example, the data layer variable of page_name on the page www.example.com/products_page when looking at an example product might return something like the below:

PRODUCT-PRODUCTNAME-D12345

With this being the case, we are able to use the above example trackPageView call, which would send the page to Decibel as the below:

www.example.com/products_page/PRODUCT-PRODUCTNAME-D12345

URL Fragment & Query Changes

For flows that use Fragment (#) or query (?) changes, we would advise implementing trackPageView on these changes in order to differentiate the pages within reports such as Heatmaps and Page Discovery. The fragment value is stored within document.location.hash, while the query value is stored within document.location.search. These can therefore be used within trackPageView such as in the example below:

// Example passing the fragment within trackPageView
decibelInsight.trackPageView(document.location.pathname + document.location.hash.replace("#","/"));

// Example passing the query within trackPageView
decibelInsight.trackPageView(document.location.pathname + document.location.search.replace("?","/"));

Using the fragment code as an example, on a page such as www.example.com/checkout#step1 where advancing to the next step changes the URL to www.example.com/checkout#step2, the above script will replace the # character with a / and therefore track the pages as the below:

www.example.com/checkout/step1

www.example.com/checkout/step2

Arguments

The below outlines the arguments that can be passed as part of the trackPageView end-point.

• path (string): Absolute path of the page (optional). If not provided, the path currently displayed in the browser will be used.
• params (object): An object containing one or more properties (optional). Parameters may include any of:
  • title: Title of the page. If not provided, the title currently displayed in the browser will be used.
  • queryString: The query string part of the URL for the page (for example “?page=2”). If not provided, the query string currently displayed in the browser address bar will be used.
  • fragment: The fragment part of the URL for the page (for example “#/Page/1”). If not provided, the fragment currently displayed in the browser address bar will be used.
  • waitTime: The time in milliseconds that it took the page or state to load.

Further Examples

A few examples of the trackPageView call required on page/state changes can be seen below. The comments denote if the script were to be implemented on www.example.com.

// Would trigger the virtual page URL of www.example.com/About-Us
decibelInsight('trackPageView', '/About-Us');

// Would trigger the virtual page URL of www.example.com/Search?page=1&q=Laptops
decibelInsight('trackPageView', '/Search', {
    queryString: '?page=1&q=Laptops',
    waitTime: 1000
});

Testing trackPageView

In order to test if triggering trackPageView has been successful, you can do this by using the Decibel Google Chrome extension. Ensure you have Logging Enabled and are logged into the Decibel platform within the same browser session as your testing.

In the below example from the home page of our knowledgebase (https://knowledgebase.decibelinsight.com), you can see that we have triggered the following code:

decibelInsight.trackPageView('/test')

This will simply append /test to the domain of the current page, therefore passing this to Decibel as https://knowledgebase.decibelinsight.com/test.

If the trackPageView call has been configured correctly, you should see a log in the console that references Decibel, followed by the Website ID, followed by “Page”, while you will also see a log in the console called API, with the Endpoint set to trackPageView. The Page log represents a page call being made to Decibel. You will then be able to see the URL that is passed to Decibel in the URL section of this log, such as in the image above. You can also click the arrow icon on the second line of the Page console log to view this in more detail, such as in the image below.