Articles in this section

See more

Reload Code for Single Page Applications

Avatar
Delacon
Updated
Follow

Introduction

Delacon's standard JavaScript tracking code functions by firing on page load and replacing the existing Business Number within the page content with the allocated tracking number.

However, in the case of Single Page Applications (SPAs) as the user navigates the site the tracking code does not get reloaded and only the necessary site elements are updated. The effect is that the tracking number will only be updated for any instances of the Business Number that exist within the first (approximately) 20 seconds of the users session, and there will be no further updates unless the browser window is refreshed.

 

Solution

In order to overcome this issue, the following script can be used to force a reload of the Delacon tracking code when the user navigates to a new distinct "view" in the Single Page Application, that reveals the phone number.

<script type="text/javascript">
var refCids = "XXXXXX";
if (typeof plaPageReload == "function") {
 plaPageReload(refCids);
}
</script>

The var refCids = "XXXXXX"; line needs to be updated with your own CID (replacing XXXXXX), if multiple CIDs are in use these should be comma separated.

 

Setup

Implementation within website source code

This function should be tied to the click event that loads the new "view" so the tracking code can update any new instances of the Business number with the tracking number. The exact method and configuration for your particular site will need to be identified and implemented by a web developer with knowledge of AJAX in line with the following concept.

howajaxworks.png

If you are unable to tie the reload function to the click event, Delacon can enable backend functionality to capture the AJAX events and reload the tracking numbers without additional coding on your website. Please note that this may slow the performance of your website and may not be suitable in all cases. Please contact support@delaconcorp.com for further information.

Implementation via Google Tag Manager

The reload code can be deployed via Tag Manager using the History Change Trigger.

This trigger will fire a tag when:

  • the URL fragment changes, or
  • when a site uses the HTML5 pushstate API.

This trigger might not work for all types of Single Page Applications. Please review the Google guide to determine whether this trigger is suitable for your website.

To deploy the reload code via Tag Manager, follow the steps of our main GTM guide.

For step 4, paste the reload code from above, updated with the relevant Service IDs, into the HTML box.

For step 5, select the trigger "History Change". Set the toggle to "All History Changes".

Monosnap z8ti5.png

Comments

0 comments

Please sign in to leave a comment.

Related articles