//Configure initial parmeters
sbjs.init({
session_length: 1, //session minutes
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;
}
}
}
<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>
External resources loaded into this fiddle: