Single-page Application Tracking

DXA can be implemented on Single-page applications (SPAs) using technologies such as AngularJS or Backbone.js by deploying the regular tracking code. If the application is designed using the HTML 5 History API, virtual page views will be automatically detected and tracked by DXA.

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

Important: You must use the following code to stop Decibel from collecting the original URL of the page and ensure that Decibel only collects the URL from the trackPageView endpoint.

_da_.da_noAutoPageTrack = 1;

Example code

The code 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 endpoint allows for the passing of Data Layer variables to pass the pages names into DXA. 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 DXA as the below:

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

URL fragment and 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 endpoint.

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 DXA Google Chrome extension. Ensure you have logging enabled and are logged into the DXA platform within the same browser session that you're testing.

In the below example from the home page of our knowledgebase, 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 DXA as https://knowledgebase.decibelinsight.com/test. Inspecting the DXA Knowledgebase

If the trackPageView call has been configured correctly, you should see a log in the console that references DXA, 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 DXA. You will then be able to see the URL that is passed to DXA 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: Viewing more details on the page console