How to send a HubSpot form field using data layer to google tag manager?

naser_sadeghi · ‎Oct 6, 2022

I have a HubSpot form in my website where I am trying to get leads from the users. As the webpage is also connected to an active Google Ads account, I need to send the input field which holds the email to Google Tag Manager. To do so first of all, I wrote the following code in my website's <head> section:

<head>
    ...
    <script>
        window.dataLayer = window.dataLayer || [];
    </script>
    ...
</head>

Then, I created a Data Layer variable in Google Tag Manager dashboard which looks like below:

Finally, in my HubSpot form, I added onFormSubmitted function which looks like below to push the variable and its value (the user's email) to Tag Manager:

<script charset="utf-8" type="text/javascript"
    src="//js-eu1.hsforms.net/forms/shell.js"></script>
<script>    hbspt.forms.create({
        region: "eu1",
        portalId: "xxxxxxxx",
        formId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
        onFormSubmitted: function ($form) {
            dataLayer.push({ 'var': String($form.find('input[name="email"]').val()) });
        }
    });</script>

After adding these pieces of codes, when I check the Google Ads Submit Lead Form Conversion, I still can't see the value.

Ben_M · ‎Oct 6, 2022

From what I can see you are trying to get the data in the onFormSubmitted event. Unfortunately, while it would be useful to have the data here, the data is no longer accessible at that point. So you would need to grab the data via onFormSubmit which is after the data is validated, but before it is sent to Hubspot. Can you try changing the hubspot embed and see if that resolves the issue?

naser_sadeghi · ‎Oct 7, 2022

I have also tried this approach before. I can get the sent variable in Google Tag Manager inside Messages section but not inside the variable that I have highlighted.

Lead Capture Tools