The Infinity call tracking JavaScript is a small snippet that enables dynamic number replacement on your website. When a visitor arrives, they see a unique tracking number, so we can link the online and offline parts of their journey. This guide shows you how to copy the snippet from the Infinity Platform, add it to your site manually or with Google Tag Manager, and handle integrations, single page applications, consent and New Relic.
The latest version of the call tracking JavaScript combines a range of features into a single small block of code that you can add to your website. It does not need to be updated when you add new integrations.
By default, the code searches your entire page for AutoDiscovery numbers when the page loads. If it finds any, it replaces them with a tracking number. At the same time, it monitors the page for changes, so if content loads dynamically, we react to any changes involving phone numbers.
You can also choose to search only certain areas of the page, or to replace just the contents of an element with a tracking number. Our guide to number replacement options has the full details.
You'll need:
Log in to the Infinity Platform and select Settings from the bottom of the left-hand navigation, then choose Tracking Script from the Tracking section.
The Tracking Script screen shows a preview of the script, together with optional settings for the Facebook and Adobe Analytics integrations. Work through it in this order.
Add the snippet before the closing </head> tag. Ideally, add it to every page of your website. It must be embedded on the visitor's landing page, as well as on each page of your website that displays a phone number you'd like to track.
Important: If you have a Facebook or Adobe integration, the Tracking Script must be placed before the Facebook or Adobe scripts.
If you use Google Tag Manager (sometimes called GTM) to manage tags on your site, you can use it to add the Infinity call tracking JavaScript to your site quickly. Create the snippet using the steps earlier in this guide, then open your tag manager, click the link to add a new tag and select Custom HTML from the list, as shown below.
Paste the Infinity snippet into the HTML section of the Tag Configuration settings. An example is shown below.
In the advanced settings, you can set the sequence in which the Infinity Tag fires. We recommend that you place the Infinity Tag next to the Google Analytics Tag in your sequence, which is typically one of the first tags to fire. Then click the Triggering element to move to the next step.
In Step 3, decide how the tag is triggered. Select All Pages, then click Save on the next screen. An example is shown below.
When you're prompted to rename your tag, do so now if you haven't already. We'd recommend Infinity Call Tracking.
Finally, click Publish to publish the Infinity Tag to your site.
The Infinity code and Google Analytics are closely linked, so sequencing the tags together helps the integration run smoothly. You'll also want the Infinity Tag to fire as soon as possible when your page loads, so the dynamic phone number appears for your visitor as quickly as possible and you avoid any possible “flicker”.
Tag firing priority can be a positive or negative integer, and tags with higher priorities fire first. For example, a priority 3 tag fires before a priority 1 or 2 tag. Priority defaults to 0 if none is specified. Tags still fire asynchronously, which means each tag fires whether or not the previous tag has finished.
To set up integrations with other third-party platforms, use the integration configuration screens. You do not need to change the Infinity JavaScript snippet on your site. The exceptions are Facebook and Adobe, covered below.
If you're happy for Infinity to handle the set-up on your behalf, tick the checkbox on the Settings > Tracking > Tracking Script screen. This makes sure we capture the necessary values for the Facebook integration, generate the UUIDs (unique identifiers) and update the Facebook pixel to submit those UUIDs back to Facebook.
Our Facebook integration guide has the detailed set-up instructions. It has four steps:
Tip: If you've ticked the Facebook Integration checkbox on the Tracking Script page, you can ignore the first three steps and go straight to step 4, configuring the integration in Infinity.
If you're happy for Infinity to handle the set-up on your behalf, tick the checkbox. This makes sure we capture the necessary values for the Adobe integration and also generate the transactionIDs.
Important: You must make sure the Infinity snippet is placed above the Adobe snippet running on your site. It will not prevent the Adobe script from running.
Our Adobe Analytics integration guide has the detailed set-up instructions. It has six steps:
Tip: If you've ticked the Adobe Analytics Integration checkbox on the Tracking Script page, you can ignore steps 3, 4 and 5 in the guide. You only need to carry out steps 1 and 6. When you add the Infinity code to your site, make sure it is placed above the Adobe snippet running on your site.
The latest call tracking JavaScript automatically updates any tel links that contain an AutoDiscovery number.
Some websites display the same phone number in two formats, for example +44123xxx or 0123xxx, so international visitors can click to call with the correct country code. If you set the AutoDiscovery number in the Tracking Pool config to E.164 format (+44xxxx), the JavaScript automatically handles both variations and replaces them on the page.
If the website or application you want to track with Infinity is a Single Page Application (SPA, also known as a browser application), the visitor's browser does not dispatch the usual page load events as they navigate around your site. SPA mode puts you, and your application, in more control of what happens and when, rather than our library performing tasks based on native browser events.
As well as setting up the Infinity call tracking JavaScript within your SPA site, you'll also need to populate the auto discovery number fields in the Infinity Platform for number replacement to work. We also recommend that someone with JavaScript knowledge completes the set-up, as you'll need to integrate it directly into your SPA. For more information, see our guide to SPA mode.
If you want to capture custom variables that aren't part of Infinity's regular tracking or integrations, you can modify the tracking script to capture them using this syntax:
_its('setVariable','name','value')
Our guide on how to classify Infinity for optimal tracking covers this in full, and our guide to cookie types and storage explains what Infinity stores.
Many of our clients have chosen to classify what they gather with Infinity as necessary, because it enables them to provide a functional, beneficial experience to their customers. Some reasons and uses include:
If these aren't ways you currently use call tracking data, but you'd like to in the future, get in touch with your Customer Success Manager to learn how you can achieve this.
We don't sell any data from either you or your customers, we don't use your visitors' data to optimise our own product, and we don't use third-party cookies.
This data is also useful for marketing analytics, sales funnel insights and other uses where understanding customer engagement is crucial. If you use it for these other purposes, you need to communicate that when you outline your strictly necessary data gathering.
If you want to fully monitor how website traffic flows across the online and offline experience, you'll need to classify Infinity's JavaScript as an essential script.
New Relic is a browser monitoring tool widely used to monitor the performance and usage of websites. Infinity's tracking script uses the latest browser technologies to provide phone numbers to your website visitors as quickly as possible, without negatively affecting the user experience.
To perform its monitoring, New Relic directly overwrites a number of built-in browser methods. We have detected problems between New Relic and Infinity's tracking script that cause issues with the running of our script on the website. We've put a number of workarounds in place to mitigate any negative performance impact. However, all websites are different, and web technologies and monitoring tools change constantly, so there can sometimes be unexpected side effects when you run Infinity on a site that also uses New Relic.
Recommendation: To minimise the risk of conflicts, we recommend you move the Infinity script tag on your site to run before New Relic's script. If you encounter problems running our Tracking Script alongside New Relic, we recommend you try disabling the New Relic monitoring code.
Where should I add the call tracking JavaScript on my website?
Before the closing </head> tag. Ideally add it to every page, but it must be on the visitor's landing page and on every page that displays a phone number you'd like to track.
Do I need to update the snippet when I add a new integration?
No. Set up other integrations in the integration configuration screens. The exceptions are Facebook and Adobe, which use checkboxes on the Tracking Script screen that update the snippet.
Where should the Infinity snippet sit relative to other scripts?
Place it before your Facebook or Adobe scripts and before New Relic's script. In Google Tag Manager, place the Infinity Tag next to the Google Analytics Tag in your firing sequence.
Will the script replace numbers shown in two formats, such as +44 and 0?
Yes, if you set the AutoDiscovery number in the Tracking Pool config to E.164 format (+44xxxx). The script also updates tel links that contain an AutoDiscovery number.
Have a read of our guides to number replacement options and SPA mode for more ways to control where tracking numbers appear. If you're still stuck, get in touch with your account team or email support@infinity.co and we'll help you get set up.