Tracking and Consent Use Cases and Examples

Use the Tracking and Consent API to accomplish these use cases.

Account Engagement Analytics in Single Page Applications 

A Single Page Application (SPA) loads all of its navigation resources with the initial page load. As users navigate the site, the page is updated dynamically rather than with traditional page loads. In order to capture page views in an SPA, you must send manual page views to Account Engagement to be recorded.

There are many ways to handle and route requests in SPAs. In this example, there’s a listener that waits for a visitor to click navigation elements that have the navigation-link class. The listener sets the tracked page title to the text of the navigation link, and then sends an analytics request to Account Engagement to record the page view.

1<!-- Embed the Account Engagement analytics library -->
2<script type='text/javascript'>
3var piDomain = 'go.example.com';
4
5(function(){
6    var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src='//'+piDomain+'/pdt.js';
7    var c=document.getElementsByTagName('script')[0];c.parentNode.insertBefore(s,c);
8    window['pdt'] = window['pdt'] || function(){(window['pdt'].cq = window['pdt'].cq || []).push(arguments);};
9})();
10
11// Creating an analytics tracker requires the following:
12// pdt('create', <pardot account id + 1000>, <pardot campaign id + 1000>, 'go.example.com');
13pdt('create', 0001, 0002, piDomain);
14</script>
15<!-- End embed Account Engagement analytics -->
16
17<!-- example menu navigation -->
18<a href="/home" class="navigation-link">Home</a>
19<a href="/about" class="navigation-link">About</a>
20<!-- end example menu navigation -->
21
22<!-- your page content -->
23
24<script>
25(function() {
26   // Update the tracked page title and send a page view to Account Engagement
27   function trackView(pageTitle) {
28        pdt('set', 'title', pageTitle);
29        pdt('sendPageView');
30   }
31
32   // Add event listeners for clicks on navigation links
33   // Clicks on these links will send page views to Account Engagement
34   let navLinks = document.getElementsByClassName('navigation-link');
35   for (let i = 0; i < navLinks.length; i++) {
36        navLinks[i].addEventListener('click', trackView(navLinks[i].text), false);
37   }
38})();
39</script>

Syncing Account Engagement Opt in with Third-Party Consent Management 

If you’re using a third-party consent manager you can sync Account Engagement’s opt in status to match by using the setOptIn analytics action.

1<script type='text/javascript'>
2var piDomain = 'go.example.com';
3
4(function(){
5    var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src='//'+piDomain+'/pdt.js';
6    var c=document.getElementsByTagName('script')[0];c.parentNode.insertBefore(s,c);
7    window['pdt'] = window['pdt'] || function(){(window['pdt'].cq = window['pdt'].cq || []).push(arguments);};
8})();
9
10// Creating an analytics tracker requires the following:
11// pdt('create', <pardot account id + 1000>, <pardot campaign id + 1000>, 'go.example.com');
12pdt('create', 0001, 0002, piDomain);
13</script>
14
15<script>
16// An example site function that returns the visitor opt in preference
17// from a third party cosent manager getConsentStatus();
18let thirdPartyConsentStatus = getConsentStatus();
19
20// Update Account Engagement analytics opt in status to match
21pdt('setOptIn', thirdPartyConsentStatus);
22</script>

Redisplay the Account Engagement Consent Banner 

Cookie consent laws and regulations vary by region. The Tracking & Consent Javascript API can help ensure that you’re always compliant, while also respecting the privacy of visitors interacting with your content. The consent banner is loaded with HTML from your account’s tracking opt-in preferences. You can display the banner when necessary.

1<!-- Embed the Account Engagement analytics library -->
2<script type='text/javascript'>
3var piDomain = 'go.example.com';
4
5(function(){
6    var s=document.createElement('script');s.type='text/javascript';s.async=true;s.src='//'+piDomain+'/pdt.js';
7    var c=document.getElementsByTagName('script')[0];c.parentNode.insertBefore(s,c);
8    window['pdt'] = window['pdt'] || function(){(window['pdt'].cq = window['pdt'].cq || []).push(arguments);};
9})();
10
11// Creating an analytics tracker requires the following:
12// pdt('create', <pardot account id + 1000>, <pardot campaign id + 1000>, 'go.example.com');
13pdt('create', 0001, 0002, piDomain);
14</script>

A call to showConsentBanner from the Tracking & Consent JavaScript API resurfaces the consent banner, letting website visitors change their consent preferences. You can use buttons or links on your website to let users reopen the banner.

1<button type="button" id="show_banner_button" onClick="pdt(\'showConsentBanner\')">
2  Show Cookie Consent Settings
3</button>

Calling hideConsentBanner hides the Consent banner element.

1<button type="button" id="hide_banner_button" onClick="pdt(\'hideConsentBanner\', null)">
2  Hide Cookie Consent Settings
3</button>