Using jQuery to track clicks based on href "type"


Add phone calls to your analytic reports. Know when people call, how frequently they call, and who they are calling to make better advertising decisions. Imagine if you could tell Google Ads you were willing to spend $20 per phone call as an add budget (hint: you can). The first part of phone tracking is to create a call conversion metric.

Identify every tag that has a specific attribute value and use that to send events to your tracking platform? Here is how you can automatically create and track events whenever a phone number is clicked. This approach works for any kind of attribute (email, video, etc.)

SKILL LEVEL: Intermediate

<a href="tel:+1-877-930-0955"> Click to Call </a>

In this case the “a” element has an opening tag “<a>” and a closing tag “</a>”. The opening tag as the “href” attribute and the href’s attribute value is “tel:+1-877-930-0955”.

Wrap your head around attributes, tags, and elements here.

Let’s have jQuery automatically find every a tag that has the href attribute starting with “tel:…” In order to do that, we need to dust off some regular expressions. I found this: a[href^=”tel”].

Now let’s built a quick test log clicks on phone numbers to the console:

jQuery('a[href^="tel"]').click(function() {
  var phone = this.href.replace('tel:','');

Line 1: Match anything that is an “a” tag that has an “href” attribute starting with “tel.” When a match is clicked, run this function.
Line 2: Set the variable phone to a string equivalent to the “href” attribute value. Replace the “tel:” portion of the string with nothing. In our example, this would equal just the phone number part “+1-877-930-0955”
Line 3: Send the phone variable to the browser’s console (hint: to see your console press CRTL-SHIFT-I in chrome)

Let’s send the phone number to Google Analytics (GA) instead of logging to the console:

In order to send something to GA, you want to make sure your normal tracking is setup correctly. There are a lot of resources to help you here so I will just assume you have GA setup correctly.

Here is the specification to send an event to GA:

ga( 'send', 

So adjust our snippet to send an event to GA. Note, not all fields are required in the ga() event tracking code. We really only need Category, Action, and Label for this example.

jQuery('a[href^="tel"]').click(function() {
    var phone = this.href.replace('tel:','');
    ga('send', 'event', 'phone', 'click', phone ); 

What does this do? ga(‘send’, ‘event’, ‘phone’, ‘click’, phone ) becomes ga(‘send’, ‘event’, ‘phone’, ‘click’, **‘+1-877-930-0955’** ) and we can now see all phone number clicks as well as what number was clicked in GA.

Now that you have an event, feel free to take GA a step further and make this particular event a goal and pass it onto Google Ads for Conversion Tracking.

.ideas – Because we are really only tracking the “click” on the phone number we really can’t see whether in fact this was a true call or not. However, if we use a software based phone system like Twilio we can take this a bit further. We need to have Twilio send an event as well when the phone number is called. The events would occur at nearly the same time so you can be certain they refer to the same action. Then when you have two simultaneous events, you can count the conversions more accurately.