How to integrate Calltracks in your website

Introduction
 
Calltracks offers visitor tracking by linking a dynamically obtained phone number with a website visitor. Information stored against that visitor is then linked that number display, allowing Calltracks to provide you with the same details when a call is made through that dynamic number.

To allow the dynamic numbers to work on your website, you will need to wrap an existing phone number, (or static - sometimes referred to as a default), inside an HTML Span tag. The static number can also be a supplied Calltracks number, thus ensuring all your calls are captured. Within Calltracks, these span tags are commonly referred to as Placeholders.
 
The span tag is also accompanied by a piece of javascript that should be loaded on every page of your website. This allows data to be propagated across pages, even if there are no phone numbers that are to be displayed on a particular page. 
The Javascript code
  
Please install loader.js, listed here, on every page:
     
       <script>
         (function(){
           e=document.createElement("script");
           e.type="text/javascript",
           e.async=1,
           e.src="//example.calltracks.com/wnd/loader.js";
           document.getElementsByTagName("head")[0].appendChild(e);
         })();
       </script>
     
   
This script tag should be included just before the closing body tag </body> of your web site. 
It is preferable that you put the tag just before </body>, since it needs to be after any phone numbers, to ensure that the phone numbers are there when the script looks for numbers to replace.
 
We recommend loading the Calltracks script on every page of your site, including pages that do not have any phone number. This way, the full visitor history is logged in Calltracks. If you have one site wide page or footer template, then it is usually easier to simply add the code there.
 

The Span tags/Placeholders
 
Each span tag that you will be given, or create, will have a specific placeholder name. This informs that Calltracks system which particular visitor tracking setup is being used on your website. For example, you may have two numbers displayed on the same page, one for a Sales location, and one for a General enquiries location that need to go to two different destinations. 
 
In the example below, we have two placeholders. In this example, the default numbers in the span tag are also Calltracks trackable numbers. This means if the browser being used has javascript turned off, there will still be a way to track the calls into the website, even if it doesn't have the visitor information. 
 
<span class="calltracks_acme-sales">0203 1999000</span>
 
<span class="calltracks_acme-general-enquiries">0203 1999912</span>
 
When the above are displayed, and the Calltracks javascript gets called, the numbers in the span tag will get overwritten with numbers that will have area codes and routing information based on the placeholder name. So if the placeholder name 'acme-general-enquiries' is associated with London 020 Numbers and the routing (final destination - commonly referred to as route plans) is for 0203 1234 1234, then there will be a dynamic number displayed, looking like any normal phone number, that will then route to the stated destination. 
     
Clickable numbers (tel: links)
 
If you are making use of click-to-call features on a browser, you can also ensure that these are also dynamically controlled. 
 
As long as a phone number is wrapped in an anchor ('A') tag, to make it a clickable link, with 'tel:' as the protocol, then we will automatically replace the number in the link as well. For this to work, the anchor tag has to be the parent of the span tag. See the following example for a international North American number:
 
<a href="tel:+18775550199"><span class="calltracks_acme-main-usa">+ 877 555 0199</span></a>

To have a clickable link, with for example an image instead of a link, you can instruct Calltracks to not insert a phone number, by using the data attribute 
"data-calltracks-no-replace" on the span tag.
 
Calltracks will then just modify the tel: link.
 
For example:

<a href="tel:+18775550199"><span class="calltracks_acme-main-usa" data-calltracks-no-replace="true"><img src="/images/callus.gif"></span></a>
 
 
Advanced number formatting
 

By default, Calltracks will display phone numbers in the format that you would dial within the country that the number is for. For example, a UK phone number will be displayed as: "0113 496 0123", and a US number as "1 877 555 0199".

You can change to international format, by including the attribute data-use-intl-fmt="true". For example:

<span class="calltracks_main" data-use-intl-fmt="true">+1 (877) 555-0199</span>

For inclusion/exclusion of trunk digits, spacing of digits in phone numbers, etc, it is our intention to follow the standard of each respective country. If you feel that Calltracks displays a phone number incorrectly, then please contact your support representative, and we will investigate.

For advanced formatting of phone numbers, for example to include punctuation, such as periods or dashes, we allow you to specify a custom number format within the span tag. This can also be used for overriding the default setting, and force the number to be displayed in international format. When using the original format, if the number begins with a plus sign or ‘00’, then the number that Calltracks inserts, will be in international format, starting with the same prefix. If you do not have an international dialling prefix, then you can still use data-use-intl-fmt="true" to force international format on the inserted number.

To use the same formatting as what you already have on your site, you simply insert a data attribute, data-use-original-fmt="true". This will cause the new phone number to be inserted with the same punctuation, spacing, etc as the original number.

Examples, with and without international prefixes

<span class="calltracks_main" data-use-original-fmt="true">(877) 555-0199</span>

<span class="calltracks_main" data-use-original-fmt="true">+44 20 7946 0001</span>

<span class="calltracks_main" data-use-original-fmt="true" data-use-intl-fmt="true">44 20 7946 0001</span>

 

Dynamic content (Ajax loaded)

Any content that is loaded via Ajax will need to be handled separately, since phone numbers are then not replaced when the page is initially loaded.

The easiest option, if applicable, is to load the content when the page is loaded, but leave it hidden until the time that it should be displayed (for example, the visitor clicks on a button). This will ensure that the numbers are replaced as normally.

If this is not possible, or if numbers are only loaded on demand, to avoid having too many phone numbers on one page, then number replacement can be triggered by reloading our code.

This can be done by either modifying the code that loads the Ajax content, or within the Ajax content itself, like this:

<script type="text/javascript">
__ctwnd.reinit();
</script>

Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk