autotrackURLChange

Learn how to customize tracking for Single Page Application (SPA) websites. Alternatively, use your preferred tag manager to customize and deploy the SPA tracking snippet. For more information, see About event tracking with tag managers. If you are just getting started, read Predictive Engagement tracking snippet.

Description

The autotrackURLChange module tracks activity on an SPA webpage when a user clicks through relative links or when software-driven activity changes the URL or browser history.

Important

The autotrackURLChange module is automatically loaded when you load the SPA snippet.

To customize how autotrackURLChange tracks user activity, use these options:

• isUrlChange
• onUrlChange
• callback
• delay

isUrlChange

Description: checks whether the URL has changed since the last check.

Type: function

Status: default implementation available; can be overwritten

Returns: Boolean

Arguments:

Name	Description	Type	Status
oldUrl	the previous URL before the change	string	required
newUrl	the possibly changed URL	string	required

Example

This example shows how to exclude tracking when a user clicks relative links on a webpage.

ac('load', 'autotrackUrlChange', {
  isUrlChange: function(oldUrl, newUrl) {
    if (oldUrl !== newUrl) {
      if (newUrl.includes(oldUrl)) {
        return false; 
      }
      return true;
    }
    return false;
  }
}, function() { });

onUrlChange

Description: executes when the URL changes via a relative link or SPA routing functionality.

Type: function

Status: default implementation available; tracks pageviews via ac('pageview'); can be overwritten

Returns: void

Arguments:

Name	Description	Type	Status
newURL	the URL the user has changed to	string	required

Important

By default, the tracking snippet tracks page views via ac('pageview'). If you override the default behavior using onUriChange, remember to manually include this call in the new function.

callback

When a module fully loads, callback is executed. No arguments are passed to the callback.

Example

Your SPA page may use routers or relative links to change the page URL without changing the page title. In this case, the default ac('pageview') call tracks all page views as occurring on the same page. Visit journey information that appears in Live Now and the agent UI does not reflect actual user behavior. To change this, customize the onUrlChange option as shown in the following example.

ac('load', 'autotrackUrlChange', {
  onUrlChange: function(newUrl) {
    let customTitle = document.title;
    if (newUrl.includes('marketing')) {
      customTitle = customTitle + 'marketing';
    }
    if (newUrl.includes('contact-us')) {
      customTitle = customTitle + 'contact-us';
    }
    // supply pageOverrides with location and custom title field
    ac('pageview', {
      location: window.location.href,
      title: customTitle
    });
  }
}, function() { });

delay

Use this option to set a delay between the time when the SDK realizes there is a URL change and when it sends the onUrlChange function.

Example

This example sets a 1-second delay. This gives the application time to change the page title to match the current URL.

ac('load', 'autotrackUrlChange', { delay: 1000 });