How to use DTM for Single Page Apps (SPA)?

A Single Page Application (SPA) is a web application or website that loads all of the resources required to navigate throughout the site on the first page load. As the user clicks links and interacts with the page, subsequent content is loaded dynamically. The application will often update the URL in the address bar to emulate traditional page navigation, but another full page request is never made.

There are quite a few of ways to use DTM for single page applications and we will browse through some of these options in this article.

Method 1 - Direct Call Rules (DCR’s)

Fire a Direct Call Rule, like _satellite.track(“page view”) on everything considered as a page view, whether it’s a fresh new DOM or not.

For more Information on Direct Call Rules , Please see link

Method 2 - Push state or hash change

The pushState or hashchange event can be used with Single Page Apps (SPAs) in which a page does not reload, but its content changes. Common development frameworks that can be used to create SPAs include Angular and React. This event type lets you create event-based rules without relying ondevelopers. These rules fire when common functions in SPAs occur, such as:

• The URL path changed based on use of the HTML5 History pushState API.
• The hash changed due to the user changing views or locations on the page.

Step 1: Create a new Event based rule and choose event type as “Push State or Hashchange”

Step 2: Under rule condition choose criteria as “Hash” and then specify the hash parameter

Please note that in case of SPA’s two or more image request are made on the same page. Therefore, it is required to clear the values of the previously-set variables.

For s.tl() i.e. Link Tracking calls, this can be accomplished by:

• Writing a simple JavaScript function to clear the Adobe variables
• Set the linkTrackVars and linkTrackEvents variables if you have not already done it in the s_code.js / App Measurement file
• Set the values appropriate for the changed content, namely the pageName variable.
• After the variables are set, call the tl() function

Sample Code :

For s.t()  i.e. Page View calls, this can be accomplished by:

Clearing any values on the s object that you do not want to persist. if you are using AppMeasurement for JavaScript, you can call s.clearVars(). If you are using H code, write a simple routine to set variables to an empty string.

Sample Code :

Method 3 - Custom Event Based rule

DTM can also react to custom events that happens on the page. A custom event triggered from DOM can be tracked using Event based rules with event type as “Custom Event”.

Let’s take an example of an Ecommerce SPA where idea is to fire “Page view” calls when the person browses from one page to another on SPA without loading the new page.

Step 1: Create a new Event based rule and choose event type as “Custom Event” and specify the  friendly name “Custom_Page_View” for triggered event type. “#content” is specified in the “Element Type or Selector” field, because that field is where the event is dispatched. Select the “Apply event handler directly to element” check box, the rule wouldn’t fire without it.

Step 2:  In Analytics section of the rule, check the radio button for “s.t()” tracking as it is required to track a “page view “ in this use case. 

Step 3: Put the code into your site that creates and dispatches the event.

We can reference the data sent through the event using %event.detail.pageName% in the Analytics section of the rule.

Note: Regardless of any of the above three method used, we may need to suppress the initial page view beacon the Analytics tool will want to set by default. Otherwise, in the example above where the developers are firing a direct call rule or EBR on all page views, you’d get TWO beacons on the first page and 1 on all subsequent pages. Please see the sample code to suppress the initial page view beacon from Analytics tool.

•  Add "return false" to any Analytics Tool custom code block that runs on that page.