Note: Here we are going to talk about HubSpot Form Conversion Tracking only if your form is not set to redirect to a page after the successful form submission. If your HubSpot form redirects to a page then this article doesn’t apply to your case.

I had a case where my client wanted me to track Google Ads Conversion tracking for HubSpot forms submission. There were multiple forms and only one of them was being rendered as raw HTML. Other forms were being rendered inside iframes despite the fact the “Set as raw HTML form” option was turned on. I think there is some bug in HubSpot’s platform as I have found, after I faced this issue I searched in Google, and others were facing the same issue.

If the form is rendered as raw HTML on your website then the conversion tracking is straightforward with Google Tag Manager’s FormSubmission trigger. If the HubSpot form is rendered in an iframe then luckily HubSpot provides a mechanism to listen to the form submission and call a JavaScript callback function. A typical HubSpot form embed code looks like the following:

HubSpot Form Submission Tracking in Google Tag Manager

As mentioned above that if the HubSpot form is rendered as plain HTML code then the tracking is very straightforward in Google Tag Manager using the FormSubmission trigger. Let’s assume that your HubSpot form renders as plain HTML then the following screenshots show how you can setup Google Ads Conversion Tracking with Google Tag Manager:

1- Google Ads Conversion Tracking for Plain HTML Rendered HubSpot Form

Important Note: The id used as a value for the “Form ID” condition in the trigger is not exactly the one mentioned in the HubSpot form’s embed code. The value of formId in the embed code is ce845a88-56f1-4bae-9e9b-bdb047bb00e7 while the id attribute of the rendered <form> element has a value of hsForm_ce845a88-56f1-4bae-9e9b-bdb047bb00e7. So you must use the value from the rendered form element’s id attribute.

2- Google Ads Conversion Tracking for iFrame Rendered HubSpot Form

As mentioned before that HubSpot provides a JavaScript callback function called “onFormSubmit” which we can add to our HubSpot form embed code and then push some variables along with a custom event to help Google Tag Manager trigger our tag for Google Ads Conversion Tracking. Following is the piece of code which I used for my case to push data to dataLayer:

In the above piece of code, I pass 2 values, that are hsFormID and event, to the Google Tag Manager through dataLayer variable. Then in Google Tag Manager, I created a dataLayer variable hsFormID to get the value from the HubSpot form’s callback function on successful form submission.

Finally, I used “Custom Event” trigger to fire the Google Ads Conversion Tracking tag in Google Tag Manager.

Important Note: In this iframe related case, the value of the hsFormID in the embed code and the value of hsFormID, in Custom Event trigger, against contains condition doesn’t need to be the value of the form’s id attribute. It can be anything you like but the value should match both in the embed code and in the Custom Event trigger. 

I hope this quick and short tutorial will help some of you to implement Google Ads Conversion Tracking or Google Analytics Conversion Tracking using Google Tag Manager.