How to Use Google Tag Manager with Mediahawk

You want to get our code deployed to your site as quickly as possible, and integrated with their existing stack of technology. Historically, this needed quite a few steps with developer involvement. Now any digital marketer can do it themselves.

In this post, I’ll show you how easy it is to get Mediahawk set up using Google Tag Manager (GTM) and two examples of how you can use two popular tools with Mediahawk and Tag Manager:

Include Your Mediahawk Code Through Google Tag Manager

To deploy Mediahawk to your website, you need to include a snippet of code on every page of your website. This is really easy to do through Google Tag Manager and you only have to do it once – just add a new tag to trigger on every page and put in our code. To make this easier still, you can click ‘Create Tag in GTM’ in your Mediahawk account, or we can do this for you.

Most call tracking providers ask you to go through your code and add some HTML to each phone number you want to change for your visitors. You can do this with Mediahawk, but if you’re like many marketing departments and don’t have access to the HTML of your site, it may take some time to get this working for you. With Google Tag Manager, you can instruct Mediahawk which phone numbers you want to change and it will find and replace them without you needing to touch any code.

Example 1 – Integrate Mediahawk With Hotjar

If you use Hotjar to analyse customer’s movements on your website, you can using GTM to push the Hotjar ID to Mediahawk and the Mediahawk ID in Hotjar. Once you have the two systems integrated, you can dive into the detail and see the recording of someone moving round your site and see which point they called you, filled in a form or started a chat session. You can then make tweaks to your website so people get to your call-to-action (CTA) in the most efficient way possible.

Getting the Hotjar ID into Mediahawk

Using the Mediahawk CTA feature, we can pull in the Hotjar ID as a CTA trigger, straight into the Mediahawk visitor flow.

1. Set up a new tag in GTM to trigger on all pages
2. Add custom HTML that triggers five seconds after the page load, collects the userId from Hotjar and sends it to the CTA in Mediahawk:

<script>
function sendMHIDToHotjar() {
	if(typeof mhct == 'object' && typeof hj == 'function') {
      		var hjUserId = hj.globals.get('userId');
      		var hjUserIdParts = hjUserId.split('-');
      		mhct.trigger('dm6', {'text': hjUserIdParts[0]});
	} else {
		setTimeout(function(){ sendMHIDToHotjar() }, 3000);
	}
}
setTimeout(sendMHIDToHotjar, 5000);
</script>

In the example above, we are sending to CTA ID “dm6”. Remember to change this as required. 

Getting the Mediahawk ID into Hotjar

You can ‘tag’ a recording in Hotjar. Using this functionality, we can send over the Mediahawk ID for the visit which you can then see within Hotjar to make sure you can get to the Mediahawk data from Hotjar.

1. Set up a new tag in GTM to trigger on all pages
2. Add custom HTML that triggers 5 seconds after the page load, collects the Mediahawk ID and sends it to Hotjar:

<script>
function getIDFromHotjar() {
	if(typeof mhct == 'object' && typeof hj == 'function') {
		hj('tagRecording', [mhct.getVisitMHRI()]);
	} else {
		setTimeout(function(){ getIDFromHotjar () }, 3000);
	}
}
setTimeout(getIDFromHotjar, 5000);
</script>

Example 2 – Correctly trigger call tracking for 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 Google Tag Manager with Mediahawk you can get a single-page-application to track everything smoothly.

Here’s how:

1. Create a new tag in GTM to trigger on ‘History Change’
2. Add custom HTML that tells Mediahawk to reload (changing the numbers and logging a page view):

<script>
if(typeof mhct == 'object') {
	mhct.reload();
}
</script>

Summary

Using Google Tag Manager with Mediahawk will not only speed things up for you, but will give you more control and flexibility in how you deploy software and tracking tools. If you’re using other tools, by using the same approach you will be able to get similar levels of attribution. For example, Mouseflow works in a similar way to Hotjar and has an open API so you will be able to push and pull IDs in a similar way.

As always, if you would like more information, please don’t hestitate to contact us.