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

tag

Firstly, every page from which you wish to display phone numbers, needs to contain a reference in the

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

            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

        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

 {

 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

Call us on 0800 000 1111

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

Call us on 0800 000 1111

 


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 tag of the page.

getTrafficSource(getDomain());

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

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



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.