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

Developer Support CMS Development
1

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:

tag_manager.png
tag_manager.png933×377 16.6 KB

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:[

Site

](LifePo4 Lithium Ion Golf Cart Batteries Suppliers | Best 36 Volt 48 Volt Lithium Ion Battery Pack For Golf Cart Manufacturer Company | Deep Cycle Lithium Iron Phosphate Rechargeable Battery Factory)

<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. [

Website

](LifePo4 Lithium Ion Golf Cart Batteries Suppliers | Best 36 Volt 48 Volt Lithium Ion Battery Pack For Golf Cart Manufacturer Company | Deep Cycle Lithium Iron Phosphate Rechargeable Battery Factory)

08rNO.png
08rNO.png518×535 34.5 KB

How Can I fix this?

2

Hi @ihashmi ,

Could you try the onFormSubmit callback instead of the onFormSubmitted?
Also, try using window.dataLayer.push instead of dataLayer.push.