Single page applications

If you’re using a single-page-application framework for your website such as React, Angular, Vue.js, Ember.js or Wix, you’ll find that your call tracking code may not find all of your numbers and change them. This is because the way these frameworks work is by loading the content of the page and drawing it on the screen rather than doing a full page load.

Call tracking software triggers each time a page is loaded. If you don’t load the whole page, it doesn’t change the numbers and doesn’t track the visit.

However, by using Mediahawk you can get a single-page-application to track everything smoothly.

Triggering a page

You can trigger a reload of Mediahawk at any time. This will re-parse the page for any Mediahawk numbers and trigger a page to be tracked against the visit. To easily track single page applications, you can trigger this on history change, so whenever the URL changes, you can trigger a new page into mediahawk:

if(typeof mhct == 'object') {
    mhct.reload();
}

tip

If you are using Google Tag Manager, you can set up a history state trigger to pick up when the URL changes.