…with a bonus: Mobile Device Detection (updated for July 2017)

Here’s the need: we have a responsive website, as pretty much 1/3 of the web has these days. We love receiving emails through our contact form from customers, and they are easy to track as Goals in Google Analytics and we feel they represent a more interested and more serious purchaser. But we also receive phone calls are those are more problematic: tracking a click to call hyperlink is easy if you assign Analytics event tracking to the click. But a problem arises: if desktop users click on the phone number looking for a contact page (they do), then the desktop user registers an event, polluting your Analytics goal tracking with meaningless clicks. So, can GTM be leveraged to only register mobile clicks on the click-to-call link?

So here’s what we want to do with Google Analytics and Google Tag Manager:

• We want to create a tracking event that registers customer phone calls as an event/goal
• We want to track only mobile phone clicks, and not errant desktop clicks to keep our data meaningful
• We know we can do it with Javascript, but we want to do it in Google Tag Manager so all our tags are in one place and so that we can repeat the technique on any site without rewriting and installing the code on every site we work on

Getting Started: Create the Tracking Event (As a GTM Tag)

We assume you have a Google Tag Manager account and have a tag container installed on your site. You’ll create the event in Tag Manager, here’s a link to GTM if you are lazy; of course, you can always hire TastyPlacement for Google Tag Manager consulting if you need, but for now, let’s learn…

To create the event tracking, open your GTM account, navigate to “Tags” and click the “New” button and then select “Universal Analytics” from “Choose tag type”. You want your new tag to look like this screenshot–and you might have to return to these tag parameters to edit it because we haven’t created the “Call Now Click” trigger yet that is shown in the picture:

 

 

 

You don’t need to configure Google Analytics to create the event, Google Analytics will “listen” for our event and store events under “Behavior” and “Events”. Note how our choices of Category/Action/Label appear in our Analytics Account based on the settings above. We want the “Label” to tell us which URL the user was on when they clicked the button; that’s a powerful benefit of GTM that would be a quagmire if coding in javascript. With this little trick, we’ll know which page generated the conversion.

 

Next, We Want To Fire Our Tag Only on Phones

Key to having good data  is to make sure the event is only triggered when the click is generated on a mobile phone, not a desktop or laptop computer which, obviously, has no phone capability. We can isolate phones among our website visitors by creating a user-defined variable in GTM that records each user’s browser width. Smaller screen width means mobile browsers (in nearly all cases).

Let’s browse in GTM to “Variables”, and in the “User-Defined Variables” section, click the “New” button. At the “Choose variable type” pop-up, select “custom JavaScript”, because we’ll be writing a few lines of code here.

We’ve named our variable “Pixel Mobile Screen Width Test”, and selected “Custom Javascript” as the Type and then entered the following small javascript string:

function () {
 var width = screen.width;
return width;
}

Our user-defined variable in GTM looks like this:

 

What this string will do is set a variable based on the user’s screen width. In the next step well set a trigger that is dependent upon the screen width being below a certain pixel size–we want to fire our event only when  Does a narrower screen width necessarily mean the user is on a phone? No, not with 100% certainty, but for our purposes, it’s close enough.

While you’re in the variables section, enable the Click Url variable by clicking “configure” and then the checkbox. For some reason the pre-configured variables aren’t automatically available, you have to manually enable them.

Tying it All Together With a GTM Trigger

Now we tie together our screen width variable and our Google Analytics event tracking with a GTM Trigger to fire the event tracking and register our click in Google Analytics. In GTM, navigate to “Triggers,” then click the “New” button. We are going to create a trigger with the following parameters:

• Event: Click
• Configure Trigger: Just Links, Wait for Tags, Max wait time 2000 milliseconds, Check validation
• Enable When: set this to “Pixel Mobile Screen Width Test” less than 800. That way the tags won’t spring into action unless it’s a mobile device.
• Now to set when our tag fires: set to “Some Link Clicks” and change the “Click URL” to “matches RegEx” and then your phone number. It may be easier to just match the last four digits of the phone number, because if people have been putting hyphens in the tel:URLs, that will make a regular expression match a giant pain.
• You might notice the “Page Path” argument–you won’t need that unless you have a specific page on which you do NOT want the tag to fire. In our case, we have some sample code that might have caused errant triggers, so we wanted to exclude that page.

 

 

So, let’s break this all down: under the “Fire On” section, we want to fire the event tracking when the Click URL matches 5125352492, which is the anchor text in our click to call link (our phone number, obviously). We have another condition though, which is that we only want to fire the event tracking when the screen width is less than or equal to 600 pixels, which refers to the user-defined variable we defined above. Save the trigger, and start testing. There are probably other (and better) ways of doing this, but this meets our requirements; it’s reliable and repeatable. Also, our method will work with anywhere we put a click to call button on our site. Maybe we have a link at the top of the page and at the bottom: either link would register as an event as long as the anchor text of the click to call link is the same. Also, I like how we’ve set the event tracking label to show the URL of the page the user was on when they decide to call.

For troubleshooting, you can use GTM in preview mode. Matthew Bey, our operations manager, developed this solution with lots of reference to Simo Ahava’s blog.

Here’s how I feel after completing this tutorial: