Dynamic Numbers: Reactive Websites, Responsive Web Applications or Progressive Web Applications
When presenting contact details in Reactive Websites, Responsive Web Applications (RWA) or Progressive Web Applications (PWA) it is important to always display the correct number. In the past years the trend of using RWA or PWA technologies to build beautiful responsive websites has made the implementation of 3rd Party tracking and/or attribution technologies harder.
AVANSER's Dynamic Numbers Reactive API has been created to counter such complexities.
For simplicity we'll refer to Reactive Websites, Responsive Web Applications (RWA) or Progressive Web Applications (PWA) as "Reactive Apps".
Before reading through this article, ensure your Dynamic Number code snippet is correctly installed. Follow the dedicated Knowledge Base Article for details on general Dynamic Number setup and use, as the Reactive Apps process is still dependant on a correct Dynamic Number setup.
What is the problem with Reactive Apps?
Normally a Browser will request a Web Server for content to display, the content will be returned by the Web Server and the Browser will render it.
All the content that must be displayed in the page will be loaded by the Browser then displayed, allowing software that needs to perform updates on the website to detect the page load completion and then perform the changes on the final version of the web page. AVANSER's Dynamic Numbers service will check the HTML code once it is loaded by the Browser and replace the phone numbers in the page with an AVANSER Tracking Number. This process usually happens in a single request, allowing Dynamic Numbers to replace all the numbers in the page in a single call.
Reactive Apps do not perform the page load process in a single request. Instead, it is performed via a set of smaller requests that dynamically change the page content. This is usually done via a framework such as AngularJS, ReactJS, VueJS or SvelteJS.
The result is that Dynamic Numbers script will not have all the content available when it is first executed, causing the content loaded after its execution to display the default number instead of an AVANSER's Tracking Number.
How to use Dynamic Numbers within Reactive Apps?
There are multiple ways Dynamic Numbers can help deploy Call Tracking to a Reactive App.
It is important to remember that Reactive Apps are "Applications" and these complex applications may be required a Developer to perform changes in the app source code.
The guidelines blow aim to help the implementation of Dynamic Numbers tracking through AVANSER's standard reactive engine, explaining how to take advantage of AVANSER's Dynamic Numbers JavaScript Client.
Option 1: Using the Automated Number Replacement (Reactive) template
When configuring Dynamic Numbers, select the "Automated Number Replacement (Reactive)" template. This template allows the AVANSER Dynamic Numbers code deployed to your website to automatically choose the best options possible to replace numbers as soon as they are displayed on the screen.
In most of the cases, using the "Automated Number Replacement (Reactive)" will be all is required to support Reactive Apps.
A note about iframes: When you are using iframes in your page, AVANSER's Dynamic Numbers Client may not detect changes into it. For example if you are using Google Maps in your website, Dynamic Numbers script will be denied access to the content. In such cases you should use the JavaScript API explained below to obtain a number then display the content.
Change Detection Performance: The Automate Number Replacement (Reactive) template includes code that monitors page changes, creating additional work for the web browser. For large Reactive Apps this additional work may be noticeable in the application. If this is the case, implementing Option 2 (below) directly in the application code will reduce the work the web browser is required to do.Option 2: Using getNumber() API
AVANSER's Dynamic Numbers clients provide an easy and effective API for developers that want more control on how numbers are replaced in the website.
The getNumber() API allows a developer to initiate tracking via code. The function returns a promise that when fulfilled returns a JavaScript Object that describes the tracking number:
- {
- "trackingCode": 51, // AVANSER Tracking Code. That's the unique tracking code created via the AVANSER's Customer Portal
- "number": "0289995751", // AVANSER Tracking Number to be used in any tel:// link
- "text": "(02) 8999 5751", // AVANSER Tracking Number text, as defined in the AVANSER's Customer Portal
- "isDefault": false // true if no Tracking Number was configured for the source, medium or campaign of the current session.
- }
The getNumber() function accepts two optional parameters:
- defaultNumber
Specify here the default website number, when tracking is not available this number be returned. if not provided an empty string will be returned in both number and text object's fields. - trackingCode
AVANSER Tracking Code you want to receive a number for. This is extremely useful if you are using a Tracking Group to track multiple numbers on the same website.
For example if your website displays numbers for multiple businesses or franchisees you can request each individual tracking number by specifying the tracking code associated with it
In the example below you can see how to request a tracking number for the current session:
- $AA.getNumber().then( // no parameters defined
- ( {trackingCode, number, text, isDefault} ) => {
- console.log(trackingCode, number, text, isDefault)
- }
- )
Once you have obtained the number you can use that number instead of your website default number. The promise will return a data structure containing the number information.
If no Tracking Number was configured for the source, medium or campaign of the current session getNumber() will return the default number instead.
If the defaultNumber function argument was not set, it will return empty string for both number and text object's fields.
- {
- "trackingCode": 51,
- "number": "0401020304",
- "text": "0401020304",
- "isDefault": true
- }
If you are using Tracking Groups, you can define the trackingCode function argument to select and retrieve the Tracking Number configured for the Business/Franchisee:
- window["$AA"].getNumber("0401020304", 1).then(numberObject => console.log(numberObject) );
- window["$AA"].getNumber("0401020305", 2).then(numberObject => console.log(numberObject) );
Code Examples
You can find examples on how to use AVANSER's Dynamic Number script with both Vue.JS and React.JS in the GitHub repositories available at:
See the code in action in our live examples:
Related Articles
Dynamic Numbers: Service Summary
AVANSER Dynamic Numbers is a service designed to replace the Phone Numbers in your Website with an AVANSER Tracking Number, this process does not change the source code of your Website, but, instead, process your Website when is displayed to ...Dynamic Number Insertion - Troubleshooting (Basic)
This article is part one of a two-part guide in troubleshooting AVANSER's Dynamic Number Insertion code on your website. This guide will help ensure that the code is installed correctly, and is working as expected. This article covers the basics of ...Dynamic Number Insertion
Access to this tool has been limited to authorized users only. If you required certain users to have access to this module, please contact your Account Manager. The dynamic numbers configuration section allows user to add new tracking codes to their ...Dynamic Numbers: Installing jQuery - Required by AVANSER Tag Manager
Installing jQuery Library is not required if you are using Dynamic Numbers' Automated Number Replacement or you are not using AVANSER Tag Manager. The AVANSER Tag Manager allows you to set rules for your website that dynamically adds span tags to the ...Dynamic Numbers - Testing your website
This article provides the most common way to test the code provided by AVANSER. Tracking Configuration when Domains are configured If you configured a domain it is fairly simple to test the script: Edit the configuration you want to test. Scroll to ...