Pardot Knowledge Base

Advanced Topic: Using Tracking Code within JavaScript MVC Frameworks

Last Updated: Apr 26, 2016 | Print this Article
Note: This is an advanced method of using Pardot tracking code that will require assistance from your developers to function properly. Some websites use JavaScript to dynamically change the state of a page based on user interaction, rather than loading a whole new HTML page. Many sites use frameworks like AngularJS or Ember.js to accomplish this. Because of the difference in how the HTML is delivered to the browser in a standard page load versus how it is delivered to the browser when using JavaScript, the standard Pardot tracking code will only record a single page visit when someone visits a site using JavaScript in this way, rather than recording a new page visit for each state change. To work around this, the standard Pardot tracking code should still be included on your site, but additional development work will be necessary for each state change to be tracked as a separate pageview in Pardot. The function piTracker, which is loaded in the default tracking code, is responsible for sending page visits to Pardot. The function takes a single argument, trackerURL, which should be a string for an absolute (not relative) URL. That URL is passed to Pardot, and Pardot tracks a page visit to that URL for the cookied visitor. An example call to piTracker would look like this:
To get this working on your website, follow these three steps:
  1. Determine the URLs you want to track. On some sites, each page state will have its own unique URL. On other websites, this is not the case. You will need to determine which page states should be tracked as which URL. The URLs passed to piTracker do not need to be functioning URLs, but they do need to be unique for each tracked page state.
  2. Determine what JavaScript code path produces the page state you want to track. In different JavaScript frameworks, different events and code paths result in certain states. You need to determine which event and which code path results in the page state you want to track. In many cases, this will be your JavaScript framework's routing code.
  3. Add the piTracker code to the appropriate code path. You will need to add a call to piTracker in the code path for the event that causes the state change, passing in the URL that you'd want to be tracked for that particular page state.
Once this is implemented, each page state change that sends a URL to the piTracker function will be tracked as a page visit in Pardot.

Need more? Start a conversation with other Pardot users in the Trailblazer Community