How to use GTM to Track Clickable to Calls Phone No

How to Make Your Phone No Clickable to Call & Track It with GTM, without needing a web developer.

With this Step by Step, you will learn how to add a piece of HTML to your Website. So you will be able to create Phone No that lets people tap & call from their mobiles when they’re on your website.

Having a clickable Phone No is one of the first things I look at when reviewing a Website for clients.

In the last 4 years, I have probably have written at 7 articles, on why you should have added a phone No which call from your mobile. Let’s face no ones going to write down then ring you. So visitors on your website must be able to call you by tapping on your Phone No.

If I just stopped there, you would at least be able to let people call you looking for info when they come to your website. But how are you going know how many called from your website.

Tracking Calls from a mobile has been a problematic & complicated process. Which need a web developer with serious chops. Think Slow & expensive. My head would spin trying to explain this to my web team.

Relax I’m not going to throw under a bus, I let you try to work this by mastering HTML, CSS, jQuery and JavaScript & other fancy coding words.

With GTM (Google Tag Manager) Tracking if someone clicks on your Phone No on your web is not such a daunting task anymore. In fact, You can do this without even knowing any coding at all.

And what’s more, you won’t even need a web programmer. Phew! No more difficult conversations with a web developer being baffled by all the Techy mumbo jumbo. That should keep your sanity.

I promise if you follow these steps you will be able to add to make your Phone No Clickable to Call & Track It with GTM, without needing a web developer.

Ok, let’s dive.

How to Make Your Phone No Clickable to Call & Track It with GTM

Can they click on your Phone No on your website & ring you?…

Step 1 – Clicking on Phone No Triggers HTML to Call Number

When you click on the phone no you see at the bottom left it’s showing that’s linking to HTML “tel://+61420745357″…

This what you should expect to see when you Tap your Phone No on a mobile. Tap & you can call the Number

Step 2 – Adding HTML To WordPress Website

Tracking Mobile Clicks with GTM3 Adding html

Warning: This only place where you will be adding HTML.
Don’t worry it’s simple even my dad can do this…

On my website, the HTML code goes in a widget but it could be added to anywhere you want to add a clickable Phone NO…
So all you have to do is copy the following HTML Code: <h4><a href=”tel://+61420745357″> Call+61420745357</a><h4>
To break this down to it makes sense <h4> … </h4> this part is optional. The <h1> to <h6> tags are used to define HTML headings. Your <h> Tag should be set up on your website & determine the Colour, Size & Font…
The <a href=”tel://+61411111111″> Converts your Phone No so it’s clickable… Make sure your change number to your Phone No. If you don’t then I’ll be getting all your calls…
Call+61420745357</a> This your Call to Action – In my case Call+61420745357 it’s fit into the Menu… You will notice on other spots on the site I’ve used Need Help With Your Digital Marketing Call +61 420 745 357…
Past Html Code on your Site in Custom HTML Block in new Gutenberg WordPress 5…
I told you was not hard to do. Easy Peasy

Google Tag Manager

Step 3 – Finding GTM (Google Tag Manager)

Go to https://tagmanager.google.com/
You will need to sign in your account if you don’t have one, then you can create an account & login with your Gmail account… It’s Free…
Google Tag Manager (GTM) is Google’s free tool for everyone to manage and deploy analytics and marketing tags as well as other code snippets using an intuitive web UI…

Step – 4 Inside GTM (Google Tag Manager)

This where you’ll find your Google Tag Manager ID, Which we’ll need to add to your website…
If you click on Google Tag Manager you will find the Javascript code, which some websites need to get GTM to work… We won’t need this because we are using WordPress… Check Javascript Sample Below…
You’ll notice it has Google Tag Manager ID embedded into the Javascript code… Relax we don’t need this…

GTM Javascript. Snippet with embedded GTM ID

GTM Inside WordPress

Step 5 – Installing DuracelTom’s Google Tag Manager for WordPress

Installing DuracellTomi's Google Tag Manager for WordPress Plugin

With this Plugin, you won’t need to use the Javascript Code to add your GTM ID to WordPress…
You will find DuracelTom’s Google Tag Manager for WordPress… if you search GTM in install new plugin in WordPress or you go to https://wordpress.org/plugins/duracelltomi-google-tag-manager/ this been test up Version 5.0.3 with over 200,000 downloads…
This plugin places the GTM container code snippets onto your WordPress website so that you do not need to add this manually…

Step 6 – Adding Your Google Tag Manager ID

Adding GTM Id to Google Tag Manager for WordPress

In DuracelTom’s Google Tag Manager for WordPress click on settings then copy your Google Tag Manager ID… It’s that simple…
That’s about it for now… the other Tabs are for advanced features we’ll look at another time… Sp let’s head back to Google Tag Manager…

GTM Google Tag Manager

Step 7 Exploring Google Tag Manager

Manage all your tags without editing code. Google Tag Manager delivers simple, reliable, easily integrated tag management…
Increase your agility – Efficiently add and update your own tags to better understand conversions, site analytics, and more…
Integrates easily – Tag Manager supports and integrates with all Google and third-party tags…
1 Preview Mode –See how the changes you’ve made actually work before deploying live to your site…
2 Workspaces – Easily work on tags at the same time as teammates. Simply create a new workspace, make changes, and hit publish without affecting other workspaces…
3 Site Tag Overview – See all tags within your container — and any associated triggers — at once. You can easily add tags or select those you’d like to change or remove…
4 Tags – A tag is a piece of code that sends information to a third party, such as Google Analytics. Tags are often provided by analytics, marketing, and support providers to help you integrate their products into your website or mobile app… – (Ultimate Google Tag Manager Glossary – Analytics mania )…
5 Triggers – Control when and how your tags fire to get all of the data you need… A trigger is a condition that evaluates to either true or false at runtime. Triggers attached to a tag govern when the tag should fire or not. – (Ultimate Google Tag Manager Glossary – Analytics mania )…
6 Variables – Variables are name-value pairs for which the value is populated during runtime. For example, the predefined variable named url has been defined such that its value is the current page URL… – (Ultimate Google Tag Manager Glossary – Analytics mania )…
7 Folders – Organize tags, triggers, and variables into logical groupings, making them easier for your and your team to work with…
8 Versions History – Keep a robust record of what’s been published on your site with the ability to easily return to a prior version at any time…

Step 8 Make Sure You Have Google Analytics Set Up

The first Tag to create is Google Analytics, so you track what’s going on your website …
You Probably already have Google Analytics installed on your website… So you don’t cause a conflict having installed twice watch the video on how to install Google Analytics… This will save us from getting bogged, so we can focus on Tracking calls…

Step 9 Creating Google Analytics Variable

This a handy little trick which will save you time, because when you create a Tag, there a good chance you’ll want to send info to Google Analytics… So rather than having to add your Google Analytic Tracking ID create a variable…
So go to Variables click on New then give it a name you can recognise add your Google Analytics Tracking ID, then save… Now each time you want have Tag sending data to Google Analytics just insert GA Variable…

Creating The Call Tracking Trigger in GTM Google Tag Manager

Step 10 Creating a New Trigger for Tracking When a Phone No Is Called

Creating a new trigger for Tracking when people call number on website

In the Lefthand side of your Wworkspace, you’ll see Triggers Click on the Trigger Tab & click on NEW…

Step 11 Name Your Trigger

Name Your Trigger so it make sense to you & will be easy to find… Then click on the link Image to set up your Trigger…

Step 12 Choose Your Triggers Clicks – Just Links

The Trigger we will be choosing Under Click Just Links…
If it does not show click on Triggers to see which triggers have been activated… Activate the Triggers you want to use…

Step 13 Select All Links Part 1

This a 2 Step process we need to select All Links Clicks, the first time around so we find the right to Track when the Phone No Is clicked on by a mobile phone to ring you …

Step 14 Google Tag Manager Preview on GMC Website

This what Google Tag Manager Preview Panel looks like on getting more Customers …
The panel at the Bottom…of the screen is the Google Tag Manager Preview section, it’s only on your screen when you have Google Tag Manager open and in Preview Mode…

Step 15 Clicking Phone No Shows Up Tag Manager Preveiw Panel

When you Click on the Phone no, at the top it asks if you want to call with Facetime because it’s on a desktop… On a mobile phone it would call…
You will notice in the Summary on the Lefthand side 7 gtm.link Click fired

Step 16 Getting the Right Click Action

GTM Clicking on Phone no triggers gtmlinkClick

We can see when we click on the Call+61420745357 it fires gtm.linkClick …
When scrolling the list of the Clicks, we’re looking for Click URL – DataLayer Variable – String ‘tel://+61420745357’ … Youre looking for tel: … Now we can go back and modify the trigger so it fires on the right Type of Click…

Step 17 Modifing Click – Just Links Part 2

Head back to Google Tag Manager Click on Trigger Tab & look for the name you gave phone tracking click trigger … Mine was GMC Phone Clicks…
On your Trigger Configuration Select Click – Just Links…
1 Wait for Tag keep default 2000 milliseconds…
Check Validation, then Click URL then Select matches RegEx – in the blank space .*

Step 18 Changing All Links to Some Link Clicks Part 2

GTM Changing All Links to Some Link Clicks

1 Select – Somes Link Clicks …
2 Select – Click URL …
3 Select – contains …
4 Add Text – tel: …
5 Save Your Trigger…

Step 19 The Finished Trigger for Call Tracking

This how your finish trigger for Call Tracking should look like …

Creating The Call Tracking Tag in GTM Google Tag Manager

Step 20 Creating a New Tag in GTM

Now it’s time to create the Tag which fires from the Trigger we just created…
On the Lefthand Side Select Tags then NEW…

Step 21 Name Your Tag

Name Your Tag … In Google Tag Manager, naming conventions are important when naming tags, triggers, and variables. Instead of naming a tag as “Button click”, try giving it a more descriptive name GA Event – Click – Contact Support Button. In other words, it’s a logical way of naming items (e.g. files and folders) to keep everything in order. (Ultimate Google Tag Manager Glossary – Analytics mania )…
I have named my Tag Google Analytics- Events – Phone clicks …because I’m tracking in Google Analytics – It’s an Events – The Event is Phone Clicking…

Step 22 Choose a Tag Type

Now we have to Choose our Tag Type … For this, we are going to select Google Analytics Universal...

Step 23 Configuring Google Analytics Part 1

1 Fill in to configure Google Analytics Tag …
2 Track Type – Event …
3 Event Tracking Parameters Category – Phone Clicks …
4 Action – Tracking phone clicks …
Label – click on the Brick & choose {{Page Path}}

Step 24 Configuring Google Analytics Using Variable Part 2

In this step, we going to use the Step 9 Google Analytics Variable…
When you click on this you will find the Variable {{ga_property_id}} ( your’s will be whatever you named the variable
Leave teh Advanced seting, not required

Step 25 Click on The Trigger Image

Click the Image to Add Trigger…

Step 26 Select All Links Part 1

Choose your firing trigger – GMC Phone clicks …
Then make sure you save it…

Step 27 Save Your Tag

Check your Tag Configuration then save …

Step 28 Finished Tag

Tag for Phone Tracking now finished, ready Preview testing …

Step 29 Google Analytics – Event – Phone clicks fire on HomePage

Google Analytics Event Phone clicks fired on page

Clicked Phone & gtm.clicklink Showed & Tag Google Analytics – Event – Phone clicks Fired …

Step 30 Google Analytics – Event – Phone clicks fired Successfully

As you can see Google Analytics – Event – Phone clicks fired successfully…
One Last check to see if work in Google Analytics..

Step 31 Select All Links Part 1

The Tag also showed up in Realtime in Events in Google Analytics…
It’s time now make this live…Submit fill in much detail as you can

Step 32 Version 2 – GMC Phone Tracking 050319

Version 2 - GMC Phone Tracking 050319Version 2 - GMC Phone Tracking 050319

Now it’s submitted It’s live on https://www.gettingmorecustomers.co/ …

Now it’s your turn to create Tag to tracking people who click on your phone no on your website.

Enjoy This post took longer than I expected because I made mistake & to backtrack till I found the problem, then I had to redo the graphics.

So just be patience & work through the Steps.

If you’d like help with this or your digital marketing giving a call or message me.