Difference between revisions of "ATC/Current/SDK/autoTrackURLChange"

From Genesys Documentation
Jump to: navigation, search
(Published)
(Published)
Line 17: Line 17:
 
*{{Link-SomewhereInThisVersion|manual=SDK|topic=autoTrackURLChange#onUrlChange|display text=onUrlChange}}
 
*{{Link-SomewhereInThisVersion|manual=SDK|topic=autoTrackURLChange#onUrlChange|display text=onUrlChange}}
 
*{{Link-SomewhereInThisVersion|manual=SDK|topic=autoTrackURLChange#callback|display text=callback}}
 
*{{Link-SomewhereInThisVersion|manual=SDK|topic=autoTrackURLChange#callback|display text=callback}}
 +
*{{Link-SomewhereInThisVersion|manual=SDK|topic=autoTrackURLChange|anchor=delay|display text=delay}}
 
|fullwidth=No
 
|fullwidth=No
 
|Status=No
 
|Status=No
Line 146: Line 147:
 
|alignment=Vertical
 
|alignment=Vertical
 
|gif=No
 
|gif=No
|structuredtext=NOTE remember to add a link to this new section from the top section.
+
|structuredtext=Use this option to set a delay between the time when the SDK realizes there is a URL change and when it sends the <tt>onUrlChange</tt> function.  
 
 
Use this option to set a delay between the time when the SDK realizes there is a URL change and when it sends the <tt>onUrlChange</tt> function.  
 
  
 
===Example===
 
===Example===
Line 154: Line 153:
 
  ac('load', 'autotrackUrlChange', { delay: 1000 });
 
  ac('load', 'autotrackUrlChange', { delay: 1000 });
 
|fullwidth=No
 
|fullwidth=No
|Status=Yes
+
|Status=No
 
}}
 
}}
 
}}
 
}}

Revision as of 11:07, January 16, 2020

This topic is part of the manual Journey JavaScript SDK for version Current of Altocloud.

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. If you are just getting started, read 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

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.

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() { });

callback

When a module fully loads, callback is executed. By default, it returns nothing to you. However, you can override the default callback behavior if, for example, you want to supply your own callback behavior and wait for it to execute before doing some other function on your website.

Example

ac('load', 'autotrackUrlChange', {}, function(error) {
  // Check if there was an error on loading
  if (error !== null && error instanceof Error) {
    // handle error
  }
  console.log('successfully loaded');
  customCallbackFunctionality();
});

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 });