View source for ATC/Current/SDK/Web tracking API

{{Article
|Standalone=No
|DisplayName=Web Tracking API
|Platform=PureEngage, PureConnect, PureCloud
|TocName=Web Tracking API
|ComingSoon=No
|Context=Use the Web Tracking API to track visitor activity and custom events on your website.
|Section={{Section
|sectionHeading=About the Web Tracking API
|Type=Structured
|alignment=Vertical
|gif=No
|structuredtext=The Web Tracking API lets you track what visitors do on your website. Tracking data is collected through a series of interactions occurring on your website such as pageviews, button clicks, and custom events. These interactions are grouped into visits and act as a container for the actions taken on your website by a specific visitor.

Visits do not have a predefined duration. Depending on your visitor, the visit may be a few seconds or a couple of hours long. A new visit will be created when the visitor has been idle for 30 minutes or more, but they all will be linked to the same visitor.
|fullwidth=No
|Status=No
}}{{Section
|sectionHeading=Obtain consent before tracking visitors
|Type=Structured
|anchor=ObtainConsent
|alignment=Vertical
|gif=No
|structuredtext={{NoteFormat|To be compliant with GDPR requirements, consider if you need to obtain a visitor's consent before tracking their data. For more information on using Altocloud in a GDPR-compliant manner, see {{#mintydocs_link:topic=GDPR|manual=AdminGuide|version=Current|link text=GDPR.}}|1}}


To implement tracking after receiving consent, modify the tracking snippet so that the <tt>`ac('init')`</tt> and <tt>`ac('pageview')`</tt> are only called if consent is given, as shown in the following example:

<source lang="javascript">
 (function(a,t,c,l,o,u,d){a['_genesysJourneySdk']=o;a[o]=a[o]||function(){
  (a[o].q=a[o].q||[]).push(arguments)},a[o].l=1*new Date();u=t.createElement(c),
  d=t.getElementsByTagName(c)[0];u.async=1;u.src=l;u.charset='utf-8';d.parentNode.insertBefore(u,d)
  })(window, document, 'script', 'https://apps.inindca.com/journey/sdk/js/web/v1/ac.js', 'ac');
if (consentGiven) {
// Call the ac('init') function to enable tracking  
  ac('init', 'a061a3fe-7a80-4b50-9d3b-df88c0f9efad', { region: 'use1' });
  ac('pageview');
</source>

You are responsible for setting the value for the <tt>`consentGiven`</tt> variable based on the visitor's choice.

|fullwidth=No
|Status=No
}}{{Section
|sectionHeading=Enable web tracking
|Type=Structured
|alignment=Vertical
|gif=No
|structuredtext=To enable Web tracking on your website, initialize the Tracking SDK and then call the <tt>pageview</tt> method when a visitor navigates to a new page.
|fullwidth=No
|Status=No
}}{{Section
|sectionHeading=Stop tracking if a visitor revokes consent
|Type=Structured
|anchor=StopTracking
|alignment=Vertical
|gif=No
|structuredtext=If a visitor revokes consent at any point, invoke the <tt>destroy</tt> command to stop tracking and remove all cookies, as shown in the following example.<br />
<source lang="javascript">
// to disable tracking and delete Altocloud cookies
ac('destroy');
</source>
|fullwidth=No
|Status=No
}}{{Section
|sectionHeading=Types of tracked data
|Type=Structured
|anchor=CollectionMethods
|alignment=Vertical
|gif=No
|structuredtext=The Journey JavaScript SDK lets you customize how you collect tracking data for your website. The most basic form of tracking is page view tracking. For page view tracking, {{MINTYDOCSPRODUCT}} records each page a visitor visits. You can also use the Journey JavaScript SDK to record custom visitor activities such as button clicks. For more information see ''Track custom events'', below.
|fullwidth=No
|Status=No
}}{{Section
|sectionHeading=Track pages viewed by your customers
|Type=Structured
|alignment=Vertical
|gif=No
|structuredtext=The <tt>pageview</tt> method tracks the pages viewed by your visitors. To send a <tt>pageview</tt>, call the <tt>ac</tt> function and pass <tt>pageview</tt> as the first argument. 
<source lang="javascript">
ac('pageview');
</source>{{NoteFormat|By default, the {{MINTYDOCSPRODUCT}} tracking snippet contains the <tt>ac</tt> function.|1}}
|fullwidth=No
|Status=No
}}{{Section
|sectionHeading=Track custom events
|Type=Structured
|anchor=record
|alignment=Vertical
|gif=No
|structuredtext=The <tt>record</tt> method allows you to track custom events, usually as a result of a person interacting with an element or control in your website, for example, the click of a button. 
The <tt>record</tt> method takes two parameters:
* The name of the event to record as a string. '''Note:''' See ''Guidelines for custom event names'' below.
* An (optional) key-value hash of properties for the event.
* An (optional) callback function that will be invoked when the request is completed.
* An (optional) callback timeout, in milliseconds, to configure how long to wait if the event is taking too long to complete. This is useful to capture events (such as file downloads) before navigating to a different page/URL, making sure the visitor is always redirected.

<source lang="javascript"> 
ac('record', 'section_opened');
</source>

You may also provide extra metadata with your custom event:
<source lang="javascript"> 
ac('record', 'button_clicked', {
  companyName: 'Acme Inc,',
  employees: '100-500'
});
</source>

The following code sample shows how to record a file downloaded and navigate to the file <tt>URL /files/pricing.pdf</tt> when the event is captured, or after 400 milliseconds:
<source lang="javascript"> 
ac('record', 'file.downloaded', {
  name: 'Pricing',
  fileType: 'pdf'
}, function () {
  navigateTo('/files/pricing.pdf');
}, 400);
</source>
|fullwidth=No
|Status=No
}}{{Section
|sectionHeading=Guidelines for custom event names
|Type=Structured
|alignment=Vertical
|gif=No
|structuredtext={{NoteFormat|Event names must be a maximum of 255 characters. You can use any combination of lowercase alphanumeric characters and an underscore. Keep event names short and descriptive. |1}}
The suggested format for custom event names is: ''<tt>object-delimiter-action</tt>'', where object is the object that was interacted with, and action is the type of interaction that occurred. 

Examples of custom event names include:
* <tt>"detected_errors"</tt>
* <tt>"section_failed"</tt>
* <tt>"section_submitted"</tt>
* <tt>"product_added"</tt>
* <tt>"product_removed"</tt>
* <tt>"address_selected"</tt>
|fullwidth=No
|Status=No
}}
}}