Things move fast in digital & this method is now outdated. Click here for our latest version.
The latest version of Google Tag Manager comes with a host of default Google tags, however it still doesn't have an 'out the box' option for activating website call conversions. While I'm confident this functionality will be added in soon, the below guide outlines how you can implement call tracking using Google Tag Manager alone, with a custom piece of Javascript.
1. Generate Your Code
First things first, we need to setup the conversion in AdWords and generate the necessary code:
- Navigate to your AdWords account and click 'Tools > Conversions'
- Click the red '+ Conversion' button
- Click 'Select' beneath the phone calls option
- Select the radio button 'Calls to a Google forwarding number on your website' and click 'Continue'
- Give the conversion a sensible name, like 'Website Calls'
- You can assign a monetary value to your calls at this stage if appropriate
- By default, calls that last 60 seconds or more are counted as conversions, however this option can be changed
- Hit 'Save and continue' at the bottom of the page
- You will now reach a page that summarises your settings and provides the code for your tag, see below
- Select the entirety of the code and right click, copy
Click here to see example
2. Add Your Code To Google Tag Manager
- Navigate to the associated Google Tag Manager and add a new 'Custom HTML Tag'
- Paste the website call conversion code into the HTML section and ensure 'Support document.write' is checked
- Select the tag to fire on 'All Pages' and save the tag
Click here to see example
3. Finding Your 'Unique Selector'
The tag we have added into Google Tag Manager will monitor users that visit the site from AdWords and replace the phone number with a trackable variation, however at the moment Google doesn't know where the phone number to be replaced is located. In this section we're going to modify the code Google generated and point it in the right direction. This will require a vague understanding of HTML, but bare with me, it's nothing overly taxing.
- Navigate to the website you've implemented the above tag on (ideally in Google Chrome)
- Right click on the phone number you want to track and click 'Inspect Element'
- This will open the Chrome console.
Essentially we're looking to identify where the phone number is located. Using the Search Star website as an example, I receive the following:
First we need to identify the element in which the phone number is located, either <p>, <div>, <a> or <span>. In the above example we can see the phone number is located within a <span></span>. Next we need to match this element with either a class or an id.Now we need to combine these to create your 'unique selector' using the following rules:
- If your phone number appeared with a class we insert a full stop (.) to create our selector
- If your phone number appeared with an id we insert a # to create our selector
In the above example our phone number appeared within a <span> with the class of new-phone-number phone-number. This would make our unique selector: span.new-phone-number phone-number.
Click here to see example
Here are a few examples taken from various other websites:
1a. Code on website: <p class="contact-text"> Call us on <strong>01225 471 465</strong
1b. Unique selector: p.contact-text
2a. Code on website: <div class="site-contact"><span itemprop="telephone">01761 402461</span>
2b. Unique selector: div.site-contact
3a. Code on website: <div id="get-in-touch">Tel: 01761 402461</div>
3b. Unique selector: div#get-in-touch
(Note in this example we have an id instead of a class, so an # is used)Once you have generated the unique selector for the phone number on your website, keep it safe in notepad.
4. Modifying Your Code
Now we have determined the unique selector we need to pass this information to Google so it knows which number it should be replacing.
- Navigate back to Google Tag Manager and open up the Custom HTML tag created in step 2
- Make yourself some space immediately above the closing </script> tag, which should be the final line of the code
- Click the below link and copy and paste the code into this space
Click here to view code
- Replace the first instance of the dummy phone number (01234 567891) with your number, exactly as it appears on your site
- Replace the second instance of the dummy phone number with your number, without any spaces or symbols if there were any in the above step
- Replace the dummy unique identifier (YOURELEMENT.CLASSORID) with yours generated in step 3
- Save your tag
5. Testing Your Tag
Now everything is setup we need to test that the tag is firing and working as expected. Google's official documentation suggests clicking on an ad and testing is this way, however this custom code has testing functionality built in, so there's no need to click your own ads.
- Click the red arrow next to the 'Publish' button in Tag Manager and then click 'Preview'
- Navigate to your website in a new window
You should see the Tag Manager debug window at the bottom of your website. We're looking for 2 indications that our setup has worked here: Tag has fired in the debug window, and number on site has changed to 01234 567891
Click here to see example
6. Deploying Your Tag
Now we know everything is working as expected, it's time to deploy our tag and wait for the calls to come flooding in.
- Navigate back to the Custom HTML tag within Tag Manager
- Locate the final 2 blocks of code as shown below:
//The line of code below is for testing with GTM's debug mode.
//It replaces the business phone number with a testing number (01234 567891).
window.onload = callback('01234 567891', business_number_unformatted);
//This code executes everything. When you're done testing and you're ready to publish the
//GTM container, place '//' in front of the code above, and remove the '//' below.
//window.onload = _googWcmGet(callback, business_number);
- Essentially we need to switch around the placement of the '//' for the sections of code marked in bold
- So the above code will become:
//The line of code below is for testing with GTM's debug mode
//It replaces the business phone number with a testing number (01234 567891).
//window.onload = callback('01234 567891', business_number_unformatted);
//This code executes everything. When you're done testing and you're ready to publish the
//GTM container, place '//' in front of the code above, and remove the '//' below.
window.onload = _googWcmGet(callback, business_number);
Notice that in the above example the only difference is the placement of the '//' at the start of the highlighted sections. This will ensure Tag Manager ignores the testing section of the code that adds the dummy number 01234 567891, and instead generate a trackable Google forwarding number.Now save your tag and publish it to the world, we're all done.
It is worth keeping in mind you need 30 clicks over 30 days at the ad group level for Google Forwarding numbers to activate, so if you aren't seeing any data you might not have reached this threshold.If you have the
Google Tag Assistant Chrome extension then it makes sense to use this to check the tag also. If the tag is green and smiling, our work here is done!
