Enable call tracking in website with Sourcebuster

by tokydev

HTML

<script src="https://cdn.jsdelivr.net/npm/sourcebuster@1.1.0/dist/sourcebuster.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<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>

JavaScript

//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");
...