Applies To
Dynamic Resource Loading: ex. Find a location
Single Page Application
Phone numbers are not swapping on some parts of the page
Many customers use the search feature on their website, which includes an input text field, to provide nearby services with contact information. Typically, users will follow these steps:
- Enter the website.
- Click a search button.
- Type in a keyword.
- A list of nearby services will be displayed on the page.
However, when using this feature, users may find their original phone numbers displayed in the search results instead of the Invoca phone numbers.
Lazy Loading
Page speed is a critical factor in user retention and webpage performance optimization. Impatient users often leave websites that load pages too slowly or where some elements load slower than others. To address this, lazy loading is an effective option that allows websites to optimize their loading times.
With lazy loading, only the required content is initially loaded, and the rest of the page content is loaded only when the user needs it. For example, when users are browsing an online shopping website, the first few items can be displayed within the user's viewpoint and users scroll down, and the page can load additional content. This process is called "lazy" because it delays loading until the content is needed.
However, when lazily loaded content includes phone numbers, users may see the original phone number instead of the Invoca number.
Page with Components
Modern web development often involves creating webpages with multiple components such as headers, sidebars, content sections, footers, or smaller elements within the content. When users load a page, each component is called and returns a set of instructions for creating the Document Object Model (DOM), which is then mounted in the browser.
However, if the Invoca tag script is called before all the components are mounted, users may still see the original phone number on the page instead of the Invoca phone number. To ensure that the Invoca tag script runs at the right time, developers may need to use techniques such as waiting for all components to be mounted before firing the script or using the event handler to ensure that all page resources have loaded before the script executes.
Resolution
How the Tag Works
To ensure that the Invoca Tag can accurately track and attribute inbound calls generated by your website, placing the tag immediately before the closing </body> tag on your page is recommended. This placement allows the tag to collect the original phone number, replace it with a trackable number, and render the webpage with the updated phone number.
When a browser fetches and parses an HTML document to render a webpage, it reads through the document and creates a DOM tree. However, when it encounters a <script> tag, it stops parsing and requests the associated script file. After the script is executed, the parser continues parsing the rest of the HTML, creates a DOM tree, and renders the webpage.
By placing the Invoca Tag right before the </body> tag, it can detect phone numbers from the HTML and replace them with trackable numbers using the Invoca Tag script. This placement ensures no additional phone numbers to find and swap in the HTML, allowing for accurate tracking and attribution of calls.
Best Practice
By default, the Invoca Tag is configured to run automatically as soon as the tag snippet is loaded. First, you will need to determine if the Invoca tag will be installed on only traditional pages, only SPA pages, or both traditional and SPA pages.
-
If you are using SPA pages only, we recommend using one tag and adding options.autoRun=false to the custom code section of the tag. This prevents Invoca from running until the tag is explicitly activated by Invoca.PNAPI.run(). This method will execute phone number replacement.
Sample code goes in the custom code section:
options.autoRun = false;
-
If you are using both SPA and traditional pages, there are two options:
-
Create and deploy two separate tags, one each for SPA and traditional pages. In the former tag, adding autoRun=false to the custom code section of the tag. In the latter tag, do not specify a value for autoRun, so that it defaults to true.
-
Create one single hybrid tag. In the custom code section, set autoRun = true so numbers will be replaced on traditional pages. In addition, include a call to Invoca.PNAPI.run() natively on SPA pages, outside of the Invoca tag, and after our standard script has been included on the page. This will enable the tag to run again, detect the phone numbers, and make a new number swap request for all detected phone numbers. It is possible to call this method multiple times as needed when new content is reloaded, ensuring accurate tracking and attribution for all phone calls.
-
Cause
It's become increasingly common for websites to interact with users by dynamically loading partial content instead of refreshing the entire page. For example, when users click a button or scroll down for more information, new content or user interface elements are displayed in a specific section of the page.
With modern web development, most web pages rewrite only the necessary parts with new data instead of loading entirely new pages. This approach creates a more seamless, native app-like experience for users and is known as a Single Page Application (SPA). In a SPA, a page refresh never occurs, and the appropriate resources are loaded dynamically in response to user actions.
However, because the Invoca tag script fires and swaps the phone numbers during the initial page load, users may still see the original phone number instead of the Invoca phone number when new parts of the webpage are loaded dynamically. To ensure accurate tracking and attribution, it's important to run the Invoca tag at the appropriate time to handle these dynamic changes and replace any additional phone numbers that may appear.
Additional Information
To verify if calling Invoca.PNAPI.run() will resolve the issue prior to implementation, follow these steps:
- Open Chrome DevTools by either pressing the F12 key or right-clicking and selecting 'Inspect.'
- In the DevTools window, navigate to the Console tab.
- Enter the command Invoca.PNAPI.run() in the Console.
- After executing this method, observe if the numbers swap.
If the numbers swap, it indicates a race condition issue during tag firing and component loading on the page. In this case, the customer should ensure that they run the tag at the appropriate timing after the page has finished loading.
