topic Re: Google Tag Manager - Push Form Data to dataLayer in APIs & Integrations

Google Tag Manager - Push Form Data to dataLayer

EMartin51 — Sun, 14 Nov 2021 20:59:16 GMT

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?

Re: Google Tag Manager - Push Form Data to dataLayer

Teun — Mon, 15 Nov 2021 07:29:40 GMT

Hi @EMartin51 ,

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

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.

Re: Google Tag Manager - Push Form Data to dataLayer

EMartin51 — Mon, 15 Nov 2021 11:16:57 GMT

Hi @Teun - perfect, this works like a charm, thank you very much! 👍

Re: Google Tag Manager - Push Form Data to dataLayer

ondukwe — Tue, 23 Nov 2021 21:59:23 GMT

This code was very helpful for what I want to do in GTM. Thank you!

Re: Google Tag Manager - Push Form Data to dataLayer

ELobato2 — Wed, 22 Dec 2021 07:32:11 GMT

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.

Re: Google Tag Manager - Push Form Data to dataLayer

ELobato2 — Fri, 24 Dec 2021 01:16:19 GMT

Hi Teun, would yo help me how to add this? I got some problem because when i add that code that you posted here. No more hubspot-success-form fires. Its an Custom HTML Tag.

Re: Google Tag Manager - Push Form Data to dataLayer

ANeita — Mon, 24 Oct 2022 16:45:10 GMT

Can you please help provide an example of this but for the hubspot meetings form submission?

Re: Google Tag Manager - Push Form Data to dataLayer

NiklasBuschner — Tue, 24 Jan 2023 10:51:26 GMT

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

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!

Re: Google Tag Manager - Push Form Data to dataLayer

mateostabio — Wed, 01 Feb 2023 23:54:47 GMT

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

Re: Google Tag Manager - Push Form Data to dataLayer

NiklasBuschner — Thu, 02 Feb 2023 12:34:12 GMT

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.

Re: Google Tag Manager - Push Form Data to dataLayer

Haccount — Tue, 21 Feb 2023 22:42:50 GMT

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.

Re: Google Tag Manager - Push Form Data to dataLayer

SebKoppjes — Thu, 16 Mar 2023 15:07:54 GMT

This should be the accepted solution in my opinion.

The one Teun mentions isn't working for me.

Re: Google Tag Manager - Push Form Data to dataLayer

Teun — Thu, 16 Mar 2023 15:17:20 GMT

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.

Re: Google Tag Manager - Push Form Data to dataLayer

NiklasBuschner — Thu, 16 Mar 2023 16:01:12 GMT

Thanks @SebKoppjes highly appreciated!

Re: Google Tag Manager - Push Form Data to dataLayer

Jaycee_Lewis — Thu, 16 Mar 2023 17:52:30 GMT

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

Re: Google Tag Manager - Push Form Data to dataLayer

SebKoppjes — Fri, 17 Mar 2023 08:37:43 GMT

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

Re: Google Tag Manager - Push Form Data to dataLayer

HSSW — Fri, 28 Apr 2023 17:02:38 GMT

edit: works for me; thanks!

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

Re: Google Tag Manager - Push Form Data to dataLayer

JNordenskjöld — Wed, 28 Jun 2023 17:24:03 GMT

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

Re: Google Tag Manager - Push Form Data to dataLayer

NiklasBuschner — Wed, 28 Jun 2023 17:51:10 GMT

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.

Re: Google Tag Manager - Push Form Data to dataLayer

JNordenskjöld — Thu, 29 Jun 2023 13:41:27 GMT

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