Installing the JavaScript Snippet

CallRail’s JavaScript snippet allows you to integrate call tracking on your website using dynamic number insertion (DNI). When customers navigate to your website from a marketing campaign, they’ll see the correct tracking number based on which marketing source they came from. 

The same snippet powers both call and form tracking if you're using both products in CallRail, so you don't have to install the same script more than once. After your company's snippet has been added to each page of your website, it gathers all the details of your customer's interactions on your website and relays their activity back to CallRail.

If you are using a WordPress or Wix website, please follow these instructions to install the WordPress plugin or the Wix plugin instead of using the JavaScript snippet. This will offer you the same functionality. 

How the JavaScript Snippet Works

Each company in your CallRail account has its own, unique JavaScript snippet. The installation is just like installing Google Analytics— a single JavaScript snippet added to each page of your website before the </body> tag. This script tag works for both HTTP and HTTPS pages.

To use the dynamic number insertion feature, create tracking numbers within your CallRail account to track visitors from a specific source, like Google Ads. When a visitor navigates to your website through one of the sources you’re tracking, CallRail’s JavaScript will detect the phone numbers on your web page and swap them with the correct tracking number. We’ll then store the visitor’s source in a cookie so they’ll continue to see the same tracking number each time they return to your website (unless your snippet is removed).


Getting Started

There are a few important details you’ll need to know before you get started with dynamic number insertion:

  1. Once you’ve installed the JavaScript snippet on your website, be sure to test your installation before your campaign begins via the instructions within this article.

  2. Dynamic number insertion detects multiple number formats, including:
    111-222-3333, 111.222.3333, and (111) 222-3333.

  3. Special steps are necessary to swap phone numbers in images.

    Learn more about image swapping with this help article.
  4. Ideally, CallRail’s JavaScript snippet should be installed on every page of your website, but it must be embedded on the visitor’s landing page, as well as each page on your website that displays a phone number or a web form you'd like to track.

Installing the JavaScript snippet on Your Website

Each company in your account has its own unique JavaScript code for dynamic number insertion. If you have multiple companies in your CallRail account, you’ll have a different code for each.

  1. Click Analytics in the navigation bar on the left.

  2. Click Settings at the top of the page.

  3. Choose the company whose JavaScript code you’d like to install.

  4. Select All Integrations from the Integrations section in the left menu.

  5. Choose JavaScript Snippet from the list of available integrations.

  6. Copy the JavaScript provided. It should look similar to this sample JavaScript code.

    screenshot_602.png
  7. Paste your script into each page of your website right before the </body> tag.

Auto-Test Your JavaScript Installation

Use this auto-test to confirm that the JavaScript snippet is correctly installed on a web page and dynamic number insertion is functional. This test has two parts. First, it validates that your snippet has been installed in the correct location before the </body> tag. Then, it checks that your tracking numbers are swapping on your site.

You must test each web page individually where you’ve installed the code snippet. Testing a landing page, for example, will not test your entire site.

  1. Click Analytics in the navigation bar on the left, then select Settings at the top of the page.

  2. Choose the company whose snippet installation you are testing.

  3. Select All Integrations from the Integrations section in the left menu.
     
  4. Choose the JavaScript Snippet integration.

  5. Scroll down to the section titled Test JavaScript Snippet, at the bottom of the page.  

  6. Copy and paste the web page URL that you’d like to test and click Start Test.

  7. If your JavaScript snippet is properly installed, you’ll see a green checkmark in the Code Snippet Status section.

    If your JavaScript snippet is not found or not properly installed, you’ll see a yellow alert with instructions on how to fix your code installation and a date stamp of your last test.

    If the code snippet is not in the correct location, your numbers can’t swap so the second part of the test will not be performed. 

  8. In the Tracking Number Status section of the test, it’s important to note that we’re testing all the tracking numbers in your company. So, some numbers that show up as “not found” are not a problem. Only troubleshoot tracking numbers you expected to swap on the page you are testing.

    Screen_Shot_2018-08-14_at_12.48.10_PM.png
  9. Tracking numbers that are properly swapping on the page you’re testing will show a green checkmark in the Status column.

    Auto_DNI_Test_-_V2_Preview_Mode_-_InVision_2018-07-05_14-09-36.png
  10. Click the eyeball icon in the View column to see a live swap example of the tracking number swap on your page.

  11. This screen will show a screen capture of the tracking number swap that happened with a date and time stamp of when the swap occurred.  

    Auto_DNI_Test_-_V2_Preview_Mode_-_InVision_2018-07-05_14-11-07.png
  12. There will be a yellow alert message in the Status column for numbers that aren’t swapping on the single web page you’re testing.

    Remember, we’re testing all the tracking numbers in your company. This alert isn’t a problem for tracking numbers that won’t be used on the specific web page you’re testing.

  13. If it’s a tracking number you expected to swap on the page, click the Troubleshoot link to view a help article on troubleshooting common errors that will prevent a number from swapping. 

  14. You can also select the Number Name to be sent directly to the edit page for that number so you can make any configuration changes needed.

FAQs

Can I test that dynamic number insertion is working?
Yes, there are a couple of ways to test that your DNI script is working properly. Read how to use our auto-test feature to see live swap examples of your tracking numbers swapped on your page or manually test dynamic number insertion.

Why isn’t my telephone number swapping?

Have you cleared your cookies, or tried accessing the website in a private browsing session? The most important part of testing dynamic number insertion is to simulate the experience of a first-time visitor before testing. Otherwise, the swap code will detect you as a visitor to the website from a previous session.

Troubleshoot common dynamic number insertion issues with this help article.

How do I prevent a number from swapping on my website?

If there is a specific place on your website where you don't want a number to swap, you're able to update the telephone number in your source code so that our swap script doesn't recognize it. In the number that you do not want to be swapped, use HTML tags that don't apply any additional style.

For example: 555-<span>444<span>-3333.

When setting this up, we recommend placing "<span>" within the middle of the phone number (as illustrated above). With those additional HTML tags, our JavaScript snippet will not find/swap the number that you'd like to appear static.

Can I use dynamic number insertion in an iframe?

We do not recommend installing our dynamic number insertion script in an iframe since they run independently from the rest of a website. This could cause an inconsistent experience for website visitors, and they could potentially see two different tracking numbers on the same website. CallRail's swap script can still be installed on websites that use iframes, but any number within an iframe won't swap.

Can I use dynamic number insertion on my Squarespace site?

Yes. You can install CallRail's JavaScript snippet for dynamic number insertion on a Squarespace site using the Code Injection feature.

Can I use dynamic number insertion on my Wix site?

If you are on any of Wix's premium plans, you can install CallRail's JavaScript snippet in Google Tag Manager, and add Google Tag Manager to your Wix site.

Use this article to learn how to add dynamic number insertion to Google Tag Manager.

Use these Wix instructions to learn how to add Google Tag Manager to your premium Wix site.

Do I need to remove the JavaScript after I disable call tracking?

If you don’t plan on creating new tracking numbers in the same company where your tracking number(s) has been disabled, you can safely remove the CallRail JavaScript code. However, if you leave the swap script on your website, the numbers will no longer swap since those numbers have been disabled.

Can I have a white-labeled version of my swap code?

Yes. Use the instructions above when logged into CallRail via your white label domain to access a white label version of your swap script.