Add Pardot Tracking to Your Experience Builder Site

Experience Builder sites are a single-page apps (SPA), so when the user navigates to different pages on the site, only the content area reloads rather than the entire page. The Pardot script records the first load of the site as a page view. Modify the script to allow in-app navigation within the page to be captured more accurately in Pardot.

1. In the Edit Head Markup window, modify the Pardot tracking code so that changes in page state are added to the session history.

   Here’s a sample code snippet with modifications noted.

   1<script type='text/javascript'>
   2piAId = '{{%pardot-id-for-your-org%}}'; //no change from OOTB code (format: 123456)
   3piCId = '';
   4piHostname = '{{%pardot-hostname-for-your-org%}}'; //no change from OOTB code (format: www.yourpardottrackerdomain.com)
   5    
   6(function() {
   7  //patching the history push state function to include calling
   8  // the async_load function that sends data to Pardot
   9  var pushState = history.pushState;
   10  history.pushState = function() {
   11    pushState.apply(history, arguments);
   12    async_load(); 
   13  };
   14    
   15    function async_load(){0
   16        var s = document.createElement('script'); s.type = 'text/javascript';
   17        s.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + piHostname + '/pd.js';
   18        var c = document.getElementsByTagName('script')[0]; c.parentNode.insertBefore(s, c);
   19    }
   20    if(window.attachEvent) 
   21    { 
   22        window.attachEvent('onload', async_load);
   23         //attach event listener for browser history changes
   24         // for browsers that support attachEvent
   25         window.attachEvent('onpopstate', async_load);
   26    }
   27    else 
   28    { 
   29        window.addEventListener('load', async_load, false); 
   30        //add eventlistener for browser history changes
   31        // for all other browsers
   32        window.addEventListener('popstate', async_load, false);
   33    }
   34})();
   35    
   36    
   37</script>

Update your site’s Content Security Policy (CSP) settings so that the head markup works as expected.

After enabling a successful integration between Pardot and Experience Cloud, you can accurately track page views and score leads based on a visitor’s Experience Cloud site navigation.