Use call tracking metrics to measure online marketing campaigns

Previously we had explained how you can use Call Tracking to measure the success of online and offline marketing campaigns using different virtual numbers for each one, but this method does not apply at all when you want to measure the conversions of online campaigns. For example, if you want to measure the calls generated after someone visits your website from any of the following means of online marketing it can be difficult:

• Direct traffic to your website
• Organic traffic from search engines
• Facebook post
• Twitter posts
• Campaigns in Google AdWords
• Campaigns in AdRoll

For this it is necessary that the phone numbers of your website change dynamically depending on the traffic source; for this, we are going to need some javascript programming.

Enabling dynamic Call Tracking on your website

Before you start you must define for which digital campaigns you want to track and you must buy the virtual phone numbers you want to use. You can assign a friendly name to each one to differentiate it later in the calls report.

At Toky you can buy business phone numbers in more than 60 countries and use them in your marketing campaigns. Learn more!

Now you must add the CSS Class businessPhoneNumber to each one of the HTML elements that will display a phone number. This is similar to the following code:

<div class="container">  
<h1>Welcome to my Website!</h1>

    <p>Phone number in a span:<span class="businessPhoneNumber">123456789</span></p>
    Phone number in a link:
<a class="businessPhoneNumber" href="tel:+18443326433"> +1 844 332 6433 </a>  
</div>  

Now we will proceed to add the code snippet that will change the phone number depending on the source of web traffic; we will use the library Sourcebuster.js to achieve it, this library allows you to identify the traffic source of the visitor and use it so you can modify your website depending on whether the visitor came through a social networks, search engines or just typed the URL of your website. You can download this library or use a CDN as we will do in the example.

We have to modify the changePhoneNumberPage function to add the different phone numbers depending on each of the traffic sources detected by SourceBuster. There are different blocks of code like the following where we will replace FACEBOOK SPECIFIC PHONE NUMBER with the phone number we want to display when the visitor comes from Facebook for example.

//Detect social phone number source 
   if(trafficSource.src=="facebook.com"){
     changePhoneNumber(phoneNumberElement,"FACEBOOK SPECIFIC PHONE NUMBER");
   };

We repeat the process for each similar block; if you don't want to display a specific phone number for Twitter traffic, just put that line in comment:

if(trafficSource.src=="twitter.com"){  
    // changePhoneNumber(phoneNumberElement,"TWITTER SPECIFIC PHONE NUMBER");
   }

SourceBuster has several options that maybe you or your development team can use. This library stores several cookies in order to register user visits and manage both the first and recent visits. Learn more options from this library on their website

This is the complete block of code that you can copy and paste into your website.

<!--Add the reference to sourcebuster javascript library-->  
<script src="https://cdn.jsdelivr.net/npm/sourcebuster@1.1.0/dist/sourcebuster.min.js"></script>  
<script>  
   //Configure initial parmeters
   sbjs.init({
     session_length: 5, //session of minutes. You can change it if you need more
     referrals: [ //Configure social medium
     {
       host: 'l.facebook.com',
       medium: 'social',
       display: 'facebook.com'
     },
     {
       host: 'web.facebook.com',
       medium: 'social',
       display: 'facebook.com'
     },
     {
       host: 'l.messenger.com',
       medium: 'social',
       display: 'facebook.com'
     },          
     {
       host: 't.co',
       medium: 'social',
       display: 'twitter.com'
     }
   ]
   });
   //Change the phone number depending on the traffic source

   changePhoneNumberPage(sbjs.get.current,"businessPhoneNumber");

   //trafficSource: sourcebuster object with all the session data
   //numberClassName: CSS class that identify the html elements to change dynamically the phone number
   function changePhoneNumberPage(trafficSource,numberClassName){
   //Get an array of elements to change
   var phoneNumberElement = document.getElementsByClassName(numberClassName);
   //Add the direct traffic phone, this is the default phone number
   changePhoneNumber(phoneNumberElement,"DEFAULT PHONE");
   //Detect social phone number source 
   if(trafficSource.src=="facebook.com"){
     changePhoneNumber(phoneNumberElement,"FACEBOOK SPECIFIC PHONE NUMBER");
   };
   if(trafficSource.src=="twitter.com"){
     changePhoneNumber(phoneNumberElement,"TWITTER SPECIFIC PHONE NUMBER");
   }
   //Detect Google Ads traffic
   if(trafficSource.src=="google" && trafficSource.mdm=="cpc"){
     changePhoneNumber(phoneNumberElement,"ADWORDS SPECIFIC PHONE NUMBER");
   }
   //Detect Adroll traffic
   if(trafficSource.src=="adroll"){
     changePhoneNumber(phoneNumberElement,"ADROLL SPECIFIC PHONE NUMBER");
   }        
   //Detect Google organic traffic
   if(trafficSource.src=="google" && trafficSource.mdm=="organic"){
     changePhoneNumber(phoneNumberElement,"GOOGLE ORGANIC PHONE NUMBER");
   }        

   //Detect other organic traffic: Bing, Yandex, Yahoo etc.
   if(trafficSource.src!="google" && trafficSource.mdm=="organic"){
       changePhoneNumber(phoneNumberElement,"OTHER ORGANIC PHONE NUMBER");
   }        
   };
   //phoneNumberElement: array of elements with de CSS class name
   //phoneNumber: Phone number to change
   function changePhoneNumber(phoneNumberElement,phoneNumber){
   for (var i = 0; i < phoneNumberElement.length; i++) {
     //Change the text in every element by the phone number
     phoneNumberElement[i].innerText=phoneNumber;
     //If the element is a link element we add the hyperlink with tel parameter
     if (phoneNumberElement[i].localName=="a"){
         phoneNumberElement[i].href="tel:+"+phoneNumber;
     }
   }
   };

</script>  

How to test your Call Tracking snippet?

To validate that your number changes depending on the traffic source, you can run the following tests and check that the appropriate telephone number appears:

• Facebook.com: Send the link to someone through the Facebook messenger or publish a post to yourself with the link of your page and then click on it.
• Direct traffic: Just go to your website by typing the URL in the address bar of your browser.
• Adwords Traffic: You can test it by adding the following parameters of the URL. ? gclid = test & campaign = test-campaign & content = ad-test & keyword = keyword-test here is a sample:

http://yoursite.com?gclid=test&campaign=test-campaign&content=ad-test&keyword=keyword-test  

The following code in JSFiddle can be useful to you and it will show you the code working.

How to measure the received calls?

To measure the number of calls received for each number and therefore for each campaign, you can use the Toky report of Calls per Number.

Learn more about Toky and how our virtual phone system can help your business. Visit Toky