Tracking & Analytics

How To Build Your Own Call Tracking System Using Twilio

This post is an extension to the previous post I did explaining how to connect Twilio to Google Sheets and Google Data Studio , the missing part in that post was how to designate different phone numbers to different mediums or sources of a website traffic, and this is what I will be covering in this post.

Step 1:

Decide what mediums or sources you want to track, the most basic tracking if you have a low budget is tracking three mediums: organic, paid and others, a more advanced tracking will be:

  • Organic Google
  • Organic Bing
  • Paid Google
  • Paid Bing
  • Referral
  • Direct

You can also consider tracking email campaigns and offline campaigns like radio. Obviously the more mediums/sources you want to track the more phone numbers you need.

Step 2:

Assuming you are going after a basic tracking (organic, paid and others) you need to buy three phone numbers, I will assume they are:

  • 111-111-1111 for organic traffic
  • 222-222-2222 for paid traffic
  • 333-333-3333 for others

Make sure to redirect those numbers to your own phone number, I will call that the default phone number and it is 000-000-0000

Step 3:

We need to save the source, medium and term for every website visitor in a cookie, you can do that using UTMZ-replicator  just add it to your website using Google Tag Manger as a custom HTML tag and let it fire on every pageview.


Step 4:

Make sure the phone number on your website is contained in a unique class, something like below:

<a class="default-phone-number" href="tel:000-000-0000">000-000-0000</a>

Step 5:

Add the JavaScript code below as a tag in Google Tag Manager and let if fire after the UTMZ tag in step 3:

var findnum = [
{ "number": "111-111-1111", "medium": "organic" },
{ "number": "222-222-2222", "medium": "cpc" },
{ "number": "333-333-3333", "medium": "others" }
function searchMD(findnum, medium){
for(var i= 0, L= findnum.length; i<L; i++){ if(findnum[i].medium=== medium) return findnum[i].number; } return ''; } var ga_source = ''; var ga_campaign = ''; var ga_medium = ''; var ga_term = ''; var ga_content = ''; var gc = ''; var c_name = "__utmzz"; if (document.cookie.length>0){
c_start=document.cookie.indexOf(c_name + "=");
if (c_start!=-1){
c_start=c_start + c_name.length+1;
if (c_end==-1) c_end=document.cookie.length;
gc = unescape(document.cookie.substring(c_start,c_end));
if(gc != ""){
var y = gc.split('|');
for(i=0; i<y.length; i++){ if(y[i].indexOf('utmcsr=') >= 0) ga_source = y[i].substring(y[i].indexOf('=')+1);
if(y[i].indexOf('utmccn=') >= 0) ga_campaign = y[i].substring(y[i].indexOf('=')+1);
if(y[i].indexOf('utmcmd=') >= 0) ga_medium = y[i].substring(y[i].indexOf('=')+1);
if(y[i].indexOf('utmctr=') >= 0) ga_term = y[i].substring(y[i].indexOf('=')+1);
if(y[i].indexOf('utmcct=') >= 0) ga_content = y[i].substring(y[i].indexOf('=')+1);
if (!((ga_medium =="organic") || (ga_medium =="cpc"))) ga_medium = "others" ;
document.getElementsByClassName('default-phone-number')[0].innerHTML= searchMD (findnum,ga_medium);
document.getElementsByClassName('default-phone-number')[0].href= "tel:"+searchMD (findnum,ga_medium);


At this point you can be sure that phone number will fire only based on their correspondent medium, at this point you can start building your dashboard following the post here

You Might Also Like

1 Comment

    Leave a Reply