Google Tag Manager - Push Form Data to dataLayer

[EMartin51]

Hi,

I'm trying to push a form's email value into the dataLayer once a form has been submitted; I've called the variable "hs-form-email" in the code below.  I've been trying lots of different ways, and if I literally just use 'event.data', I can see the names and values in the variable, but I can't find a way to only extract the email value - could someone help?

<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',
        'hs-form-guid': event.data.id,
        'hs-form-email' : event.data.email.value
      });
    }
  });
</script>

[adden]

While some answers here are good, you don't need that much JavaScript to do this. 

You can use the Hubspot HTML Listener tag that you're also using to track normal Google Ads conversions and add 

 'hs-data': event.data,

as @NiklasBuschner did.

So the entire tag would look like this: 

<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',
        'hs-data': event.data,
        'hs-form-guid': event.data.id
      });
    }
  });
</script>

This adds all the data in the form to the data layer, you just need to create the variables to get it.

For example, create a new Data Layer variable for email: hs-data.data.submissionValues.email

For first name: hs-data.data.submissionValues.firstname

For last name: hs-data.data.submissionValues.lastname

That's it. I've written about it in a bit more depth here: https://adden.agency/blog/set-up-enhanced-conversions-data-layer/

[aukevos]

Hi Adden, I just noticed that the contents of event.data changed from data.submissionValues to something named differently. Is this something you've noticed too, i.e. a change on the Hubspot forms, or might this be caused by and change made by our team to the forms?

[NiklasBuschner]

You can also dynamically access email input from the data layer with this step by step process.

Key to this process is, that you are not reliant on values being extracted from the DOM and you do not need to know at with position the email field is located since the code retrieves it dynamically.

1. HTML Tag that triggers on all pages

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

2. Set up data layer variable called HubSpot Data where the name of the data layer variable is exactly hs-data.

3. Set up custom javascript variable – I call it HubSpot Mail (Forms) – with the following code:

function() {
  var email;
  for (var i = 0; i < {{HubSpot Data}}.data.length; i++) {
    if({{HubSpot Data}}.data[i].name === 'email') {
      email = {{HubSpot Data}}.data[i].value;
    }
  }
  return email;
}

4. Use the variable HubSpot Mail (Forms) at your disposal, for example for enhanced conversions in Google Ads.

5. Set up data layer variable called HubSpot ID where the name of the data layer variable is exactly hs-id. You can now also use the ID of the form to send it to Google Analytics 4 as a custom parameter to identify the forms later on.

If you need any clarification about the setup, please reach out anytime!

[JNordenskjöld]

Hi, Thanks for the Solution!
However I can´t get it to work completely.
I´m trying to use the variable from the field input as a an Event Parameter in a GA4Event.
(I´m looking to use a custom input field of "Customer_Segment" to diversify my conversion value based on that, but in this case I´m using your email example so as not to do too many things at once)

But when I fill out my form and submit in preview mode, I only get "value: undefined":



In the API CallI can see that the information is there however, but like I said, it doesn´t seem to get picked up by the Event Parameter... 

Do you have any suggestions as to what I should try?

/joel

[NiklasBuschner]

Have you created the hs-data Data Layer Variable? This is necessary for the custom javascript variable to work correctly.

When in doubt, please show more of your setup so I can assist better.

[JNordenskjöld]

yes, I have the complete setup as your instructions
Below you can see the complete setup, with my customer Segment input instead of Email. Maybe I´m missing something...?

Thanks!!!

Form submission Listener:

Data Layer Variable:

Java Script Variable:

HubSpot ID variable

GA4 Event Form Success Tag

[NiklasBuschner]

In the form submission listener, you have to use onFormSubmit instead of onFormSubmitted. Please try that and let me know if it works.

[JNordenskjöld]

No, unfortunately this doesnt help I still get "undefined"....

[HSSW]

edit: works for me; thanks!

the solution was referring to the 'onFormSubmit' and not the 'onFormSubmitted' event!

[SebKoppjes]

This should be the accepted solution in my opinion.

The one Teun mentions isn't working for me.

[Jaycee_Lewis]

Hey, @SebKoppjes 👋 Please consider clicking the Accept Solution button for @NiklasBuschner's post. I'm sure he'd appreciate it. And it will add it to the top of this post. 

Thank you! — Jaycee

[SebKoppjes]

Isnt it the opening post that can do that only? I dont see the button?

[NiklasBuschner]

Thanks @SebKoppjes highly appreciated!

[Teun]

This is indeed a great solution.

I made a quick video about sending Tagmanager events from HubSpot: https://youtu.be/s3Ie-tKn0hM

Hope this helps someone.

[Haccount]

Hey @NiklasBuschner,

Thanks a lot for sharing this solution.

Worked perfectly on my end by just doing small tweaks on the CSJ to retrieve other fields from the form.

I'm glad I came across your post.

Cheers.  

[mateostabio]

This is exactly what I needed. I am getting errors when trying to preview GTM.  How did you link these variables to Google Ads?

[NiklasBuschner]

You create a new variable from the User-provided Data type and select your HubSpot Mail (Forms) variable for email and optionally a phone variable for phone.

Then you add this variable to your Google Ads conversion tag from the option "Include user-provided data from your website".

Finally, you just have to activate enhanced conversion in the Google Ads conversion configuration.

I hope this helps.

[ELobato2]

How did you add it? Because i tried too like @Teun say but Listener don't appear when i submit a form.  If i try without email data, it works but adding that additional code breaks the HTML for me. 

[Teun · Accepted solution]

Hi @EMartin51 ,

There is probably a better way to retrieve the value from the data object, but this should work:

<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',
        'hs-form-guid': event.data.id,
        'hs-form-email' : $('input[name="email"]').val()
      });
    }
  });
</script>

Not sure why, but I've only been able to manipulate and retrieve form data with jQuery, but I love to see a Vanilla JS solution that actually works.

[dvllgs]

You can access the email address like this :

shout out to sambasci.com for figuring this out

<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',
        'hs-form-guid': event.data.id,
        'hs-form-email': event.data.data.submissionValues.email
      });
    }
  });
</script>