Track Hubspot forms with Google Tag Manager + advanced Google Ads conversion tracking

HubSpot offers a powerful form system, and fortunately it is possible to track HubSpot forms with Google Tag Manager and to activate Google Ads advanced conversion tracking by retrieving the customer data transmitted in the HubSpot form. This step-by-step tutorial will guide you through setting up reliable, GDPR-compliant tracking.

✅ By the end of this guide, you will be able to:

• Capture HubSpot form submissions in the Google Tag Manager Data Layer
• Create customized triggers in GTM
• Configure Google Ads enhanced conversions manually

Understanding how HubSpot forms work

Native forms vs. integrated forms

HubSpot allows you to integrate contact forms/leads into your pages in two main ways:

• JavaScript script integration (recommended method): the form is dynamically displayed on the page via a <script>. This method lets you track submission events in Google Tag Manager.
• Integration via iframe: the form is isolated in a <iframe>. In this case, no JavaScript events can be captured from your site. Tracking via GTM is impossible without complex server/API solutions.

⚠️ Important: Tracking submissions via GTM only works if you use scripted integration. If you're integrating a HubSpot form via iframe, use an alternative method (third-party form or webhook).

The hsFormCallback events: what HubSpot sends

When a HubSpot form is displayed on a page, the HubSpot script sends events of type hsFormCallback via window.postMessage. We are interested in two main events:

• onFormSubmit This is triggered just before the form is sent. It contains the data entered in the fields.
• onFormSubmitted Triggered on successful submission. It indicates that the form has been sent.

💡 These events can be captured via a JavaScript listening script which we'll insert into a custom HTML tag in Google Tag Manager.

Setting up tracking in Google Tag Manager

Creating a custom HTML tag

To capture submissions from HubSpot's script-integrated forms, we'll create a custom HTML tag in Google Tag Manager containing an event listener.

Here is the code to insert:

<script type="text/javascript">
  //Hubspot form listener Loic CHOSSIERE
  window.addEventListener("message", function(event) {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
        window.dataLayer.push({
          'event': 'hubspot-form-success',
          'hs-form-guid': event.data.id,
          'event-data' : event.data
        });
    }
  });
</script>

🧩 This script listens to the `hsFormCallback` messages sent by HubSpot and injects them into the dataLayer in Google Tag Manager under the hubspot_form_success event, sent after successful submission (conversion confirmation)

All you have to do is create a tag in GTM to integrate the above script:

1. Go to the Tags tab in GTM
2. Click on New tag
3. Tag type: Custom HTML
4. Paste the above code into the HTML field
5. Trigger: Consent Initialization - All Pages (or only pages containing a HubSpot form). By triggering it on GTM's native consent initialization event, you ensure that events are sent as quickly as possible to GTM should the user fill in the form before the page has fully loaded.

💡 Tip To limit the trigger to certain pages, create a "Consent Initialization" trigger with the following condition: Page URL contient /contact (or other, depending on your structure).

2.2 Creating a custom event-based trigger

Now that HubSpot form tracking is injected into the dataLayer, you can use them to trigger tags like GA4, Google Ads, Facebook Pixel, Matomo...

Here's how to create a trigger for a desired conversion event:

1. Go to the Triggers tab in GTM
2. Click on New
3. Trigger type: Custom Event
4. Event name: hubspot-form-success
5. Leave other options as default
6. Save the trigger

✅ You can now use this trigger to activate your conversion tags in GTM (Google Ads, Facebook, LinkedIn, etc.).

Data verification and GTM variable configuration

Checking events in Google Tag Manager's Preview mode

Before configuring enhanced conversions, we need to make sure that the form data actually appears in the DataLayer when the form is submitted.

Here's how it works:

1. Open Google Tag Manager and click on Preview
2. Go to a page containing a HubSpot form (integrated by script)
3. Submit a test with fictitious data
4. In the GTM preview tab open in your browser, locate the event hubspot-form-success in the left-hand column
5. Click on it, then open the DataLayer

You should see a structure containing the form ID, and sometimes a data object with field values such as:

{
  event: "hubspot-form-success",
  data: {
  submissionValues: {
       firstname: "Alice",
       lastname: "Durand",
       email: "alice@example.com",
       phone: "+33600000000"
     }
  }
}

💡 If you can't see the form data, make sure you've included the onFormSubmit event in the custom HTML tag.

Create GTM variables to retrieve form data

To feed advanced Google Ads conversion tracking via HubSpot form customer data, we'll need to create GTM variables that extract values from form fields (email, first name, last name, phone, etc.).

Here's how to create the variable for the email:

1. In GTM, go to the Variables
2. Click on New variable
3. Variable type: Data Layer Variable
4. Variable name: DLV – Hubspot Email
5. Key name: event-data.data.submissionValues.email
6. Save

Repeat the procedure for the other useful fields:

• First name: event-data.data.submissionValues.firstname
• Last name: event-data.data.submissionValues.lastname
• Phone: event-data.data.submissionValues.phone
• If you have a custom field, use the field identifier entered in your HubSpot forms, for example "campus": event-data.data.submissionValues.campus

✅ Your variables are now ready to be used in Google Ads tags to send enhanced conversions.

💡 Tip If data are not available under event-datatest it with hs-data.data.submissionValues.email instead. It depends on the version of the HubSpot script you are using, if you are using the one above, it will be event-data.

Configure advanced Google Ads conversion tracking for HubSpot forms via GTM

Creating a Google Ads tag with user data

Now that you have created the necessary variables in Google Tag Manager, you can use them to activate the enhanced conversions in your Google Ads tag.

Here are the steps to follow:

• In GTM, click on Tags > New
• Tag type: Google Ads Conversion Tracking
• Enter your conversion ID (XXXXXXX) without AW-, and your conversion label
• Check Include user-provided data from your website

• Choose Manual configuration
• In the "Select user data" section, click on New variable
• This will allow you to create a new variable of type User-Provided Data
• Map the fields of this variable that you wish to transmit to Google Ads, for example the variable DLV - Hubspot Email to map the email.

• Save the variable and use it in the conversion tag.

• Tag trigger: use the hubspot-form-success trigger
• Save the tag

✅ You've just set up a Google Ads tag that sends user data and automatically hashes it to enrich your conversions and improve the attribution rate.

Enable enhanced conversions in Google Ads

For Google to accept the data sent, you must also activate the Google Ads interface option:

1. Sign in to your Google Ads account
2. Go to Tools and settings > Conversions
3. Modify the conversion concerned
4. Check Enable enhanced conversions
5. Select Google Tag Manager as a configuration method
6. Save

💡 Tip Google recommends including at least an e-mail address or telephone number to improve user matching.

You can check that advanced conversion tracking is working in the Google Ads interface in the same place, "Diagnostics" tab:

Sending customer data: hashed or not?

To correctly configure Google Ads enhanced conversions you need to transmit user data (such as email or telephone number). Since the end of 2024, two methods are now accepted:

• Unhashed data: you send the raw data (e.g.: alice@example.com), and Google takes care of SHA256 hashing. This is the technique described in the guide above.
• Data already normalized and hashed You prepare the data according to the expected standards, then apply the SHA256 hash yourself. This is the recommended technique when your DPO wants to be on the safe side and is bugging you about it, to ensure that Google never sees the raw data. But remember, Google guarantees that it hashes the data before collecting it!

https://support.google.com/sa360/answer/14218731

Normalization before hashing

Before applying the hash, Google requires that you have standardized data:

• Convert to lower case
• ␣ Delete spaces at beginning/end
• Format phone numbers in E.164 format (e.g.: +33612345678)

Expected hash (optional if raw data)

If you wish to send data that has already been hashed:

• Use the SHA256 algorithm
• Output format: hexadecimal string (e.g.: a8af8341...)
• Never send empty or incorrectly formatted data

Allowed fields for enhanced conversions

At least one of the following is required:

• 📧 Email (most recommended)
• 🏠 Full address: first name, last name, postal code and country required
• 📱 Phone number: only if linked to an email or full address

You can transmit several values to increase the match rate (up to 3 emails or telephone numbers, 2 full addresses).

6. How to hash customer data with SHA-256 in Google Tag Manager

🎯 In some cases, you may prefer to hash user data yourself (email, phone, etc.) before sending them to Google Ads, in particular to ensure strict compliance with the GDPR and avoid any raw collection of personal data.

📌 Google now accepts both methods: raw upload (then server-side hashing) or upload already hashed client-side. Here's how to set up client-side hashing via Google Tag Manager.

6.1. Why hash on the client side?

• ✅ You control data processing before it leaves the browser
• ✅ Compatible with all platforms (Google Ads, Facebook CAPI, etc.)
• ❌ Never send hashed data to Google Analytics: this violates the terms of use

Hash a GTM variable with SHA-256

In Google Tag Manager, create a new custom variable:

1. Variable type: Custom JavaScript
2. Suggested name: JS – SHA256 Email or JS – SHA256 Phone
3. Paste the following script, replacing {{value}} by the corresponding GTM variable (e.g.: {{DLV – Hubspot Email}})

function() {
  return sha256({{DLV – Hubspot Email}}); // Remplacez par votre variable GTM

  function sha256(r){if(r){r=r.toString();for(var $,_,o=Math.pow,f=o(2,32),t="length",a="",n=[],h=8*r[t],i=sha256.h=sha256.h||[],c=sha256.k=sha256.k||[],e=c[t],s={},u=2;e<64;u++)if(!s[u]){for($=0;$<313;$+=u)s[$]=u;i[e]=o(u,.5)*f|0,c[e++]=o(u,1/3)*f|0}for(r+="\x80";r[t]%64-56;)r+="\0";for($=0;$<r[t];$++){if((_=r.charCodeAt($))>>8)return;n[$>>2]|=_<<(3-$)%4*8}for(_=0,n[n[t]]=h/f|0,n[n[t]]=h;_<n[t];){var v=n.slice(_,_+=16),g=i;for($=0,i=i.slice(0,8);$<64;$++){var l=v[$-15],k=v[$-2],x=i[0],S=i[4],d=i[7]+(A(S,6)^A(S,11)^A(S,25))+(S&i[5]^~S&i[6])+c[$]+(v[$]=$<16?v[$]:v[$-16]+(A(l,7)^A(l,18)^l>>>3)+v[$-7]+(A(k,17)^A(k,19)^k>>>10)|0),p=(A(x,2)^A(x,13)^A(x,22))+(x&i[1]^x&i[2]^i[1]&i[2]);(i=[d+p|0].concat(i))[4]=i[4]+d|0}for($=0;$<8;$++)i[$]=i[$]+g[$]|0}for($=0;$<8;$++)for(_=3;_+1;_--){var w=i[$]>>8*_&255;a+=(w<16?0:"")+w.toString(16)}return a}function A(r,$){return r>>>$|r<<32-$}}
}

6.3. Use this variable in your tags

Once you've created the variable, you can inject it into your Google Ads "User data" tag.

⚠️ Make sure that the data has been standardized (lower case, no spaces, international format) before the hash otherwise the match rate will be reduced.

💡 To hash several values (e.g. two email addresses), create several hashed variables and send them as an array.

FAQ - Tracking HubSpot forms with Google Tag Manager

Why is it important to track HubSpot form submissions?

Form tracking enables you to precisely analyze your conversions, measure the performance of your pages, and improve your marketing campaigns. Without it, you lose out on essential information about your prospects.

What JavaScript code should I use to listen for HubSpot form submission events?

The code uses window.addEventListener("message") to capture events hsFormCallbackin particular onFormSubmit and onFormSubmitted. These events are then sent to the Google Tag Manager data layer for processing.

How do I create a custom trigger in Google Tag Manager for HubSpot forms?

In GTM, create a "Custom Event" trigger and name it hubspot_form_successand link it to your conversion tags (Google Ads, Meta, etc.). This trigger is activated only on successful form submission.

How can I access form field data in Google Tag Manager?

Create GTM variables of type "Data Layer Variable" with paths such as event-data.data.submissionValues. These fields are available in the data event, triggered before the form is validated.

Can I activate Google Ads enhanced conversions with HubSpot Free / Marketing Hub Pro and higher?

Yes, by exposing the necessary fields in the DataLayer and linking them in GTM to a Google Ads conversion tag configured in manual mode. This allows you to benefit from enhanced conversions whatever your version of HubSpot Marketing.

What marketing tools can be triggered after a submission?

You can trigger tags for Google Ads, Facebook Pixel, LinkedIn Insight Tag, Matomo, Piwik Pro, or any other tool compatible with Google Tag Manager, as soon as a form is submitted.

What precautions should you take to remain GDPR compliant?

Make sure that consent is obtained via a cookies banner (CMP), and only trigger your tags after explicit validation. Never send unhashed e-mail addresses or personal data to Google Analytics or other unsuitable tools.