Installing Calltracks to your website – Browse our Knowledge Base

Introduction

Calltracks offers visitor tracking by linking a dynamically obtained phone number with a website visitor. Information stored against that visitor is then linked to the number displayed, 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 Number Identifiers.

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

This will not work unless you choose one of the following GDPR options Below

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.

GDPR Compliancy Steps

Either of the following steps needs to be followed in order for your call tracking to be GDPR compliant if you do not follow either of the steps below the Javascript will NOT fire. We have two options which you can choose from. You will need to check with the GDPR specialist in your business who will be able to advise you of which method fits your company GDPR procedures.

Option 1

The parameter 'force_tracking=1' can be used when calling the Calltracks 'loader.js' code. This will overwrite any subsequent settings and will ensure that your dynamic numbering will work. However, when you do install user controls, remember to remove this function or any options the user chooses will be ignored.

Please note: You do not need to replace the whole Javascript on your website to use this option, simply add the bold section below to your existing Javascript on all pages.

Should you prefer to replace the whole piece of code with this example please replace the word Example with what is currently shown in your code.

<script>
  (function(){
    e=document.createElement("script");
    e.type="text/javascript",
    e.async=1,
    e.src="//Example.calltracks.com/wnd/loader.js?force_tracking=1";
    document.getElementsByTagName("head")[0].appendChild(e);
  })();
</script>

Option 2

You may also implement the following via Google Tag Manager:

<script>window.calltracksCookiesAllowed = true</script>

Example of a consent button that sets tracking allowed:

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js"</script>
<script>
function pollForButton() {
  btn = document.getElementById("cookie-bar-button");
  if(btn == undefined) {
    setTimeout(pollForButton, 100);
  } else {
    btn.onclick = function() { window.calltracksCookiesAllowed = true; };
  }
}
pollForButton();
</script>

Option 3

Direct javascript controls

The following javascript methods are also available to use providing that the Calltracks javascript has been initialised. These have the same underlying effect as setting the global window.calltracksCookiesAllowed.

__ctwnd.disableCookies()
__ctwnd.enableCookies()

The Span tags/Number Identifiers

Each span tag that you will be given, or create, will have a specific number identifier 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 number identifiers. 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.

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 number identifier name. So if the number identifier 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.

If you can't add Calltracks' number identifier in the class — 'class="calltracks_acme-sales"' in the example above — you could set the default number as number identifier name in Calltracks. In the example above, this would be '02031999000' instead of 'acme-sales'. Then, you would only need to add a prefix (e.g. 'calltracks_') in the html span tag:

You would then need to pass 'class_names=calltracks_&class_names_match=startsWith' to loader.js For example:

<script>
  (function(){
    e=document.createElement("script");
    e.type="text/javascript",
    e.async=1,
    e.src="//example.calltracks.com/wnd/loader.js?class_names=calltracks_&class_names_match=startsWith";
    document.getElementsByTagName("head")[0].appendChild(e);
  })();
</script>

This feature allows you to find number identifiers in any HTML class you want, with any prefix. So it doesn't have to be calltracks_. It could be acme- or anything else. Also, it doesn't need to be an HTML 'span' tag, it could be any other HTML tag. For example, a 'li' tag:

Moreover, you can pass more than one class name with comma-separated values to loader.js: 'class_names=calltracks_,acme-'.

Finally, 'class_names_match' can be 'startsWith' or 'exact'. When the former is used, 'class_names' are prefixes. However, when the latter is used, 'class_names' define the exact class that HTML tags must have.

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:

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:

Click to Reveal

Below is an example of two "Click to reveal" links which use different identifiers.

Once the link is clicked a request is made only for the specified identifier, so only a single dynamic number is retrieved.

Important notes:

span tag must be inside "A" tag in order to work correctly on mobile phones (i.e. to be able to click and automatically dial number)
span tag must have data-calltracks-class attribute set which refers to the correct Calltracks identifier
span tag may have data-default-number attribute set which contains default number which is displayed after one second after clicking if there was no response from Calltracks server

sales: <a>

<span data-calltracks-class="calltracks_acme-main-sales" data-default-number="1234567890">Click to reveal</span>

</a>

<br>

Service: <a>

<span data-calltracks-class="calltracks_acme-main-sales-service" data-default-number="22222222">Click to reveal</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:

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 an 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

Dynamic content

Any content that is loaded after the page has loaded 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.

For example like this:

Comments