Solution Using Google Tag Manager

This will capture any relevant HubSpot form submission data at the point of a successful form submit button click and make it available in Tag Manager. From here this event or user provided data can be sent to any Marketing or Analytics Tags such as Google Ads Tag with Enhanced Conversions or a GA4 generate_lead Event.

Create a new custom html Tag that will listen for the form submission and add it to any pages with the form on it (or add it to all Pages)
Create some dataLayer variables to store the form data
1. The listener tag will send the form data to the dataLayer along with a dataLayer event
Create any marketing or analytics tags that should be Triggered on this dataLayer event and make use of any of the form data contained in the dataLayer variables

Event Listener to be added to as a Custom HTML Tag on page load

This tag listens out for a “message” from the page that the form was submitted successfully so it needs to be fired on page-load so that it is ready and waiting to respond.
The firing trigger can be the specific page(s) the form is on or “All Pages”.
As it is not a marketing or analytics Tag it doesn’t need any consent as it doesn’t send any data (except to the dataLayer)

<script type="text/javascript">
     window.addEventListener("message", function(event) {
        if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
           window.dataLayer.push({
              'event': 'hubspot-form-success', //New Trigger to fire marketing tags with
              'hs-form-id': event.data.data.formGuid, //Define as a dlv
              'hs-form-transaction-id': event.data.data.conversionId, //Define as a dlv
              'hs-form-field-email': event.data.data.submissionValues.email, //Define as a dlv
              'hs-form-fields': event.data.data.submissionValues //Define as a dlv. All other values from form
         });
        }
     });
</script>

2.1 Define the dataLayer Variables in GTM

The basic ones are exactly as written above e.g.

hs-form-id
hs-form-transaction-id
hs-form-field-email

A HubSpot form can have a lot of other fields so if there are any other being used then they will all be contained within the last dataLayer variable called “hs-form-fields” without the quotes. This will be an Object which will show up in Preview mode during testing.

2.2 Define any additional dataLayer Variables that are required

These will be shown in the hs-form-fields variable. Some common values would have the format e.g.
hs-form-fields.phone
hs-form-fields.firstname
hs-form-fields.lastname

3. Set-Up Any Marketing or Analytics Tags that Need to Use The Data

This could be a Conversion Tag for facebook or Google Ads or a custom Event in GA4. All these Tags would have a Trigger set to fire on the Custom Event ‘hubspot-form-success’

Custom GA4 Event Tag

This would show in GA4 as an Event named hubspot-form-success and would require new custom Dimensions to be defined named hs_form_id, etc for each of the Event Parameters shown

Purchase GA4 Event Tag

To start showing a “revenue” value in GA4 e-commerce reports then it’s possible to also send a GA4 ecom “purchase” Event that includes the required event parameters

copy/paste the code below into a new custom JavaScript variable (which I chose to call GA4 Items Array)

function(){

  var items = [{
  item_id : {{dlv - HubSpot Form - ID}},
  item_name : {{LUT - HubSpot FormID FriendlyName}},
  price : {{LUT - HubSpot FormID Values}}
}]

return items;

}

Google Ads Conversion Tag for a specific Form Submission

Assuming that a specific conversion for a “lead” or “contact” has been created in Google Ads e.g. for a Newsletter submission, then this Tag can populate with some user values and should be set to Fire with a Trigger with an extra rule based on the specific form ID

The Tag configuration above incorporates an additional condition on which to fire the tag. The values sent in the Tag back to Google Ads include the unique transaction ID (good for de-duping) and the users email address for enhanced conversions which is automatically hashed by Google. Even though we have defined some addititional custom variables that could populate “conversion value” and “currency” I prefer to leave these blank as these can be configured from within Google Ads by the marketing team. Likewise, the conversion count setting can be set in Google Ads, which should be set to “one” as opposed to “every”.

HubSpot GTM Container Import

Test the features described in this post by importing this custom container that contains all the required Tags, Variables and Triggers

Click on this link to the google file called “Hubspot Conainer Merge on Import to GTM.json” and “download” a copy of the file

In your own GTM Container go to Admin > Import Container
Import file into your own GTM workspace (using the “merge” import option)
Update any “dummy” or “example” values with your own

Useful Links Used While Writing This Post

Hubspot form event documentation

GA4 “purchase” Event format dev guide

Original inspiration of GTM recipe from Julius

HubSpot community solution

Track Hubspot Forms as Conversions With GTM