Hubspot Form Tracking Using GTM

[roshan123]

Hi,

I have used following script to track the Hubspot form through GTM but this script is not working for me. I would like if anyone can help me to fix this issue.

form.png797x345 7.42 KB

Thanks,
Roshan

[Derek_Gervais]

Hi @Roshan,

Ok, so I'm admittedly not particularly familiar with the ins-and-outs of GTM, but I noticed that one of the 'HubSpot Form Tracking' tag's firing triggers has the following filter:

_event equals hubSpotFormSubmitted

How exactly is this triggering the 'HubSpot Form Tracking' tag? That event isn't familiar to me, so I'm not sure exactly how that filter should be working.

[roshan123]

@Derek_Gervais As you can see here the custom HTML tag " cHTM - Hubspot Form Tracking " in this i have added the conditional script where i have added the event equals hubSpotFormSubmitted.

[Derek_Gervais]

Hi @Roshan,

Does this code execute before the GTM snippet is loaded? You mentioned that you were including the dataLayer definition before the GTM snippet, but in your most recent example I can see you defining the dataLayer array. The dataLayer array must be defined before the GTM snippet is called, otherwise it will not behave as expected. If you define the dataLayer before the GTM snippet and then re-define it in the onFormSubmit callback, I would also expect to see strange behavior. Your code should look (roughly) like this:

<script>
  dataLayer = [{
    'formname': 'newsletter'
  }];
</script>

...

<!-- Google Tag Manager -->
...
<!-- End Google Tag Manager -->

...

<!-- HubSpot form embed code -->
...
<!-- End HubSpot form embed code -->

[roshan123]

@Derek_Gervais I follow the same as you mentioned above, as I cannot be shared the client website URL here but I have created one demo Hubspot account and embedded the Form on blogger and implement the same on this.

Please look into in following URLs:

The Hubspot embed code is present on this page: http://learnaboutgtm.blogspot.in/2017/04/tags-triggers-variables-and-data-layer.html

This is GTM preview mode: https://www.googletagmanager.com/start_preview/gtm?uiv2&id=GTM-N7BW4WF&gtm_auth=EeFIP-lXyOD3Iww5ihzD...

Custom HTML Tag "cHTM - Hubspot Form Tracking" where I added the conditional script and this is the firing tag "Hubspot Form Tracking" this should be run on Form submit success.

Thanks,
Roshan

[Derek_Gervais]

Hi @Roshan,

In your onFormSubmit callback, can you use window.dataLayer.push() instead of dataLayer.push()?

[roshan123]

Added window.dataLayer.push() in the following script but still not working.

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
hbspt.forms.create({
portalId: 'XXXXXX',
formId: 'f55aac38-d03f-498f-92d6-bba868204969',
onFormSubmit: function($form) {
window.dataLayer = window.dataLayer || [];

	window.dataLayer.push({

'event' : 'hubSpotFormSubmitted',
'formName' : 'newsletter'
});
}
});
</script>

[Derek_Gervais]

Hi @Roshan,

The dataLayer array must be declared before the GTM snippet in order to work correctly. If you put the Google Tag Manager container snippet above the dataLayer array, Google Tag Manager may malfunction, and will not be able to read the variables defined in the array. I've included some GTM docs below for reference:

https://developers.google.com/tag-manager/devguide

[roshan123]

@Derek_Gervais I added following datalayer code above the GTM code on the page source code but still Form tracking is not working.

<script> dataLayer = [{ 'formName': 'newsletter' }]; </script>

Thanks