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?
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
Step 4: Publish Your Page
Is it working for you? Let me know in the comments below or connect with me on twitter at @smtibor.