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:
- 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 :
s.linkTrackVars="prop1,eVar1,events"; s.linkTrackEvents="event1"; s.prop1="some value"; s.eVar1="another value"; s.events="event1"; s.tl(this,'o','My Link Name');
For s.t() i.e. Page View calls, this can be accomplished by:
Sample Code :
s.clearVars(); s.pageName="New Page" s.prop1="some value" void(s.t());
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.