How to Guarantee That Your Call Tracking Numbers Are Always Shown

Marchex, DialogTech, and even Google allow you to replace phone numbers on a client's website with call tracking numbers. But if there are multiple systems trying to rewrite phone numbers on the same website, the last rewrite / number-replacer script to load is the one that finally wins. So, if your number replacer script isn't the last to load, you basically won't be tracking any calls. Fortunately, with a little JavaScript trickery, you can force the browser to load your code last (and guarantee that your tracking numbers are always the ones that get shown). For the purpose of illustration, I'm going to use Marchex, which is the call tracking system we use at Mudd. But the method ought to be the same regardless of the call tracking system you're using. Here's how we'll achieve our goal of forcing the browser to load our number replacer script last.

Grab the original number replacer code

<!-- start number replacer -->
<script type="text/javascript"><!--
vs_account_id      = "AbcDEF1GHijkLmNOP1";
//--></script>
<script type="text/javascript" src="//adtrack.voicestar.com/euinc/number-changer.js">
</script>
<!-- end ad widget -->

Locate the JavaScript file

In our Marchex code, the JavaScript file that contains the code that searches for phone numbers and replaces them with our call tracking numbers is found in the src attribute of the second <script> tag.

<script type="text/javascript" src="//adtrack.voicestar.com/euinc/number-changer.js">

Remove the call tracking script tag

Remove the entire script tag whose source is the main JavaScript file.

<script type="text/javascript" src="//adtrack.voicestar.com/euinc/number-changer.js">

Build a custom function to dynamically create the script tag

function marchex() {
  var script = document.createElement('script');
  script.src = "//adtrack.voicestar.com/euinc/number-changer.js";
  document.getElementsByTagName('body')[0].appendChild(script);
}

You can name your function whatever you like. I've named mine "marchex". On the line that begins with "script.src", set the value to the URL (i.e. the value of the src attribute of your original script tag.

Delay the loading of the file

setTimeout(marchex, 1000);

Call the "setTimeout" method. This method executes a function after waiting a specified number of milliseconds. So, you pass two parameters to the setTimeout method:

• The name of the function to execute
• The number of milliseconds to wait before executing the function

 The new call tracking code

After the call tracking code below is loaded, it will wait 1000 milliseconds (or 1 second) before loading the Marchex number replacer script.

<!-- start number replacer -->
<script type="text/javascript"><!--
vs_account_id      = "AbcDEF1GHijkLmNOP1";
//--></script>
<!-- end ad widget -->

<script type="text/javascript">
function marchex() {
  var script = document.createElement('script');
  script.src = "//adtrack.voicestar.com/euinc/number-changer.js";
  document.getElementsByTagName('body')[0].appendChild(script);
}
setTimeout(marchex, 1000);
</script>