Google Tag Manager Tracking Basics

Google Tag Manager is a powerful tool that effectively cuts out the developer middleman for adding functionality to a website. Call tracking, chatbot agents, heat mapping integration and social media pixels are all easily deployable making tracking for your SEO, PPC & social media campaigns a breeze.

Today we are going to look into the basics of tracking click/tap to call links, email links and also tracking Contact Form 7 form submissions.

Click/Tap to Call

Along with contact form submissions, setting up click/tap to call phone numbers on your website is vital. Tracking this way is a middle ground between using dedicated call tracking software but without the expense, however, it doesn’t provide call recording, call length or phone number details like specialised solutions do but it can still provide you with the channel from which the call was initiated.

To set up click to call simply head on into Google Tag Manager, click ‘tags’ in the left menu, then click ‘new’ next to the magnifying glass. Then name your tag ‘Click to Call – Tracking’, select the tag type as ‘Google Analytics: Universal Analytics’ and select ‘event’ under the track type dropdown.

Under category you need to input ‘Click to Call’, followed by ‘Click’ in the action field and ‘{{Page Path}}’ within the label field. By adding the page path variable in this field it will then pass on the page URL in to Analytics of where the goal was tracked. Then you need to link your Google Analytics code, if you have this setup as a variable already just click the drop-down and choose the GA code variable, if not tick the ‘Enable overriding settings in this tag’ box and input your UA-XXXXXX-X code there.

Now we need to set the trigger for this tag.

Simply click below to set up the trigger, name your new trigger ‘Phone Number Click’, then select the ‘Click – Just Links’ trigger type. Then tick the ‘Some Link Clicks’ checkbox. Hold on to your hats, we now need to set the conditions that must be met for this trigger to work.

In the first row select ‘Page URL’ from the first dropdown, followed by ‘matches RegEx’ in the second dropdown and then input ‘.*’ without the apostrophes.

Next click the + button to add a new row, in the first dropdown select ‘Click URL’ (Tip: If you can’t see click URL in this drop-down, fear not, select ‘Choose built-in variable’ and select click URL from the list.), in the middle dropdown select ‘starts with’ and then in the final input box, paste the following (without apostrophes): ‘tel:’.

Then hit the save button and click save on the next window that appears. From here we can now publish the new tag & trigger that we have just set up, simply hit submit, add a version name and description and then publish.

But it doesn’t stop there, we now need to set this up as a conversion in Google Analytics. To do this load up the website property in Google Analytics, click on the admin cog, then click goals and then click new goal. Under goal setup click the custom check box, click continue, name the goal, click the event checkbox and click continue. In the next window paste the category ‘Click to Call’ and action ‘Click’ from the tag we setup in Tag Manager, then hit save. 

You can now test that tracking is working by visiting the real-time section of Google Analytics and clicking through to conversions. Then simply load up the website, click on a phone number and watch to see the conversion recorded in Google Analytics in real time.

Click to Email

Tracking click-to-email follows the same principle as click/tap to call. 

The trigger follows the same principle as click to call, however, the click URL now starts with ‘mailto:’ 

Once you have created the tag and the trigger, publish the new container with your amends and head over to Google Analytics.

Set up the click-to-email goal similar to click-to-call, your category will now be ‘Click to Email’.

Now head to the real-time section of Google Analytics, click conversions and then load up the website in another tab or window, click on any email address link on the site and check back in real-time analytics to see if the conversion has been recorded.

Contact Form 7

Now it’s time to set up tracking for those all-important contact forms, below is a walk-through for setting up submission tracking for Contact Form 7 in WordPress. First, we need to set up the CF7 listener which is a piece of code that we will set to fire on all pages of the website. To set up the tag, create a new tag and name it ‘CF7 Listener’, for the tag type select custom HTML. In the field paste in the below code:

You can copy and paste the code here:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7submission",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
}); 
</script>

Set the trigger as page view all pages, then simply hit save.

Next, we need to setup a custom data layer variable. This will extract the contact form ID on submission and send the ID in to Google Analytics, this will then allow us to setup separate goals for each contact form on the website. To set this up, click variables in the left menu, scroll down to ‘user defined variables’, click new. Name the variable ‘dlv – formid’, then select the variable type as ‘data layer variable’, input ‘formId’ in the data layer variable name field then save the variable. The variable should match the image below:

Next, we need to setup the event tracking tag. Head back to tags, hit new and name the new tag ‘Contact Form Submission’. Select the tag type as ‘Google Analytics:Universal Analytics’ and amend the track type to event. Input ‘form submission’ as the category, then input ‘form id {{dlv – formid}}’ as the action followed by ‘{{Page URL}}’ as the label and then add your Google Analytics code variable under Google Analytics settings (or hit override to input the UA code in manually).

We now need to setup the trigger for this tag, click triggering to select a trigger, then click the ‘+’ button setup a new custom trigger. Name this new trigger ‘Custom – cf7submission’, then select ‘custom event’, then in event name type ‘cf7submission’ and save the trigger then save the tag.

Now all the relevant tags and triggers have been added to the container, you can now publish your changes.

Now all that’s left to do is to setup the goals in Google Analytics, for this we will need to open the goal tracking setup in GA admin and also load up the Contact Form 7 overview of forms like below.

This will then display the shortcodes for each form on your website and the ID for each form. For goal tracking we will be using the ID section to help Google Analytics identify which form has received a submission.

As an example we will setup the contact form tracking for the ‘Arrange Home Visit’ form, in the goal section of Google Analytics admin setup a new custom goal, set the goal name as ‘Arrange a Home Visit’ and set the type to ‘event’. Next in goal details set the category as ‘form submission’ and the action as ‘form id 1869’, this tells Google Analytics that when form id 1869 has a submission that it should be recorded as the arrange a home visit goal. Next hit save to store the new goal. 

For setting up other form goals repeat this process but change the ID number in the action to match the corresponding form in Contact Form 7, so for arrange a workplace visit we would change the action field to read ‘form id 3558’.

Summary

Google Tag Manager makes tracking goals easier than ever. Above are some of the key goals used in marketing campaigns, you can setup additional events and tracking such as scroll tracking where appropriate.