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