The Kaisa javascript solution is quite versatile and can be configured in multiple ways and to cover different scenarios. We have compiled together a number of use cases with some information and instructions for how to implement each of these solutions.
Standard Setup on page load:
This setup will rely completely on numberDetection, instead of other functions that work with events like getNumber. This means that our script will detect all the (possible) phone numbers on your website, and then compare these numbers to the Allowed Numbers in the Kaisa dashboard. If the number is an Allowed Number, our script will replace the telephone number found on page load.
Our script will trigger automatically on onLoad or domContentLoaded, more on this here.
<script type="text/javascript">
var __fs_conf = __fs_conf || [];
__fs_conf.push(['setAdv',{'id': 'API_TAG'}]);
__fs_conf.push(['setParameterString','&custnr=CUST_NR&custname=CUSTNAME']);
</script>
<script type="text/javascript" src="//analytics.freespee.com/js/external/fs.js"></script>
The API_TAG is the unique identifier for an organisation, or master account, in Kaisa (if you are unsure which id to use, you can contact our Support team). The "CUST_NR" and "CUSTNAME" can be chosen by the customer and can be found in our Dashboard in each account settings (or using our API resources), but the CUST_NR values should be unique within an organisation.
Setup with getNumber / onClick:
Our script has the functionality to request a trackable phone number upon any external event, for example a click on a button, via the built in function getNumber. In this example the script will not try to automatically find and replace phone number(s) on a website, but instead request a trackable phone number initiated by an onClick event.
Our Master DNCS script with onClick solution will be implemented on your website (on every page) and will replace the real phone numbers with a unique number, when the button is clicked to reveal a number.
To get started, the following script snippet should be implemented on each page, and should be loaded on page load:
<script type="text/javascript">
var __fs_conf = __fs_conf || [];
__fs_conf.push(['setAdv',{'id': 'ADV_ID'}]);
__fs_conf.push(['numberDetection', false]);
</script>
<script type="text/javascript" src="//analytics.freespee.com/js/external/fs.js"></script>
As you can see, this piece of code includes a parameter for numberDetection set to false, to prevent number replacement happening automatically. This script will make sure a session is created in Kaisa for a visitor and kept along the entire user journey as they navigate to other pages (where the same snippet should also be loaded). The script will not replace any numbers yet due to numberDetection being turned off.
Then, in addition to the previous snippet, the following snippet should be implemented on pages where there is a button that hides the phone number:
<script>
function replaceNumber(c) {
__fs_dncs_instance.getNumber(
function(ref,res) {
ref.innerHTML=res.local;
ref.href = 'tel:'+res.e164;
},
c,
c.getAttribute('data-phone'),
'ADV_ID',
SUM,
'&custnr=0000001&custname=customer1',
null
);
}
</script>
This script is our onClick solution where numbers are only replaced when a visitor clicks the button to reveal the phone number, for example. If no number can be delivered by Kaisa, the above script will automatically return the original number that was found in the data-phone attribute. An example of the button to reveal the phone number can be the following:
<a onclick="replaceNumber(this);" data-phone="+44123456789" href="javascript:void(0)">Call us</a>
Here, the replaceNumber event triggers our replaceNumber() function and the data-phone attribute contains the original telephone number.
Some additional information on the different parameters in our getNumber function:
- ADV_ID: this is your own, unique API tag that needs to be in the script in order for it to work.
- SUM: in order to let our script know which phone numbers are allowed to be replaced, you have the option to either add these dealer's numbers in our platform through the dashboard for each dealer, or by adding the SUM parameter in the getNumber function. The SUM parameter is the sum of the last 4 digits of the dealer's phone number (E.g. +44123456789 has a SUM equal to 30). The SUM parameter should be calculated server side.
- custnr & custname: these parameters are used to let our script know which subaccounts to load, and replace the number with. An example can be: '&custnr=0000001&custname=customer1'
Setup with fsButton / onClick:
The fsButton setup will still request a trackable phone number upon an external event (click on a button), but the main difference is that the fsButton setup does not require you to create the button on your website. This script will use numberDetection to find all the phone numbers on the page, and compare them to the numbers in the Allowed Numbers. If the phone number is an Allowed Number, our script will not replace the phone number with a Kaisa number, but instead replace it with a clickable link containing the pre: text. If this button is then clicked, the Kaisa script will replace the underlying phone number with a Kaisa number.
An example script may look like this:
<script type="text/javascript">
var __fs_conf = __fs_conf || [];
__fs_conf.push(['setAdv',{'id': 'ADV_ID'}]);
__fs_conf.push(['fsButton', {
run: true,
pre: 'Call us!',
post: ['\{\{phone\}\}'],
useLocalPhoneNumber: true
}]);
</script>
<script type="text/javascript" src="//analytics.freespee.com/js/external/fs.js"></script>
Please note that the {{phone}} variable should remain exactly like this, and should not be replaced by anything.
Important to note is that this setup has as requirement that each subaccount should have a unique Allowed Number, as these are used to identify which account the Kaisa number / call should be attributed to.
Setup with multiple subaccounts:
If you would need to load multiple subaccounts on a single page then it will not work by simply loading multiple setParameterString lines in the base script. Since the base script will simply set these settings for when the JavaScript is loaded, the first setParameterString will be overwritten by the second one.
The following script allows you to load 2 or more subaccounts at the same time, while also making sure that the script is triggered/fired as soon as our JavaScript is loaded onto the page (it will not wait for the onLoad event):
<script type="text/javascript">
var __fs_conf = __fs_conf || [];
__fs_conf.push(['setAdv',{'id': 'API_TAG'}]);
</script>
<script type="text/javascript" src="//analytics.freespee.com/js/external/fs.js"></script>
<script type="text/javascript">
var waitFor = function() {
if(typeof(__fs_dncs_instance)!="undefined") {
__fs_dncs_instance.setParameterString(['&custnr=0000001&custname=customer1']);
__fs_dncs_instance.loadAdv({'id': 'API_TAG'});
__fs_dncs_instance.setParameterString(['&custnr=0000002&custname=customer2']);
__fs_dncs_instance.loadAdv({'id': 'API_TAG'});
}
else {
setTimeout(function() {
waitFor();
},16);
}
}
waitFor();
</script>
Comments
0 comments
Please sign in to leave a comment.