How To Use CallRail Dynamic Number Insertion with Hubspot CTAs

Here's how to make CallRail and Hubspot play nice so you can get CallRail's Dynamic Number Insertion on your HubSpot CTAs.  Turn them into CallRail-powered Click to Call buttons with robust call tracking for HubSpot landing pages. This will let you track your call sources down to the exact visit in CallRail AND see your CTA metrics in Hubspot. As a bonus, we'll even send click events to Google Analytics to track conversions.

Why Doesn't This Work With HubSpot CTAs?

Normally, CallRail's Dynamic Number Insertion (DNI) functionality works pretty well with Hubspot. Simply add the Javascript code to your Hubspot page templates and your target numbers found in regular page content will be automatically replaced with your tracking numbers. However, when you use a HubSpot CTA with a telephone link, e.g. tel:+15558675309, the Dynamic Number Insertion won't work. This is because the HubSpot CTA is dynamically generated after the page loads by HubSpot's own Javascript code and this often occurs after CallRail's DNI code runs to replace the target numbers.

What's the Solution?

The fastest way to get this to work is to manually update the CTA button with the dynamic number from elsewhere on the page. In my pages, I use a target number that I placed elsewhere on the page, like in the header or footer. Once the target number is updated, I copy that over to my CTA button, set the button text, and add click conversion tracking functions.

Step 0: Make sure CallRail and Hubspot are integrated

Make sure you've set up the CallRail and Hubspot integration. If you haven't already, add the CallRail Dynamic Number Insertion code to your Hubspot pages. I usuall put the DNI tracking code in the Page Publishing settings under Page Footer HTML.

Step 1: Add a class tag to the page element that contains the phone number

In my page, I add a tel link around the phone number with the html class "CTCNumber." This will allow our code to easily reference the updated phone number.

<a href="tel:+15616933762" class="CTCNumber">561-693-3762</a>

Step 2: Find your CTA GUID

Next, you'll need to find the GUID for your CTA so that you can update it. In Google Chrome, you can right click on the CTA button and choose "Inspect." You're looking for a long string of text that begins with "cta_button" like this: cta_button_<Hub ID>_560535a3-b7fc-4866-ab6a-4c699fc80578

Step 3: Code your CTA button

Add the following Javascript code to your landing page or page template if you will use the same CTA button on multiple pages.. Make sure you insert your CTA GUID into the code so that it can update your CTA correctly. If I'm working with landing pages, I will often include the code on the page directly so that I don't load unneccessary code on other pages through the template.

Step 4: Publish Your Page

Once you have the javascript code loaded, you can publish your changes and see how the update works. Two seconds after the page is loaded, your javascript code will update your CTA button to use the CallRail tracking number from your other page element. All clicks on the CTA will direct the user to call your tracking number, and click events will be passed to Google Analytics with the correct tracking number.

Is it working for you? Let me know in the comments below or connect with me on twitter at @smtibor.