In order to leverage our new API on your sites, you’ll have to generate the tracking code in your Pardot setup.
Next, you’ll copy and paste this script into your web page HTML before the close body tag (</body>) and make a few changes to opt into the API. Let’s take a closer look at what those changes look like.
The following code block shows what changes need to be made to the generated tracking script in order to leverage the new API. There are three key elements:
windowobject. This is called the “tracker object” and will be used to interact with the API.
- It is mandatory to initialize the tracker object using the create command before any tracking can occur, as shown in line 18.
- After you’ve initialized the object, you can push subsequent commands, such as the
sendPageViewcommand in line 21, to the tracker object. Those commands are added to the tracker object’s queue and executed synchronously.
If you’re already familiar with our previous tracking mechanism, you may immediately notice that the variables
piCId are now integer values. Those variables, which represent your account and your campaign IDs, were previously string values.
Once the tracker object is created, there is a wide range of commands that you can push onto the queue, including (but not limited to): updating the value of a tracked field, setting a user’s opt-in status, displaying the opt-in banner, and sending an analytics request back to Pardot. It is also possible to interact with the tracker object and the associated commands outside of the tracking snippet. All you need to do is call back to the Pardot API from inline JS or another JS file. You can find the list of commands and correct syntax in the Tracking and Consent API Overview.
How to implement cookie consent banner handling
Cookie consent laws and regulations can vary depending on your region. Our API can help ensure that you are always compliant and respecting the privacy of those interacting with your content. We hydrate the consent banner with HTML from your account’s tracking opt-in preferences, which gives you the power to display the banner when necessary.
To acquire your users’ initial consent, you can add the
showConsentBanner command to your tracking snippet after creating the tracker object.
A call to
hideConsentBanner is another command within the API that allows you to handle consent changes. When you pass in a Boolean value, it will set the
optIn status — just as it does when you click “Yes” or “No” on the banner. It will also hide any HTML that exists under your consent banner ID.
Check out the Tracking and Consent API Overview to learn more about the different consent commands and their parameters.
How to implement the API for single-page applications
Our legacy, first-party tracking code is executed only during page load or when the user submits something to the server. This made it incompatible with SPAs as they don’t require full page loads. With our new API, we filled this gap to allow you to use Pardot tracking in every kind of web application.
SPAs can vary based on the framework that you’re using. The following code snippet shows a generic implementation that tracks when a user navigates on our SPA to a different page.
- Starting on line 1, we embed the updated tracking snippet
- Lines 18 and 19 hold anchor tags for the navigation elements
- Starting in line 23, we implemented an immediately invoked function (also knows as IIFE), which does two things:
- It creates a local function,
trackView, which will be used to send commands to the tracker object.
- It queries the navigation elements on our page and attaches a
onclicklistener to each element. The
onclickevent will then trigger the invocation of the
- It creates a local function,
About the author
Katherine Pellman is a Software Engineer for Pardot. She joined Salesforce in August 2021 after graduating from the University of Texas with a degree in Computer Science.