How to use call-tracking numbers in an Single-Page-Application?
Search & Replace Script
Due to the dynamic nature of SPAs a normal search & replace approach is not enough. In this case there are two options to implement it. In both cases you need to call the method after loading the dynamic content.
The first options is the "scan" method of the matelso script. This will trigger a new scan of the website for search texts. This method will be further explained in this article. More information on the manual scan
The second method is "getNumberBySearchtext". This method will be explained in this article.
How to use the "getNumberBySearchtext" method?
To use the method "getNumberBySearchtext" you first need to add the matelso script to your website. After that you need to define a callback method in your user-script. This callback method takes two parameters (numberObject & errorString) and will be invoked by the matelso script after fetching the call-tracking number. If there was an error fetching the number, the callback will be called with an errorString.
The numberObject contains the number formatted as e164, tel-link and also in the format configured in the control panel.
Following is an example of the callback method:
var callback = function(numberObject, errorString){
if(!numberObject){
console.log('getNumberBySearchtext failed:', errorString);
return;
}
// Do something with the number here
}
Missing within this example is the logic to place the number within the DOM. This needs to be implemented by the website administrator.
After fulfilling those requirements you can call the method using the following example snippet:
window[window.CallTrackingObject]("getNumberBySearchtext", "{SUCHTEXT}", callback);
Within this example you can see {SEARCHTEXT} as a placeholder for the search text you want to use to fetch the call-tracking number.