{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

This is part three of a four-part series on how to use Google Analytics to track Telephone Leads.

Part one described the overall call tracking system. Part two explained how the data can appear in Google Analytics. Part three (this one) will start on the technical side and explain how to get the phone numbers on your site to switch according to the route to site the visitor has taken.  

The final part, yet to be written, will explain how to get the data from the telephone call into Google Analytics (this is the CallTrackID bit).

I appreciate that some of you have been waiting a long time for part three of this series... 

skeleton

As we are coming up to Valentines Day, I thought I would show my love to you all by posting part three of ‘How to use Google Analytics to track telephone leads’. Firstly, I’ll set the scene and then dive straight into the code. If you don’t code crunch, then you may want to switch off now.

The Scene

We want to track 4 types of referrers;

  • Direct Traffic – 0800 111 111
  • Traffic from Google Adwords – 0800 222 222
  • Traffic from other Google domain Entities – 0800 333 333
  • All other traffic – 0800 444 444

<head> tag

Firstly, every page from which you wish to display phone numbers, needs to contain a reference in the <head> element to a phoneNumbers.js file.

phoneNumbers.js Example Code 

The CallTrackerPT() function displays HTML dependent on the telephone number to be displayed. It has the following 6 parameters passed into it.

  • ID
  • Attributes
  • HTMLPhone1
  • HTMLPhone2
  • HTMLPhone3
  • HTMLPhone4

An ID must be set for the tag where you want a phone number to switch and the Attributes parameter allows you to change the name of a class for a specific attribute depending on the phone number displayed. 

HTMLPhone1 through to HTMLPhone4 is the replacement HTML to be displayed dependent upon the phone number that has been triggered e.g.

  • HTMLPhone1 is the HTML displayed for a direct referral
  • HTMLPhone2 is the HTML displayed for a miscellaneous (other) referral
  • HTMLPhone3 is an adwords referral
  • HTMLPhone4 is a googleOther referral.

function callTrackerPT(ID, Attributes, HTMLPhone1, HTMLPhone2, HTMLPhone3, HTMLPhone4) {

    var counter;

    var Domain = getDomain();

    if (document.getElementById(ID)) {

        document.getElementById(ID).style.display='';

        

        if (getTrafficSourceNo(Domain) == 0) {

            document.getElementById(ID).innerHTML = HTMLPhone1;

        }

        else if (getTrafficSourceNo(Domain) == 1) {

            document.getElementById(ID).innerHTML = HTMLPhone2;

        }  

        else if (getTrafficSourceNo(Domain) == 2) {

            document.getElementById(ID).innerHTML = HTMLPhone3;

        }

        else if (getTrafficSourceNo(Domain) == 3) {

            document.getElementById(ID).innerHTML = HTMLPhone4;

        }

        else {

            document.getElementById(ID).innerHTML = "";//add hardcoded backup telephone number e.g. 01903 247788

        }                

        // Split Attributes.

        var arrAttributes = Attributes.split("|");

        

        for (counter = 1; counter <= arrAttributes.length; counter++) {

            var arrAttValues = arrAttributes[counter - 1].split("=");

            

            if (getTrafficSourceNo(Domain) == 0 && arrAttValues[0] == "class1") {

                document.getElementById(ID).className = arrAttValues[1];

            }

            

            if (getTrafficSourceNo(Domain) == 1 && arrAttValues[0] == "class2") {

                document.getElementById(ID).className = arrAttValues[1];

            }

            

            if (getTrafficSourceNo(Domain) == 2 && arrAttValues[0] == "class3") {

                document.getElementById(ID).className = arrAttValues[1];


 if (getTrafficSourceNo(Domain) == 3 && arrAttValues[0] == "class4") {

                document.getElementById(ID).className = arrAttValues[1];

            }                                                                                              

          

        }                

In-order to store the CallTrackID™ cookie (named calltracker), we need to know which site a visitor has been referred from. The getDomain() function serves this purpose. It extracts the full URL by calling the document.URL JavaScript command and storing it into the Domain variable.  

If the site’s blog is stored on a separate sub-domain e.g. blog.freshegg.com, we replace the Sub-domain of the URL with www so the blog and the site are treated as one website.

We then strip out the http:// and any directories or files after the domain name using a regular expression so the function just returns the domain name. This domain name is then set in the cookie.

 

function getDomain() {

    var strURL = document.URL;

    

    // Remove Blog Entry

    strURL = strURL.replace('blog.','www.');

    if (strURL != "") {

        return strURL.replace(/^http\:\/\/(www\.|)([^\/]+)(.*)$/,"$2");

    }

    else {

        return "";

    }

}

Traffic source names are stored as an index in an array.

function optionTrafficSources() {

    // Enter the traffic resource names    

    var arrTrafficSources = new Array();

    arrTrafficSources[0] = "direct";

    arrTrafficSources[1] = "other";

    arrTrafficSources[2] = "adwords";

    arrTrafficSources[3] = "googleOther"

    } 

 

    return arrTrafficSources;

}

function getTrafficSourceNo(domain) {

 

    var arrTrafficSources = optionTrafficSources();

    var strTrafficSource = getTrafficSource(domain);

    var i, intTrafficSourceNo 

    for (i = 0; i < arrTrafficSources.length; i++) {

        if (arrTrafficSources[i] == strTrafficSource) {

            intTrafficSourceNo = i;

            break;

        }

    }

    return intTrafficSourceNo;   

}

 

function setCookie(c_name,value,expiredays,domain)

{

var exdate=new Date();

exdate.setDate(exdate.getDate()+expiredays);

document.cookie=c_name+ "=" +escape(value)+";expires="+exdate.toGMTString()+";domain="+domain;

}

function getCookie(c_name)

{

if (document.cookie.length>0)

  {

  c_start=document.cookie.indexOf(c_name + "=");

  if (c_start!=-1)

    { 

    c_start=c_start + c_name.length+1; 

    c_end=document.cookie.indexOf(";",c_start);

    if (c_end==-1) c_end=document.cookie.length;

    return unescape(document.cookie.substring(c_start,c_end));

    } 

  }

return "";

}

 

function querySt(ji) {

 hu = window.location.search.substring(1);

 gy = hu.split("&");

 for (i=0;i<gy.length;i++) 

 {

 ft = gy[i].split("=");

 if (ft[0] == ji) 

 {

 return ft[1];

 }

 }

}

This section determines which phone number should be displayed depending on the referral source of the visit.  In this example, there are four basic ways the system determines how a user gets to  a site: 
  1. direct - .freshegg.com
  2. other – Miscellaneous visit to site.
  3. adwords  – Visit via Adwords
  4. googleOther – Any other property on the google domain (natural)
It checks to see whether the JavaScript property, document.referrer has been set. The referrer determines the URL of the last page that the visitor arrived from. If this is not set, we assume it’s a direct hit. If the referrer source is not Google, we check to see whether the user has come from a URL on the same domain as the current URL.  If this is not found, we assume it’s a direct referral.

If the user has come from Google, we determine whether it’s an adwords referral or a googleOther referral.

It does this by looking to see whether there is a gclid query string or whether the utm_term query string is set to ppc or whether sponsoredlinks is featured in the URL. If any of these are found, it sets it as an adwords referrer.

If none of these are found, it is recorded as a googleOther referrer.  Any other condition is set to ‘other’.


function getTrafficSource(domain){     var cStr = "";          if (getCookie('calltracker') != "" && getCookie('calltracker') != null) {         cStr = document.cookie.replace(/^(.*)calltracker=([^\;]+)(.*)$/,"$2");     }          if ((getDomain() == "freshegg.com") && cStr == "") {                  if (cStr == "") {         if (getCookie('calltracker') != "" && getCookie('calltracker') != null) {             cStr = document.cookie.replace(/^(.*)calltracker=([^\;]+)(.*)$/,"$2");         }         else if (document.referrer != "") {              if (document.referrer.match(/^(.*)google(.*)$/)) {                if (document.URL.match(/^(.*)\?gclid\=(.*)$/) || document.URL.match(/^(.*)(\?|\&)utm\_term\=ppc(.*)$/) || document.cookie.match(/^(.*)utmcmd \=\(not\%20set\)(.*)$/) || document.cookie.match(/^(.*)utmcmd\=ppc(.*)$/) ||  document.referrer.match(/^(.*)sponsoredlinks\?(.*)$/)) {                     setCookie('calltracker','adwords',365,domain);                      cStr = "adwords";                           }                else {                     setCookie('calltracker','googleOther',365,domain);                      cStr = "googleOther";                          }              }             else if (document.referrer.match(new RegExp("(.*)" + domain + "(.*)$"))) {                 setCookie('calltracker','direct',365,domain);                  cStr = "direct";             }             else {                setCookie('calltracker','other',365,domain);                 cStr = "other";                         }                  }         else {             setCookie('calltracker','other',365,domain);              cStr = "other";         }     }          return cStr.toLowerCase(); }

OK, so that was a basic script for determining the source of referring traffic and associating a telephone number with it.   

Next, some code needs to be placed in the page of the site.

InPage Code

In order to get the numbers to switch, you need to firstly associate the numbers with an id. 

Example

<p>Call us on 0800 000 1111</p>

The 0800 000 1111 number has to be switched according to the referral route of the visit, either Direct Hit, adwords, googleOther or other.

<p>Call us on <span id="spanPhoneNumber">0800 000 1111</span></p>

 

To change the number when the page loads, we need to call the function callTrackerPT(ID, Attributes, HTMLPhone1, HTMLPhone2, HTMLPhone3, HTMLPhone4).   

This is done by adding the adding the following script (example) before the end </body> tag of the page.

<script type="text/JavaScript">

getTrafficSource(getDomain());

callTrackerPT('spanPhoneNumber',’’,'0800 000 1111','0800 000

1112','0800 000 1113','0800 000 1114');

</script>

Well, I hope that’s enough to satiate your curiosity for CallTrackID until the next post where I will explain the ‘magic’ bit – getting the data from the phone call into Google Analytics.

Nikki Rae

Published 8 February, 2010 by Nikki Rae

Nikki Rae is Managing Directort at Future Insight Analytics, and a contributor to Econsultancy.

4 more posts from this author

Comments (9)

Comment
No-profile-pic
Save or Cancel
Avatar-blank-50x50

Adi

Hi Nikki, interesting post. What's the rationale behind displaying a different number based on the referrer? I've seen a few phone tracking services that essentially create a page view whenever a number is called, and I always assumed that this page view would fit into the usage for that user so you could determine the referrer from that. Is that not correct and that page view is an isolated 'direct visit'?

about 6 years ago

Avatar-blank-50x50

Nikki Rae

Hi Adi,

Thanks for your comment. A pageview is in fact called (or an event) which will be discussed in the fourth post of the series.  However, without the phone numbers switching, you cannot relate the visit between referrer and phonecall as they are 2 completely independent systems.

I know there are companies that relate a click on a link to view a number to a referrer but that it potential to call rather than actual phone calls.

best

Nikki

about 6 years ago

Avatar-blank-50x50

Adi

Thanks Nikki.  We use a CMS so its very difficult to put code onto individual pages.  I suppose the only way around that would be to include the <head> reference on every page.

about 6 years ago

Avatar-blank-50x50

Nikki Rae

Yes, on every page would probably be easier for you :)

Nikki

about 6 years ago

Avatar-blank-50x50

uptraffic

Amazing stuff. Its really useful > i didn't heard before. I like the way to represent this post. Nice.

Thanks for sharing

about 6 years ago

Avatar-blank-50x50

Wesley Lynch

We have used similar techniques to track various leads and referrer channels. Our cms allows for page specific tracking code, which makes things easy. With integration with Asterisk PABX you can also do some really cool, things.

about 6 years ago

Avatar-blank-50x50

Jo

Hi - just came across this piece as I research phone-tracking solutions for a group of companies I work for. I was quite excited by the headline but it looks like this solution just tracks the volume of calls by topline referrer. Is that right, or am I being a bit daft? The real meat is in how these calls convert - absolutely critical for me in fact - can your solution link those call logs to a booking/reservation system and then to any analytics for reporting? And how would you attribute a call that came into contact with several touchpoints? Many questions! Might be easier if I speak to you directly.

about 6 years ago

Avatar-blank-50x50

Nikki Rae

Hiya

These blog posts just cover topline referrer. This sytem could easily integrate with many other systems including booking software etc. 

Please feel free to email me with your questions :)

Nikki Rae 

about 6 years ago

Kris Littlewood

Kris Littlewood, Digital Marketing Assistant at English Lakes

Did part four ever come out? I can't find it in the site search.

about 5 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.