Inserting Google Tag Manager tracking code directly into Hubspot form iframe code

Develop, Build & Integrate CMS Development
1

Hello,

We have starting implementing Hubspot forms on our Wordpress site. The forms are embedded directly in the WP page (not hosted on a landing page). The problem is that causes a hole in Google Analytics tracking data because it can’t record conversions from the form (as the form is an iframe).

So what I’m hoping to find out is -

1) is it possible to insert the GTM tracking code, directly into the form code without impacting the performance of the form?

2) how/where in the iframe code should we insert the GTM code? GTM code looks like this:

3) if this isn’t possible, is there another way to track conversions from the HS forms in GA?

(Supposed to go in the <head> of the page)

<!-- Google Tag Manager -->

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:

new Date().getTime(),event:‘gtm.js’});var f=d.getElementsByTagName(s)[0],

j=d.createElement(s),dl=l!=‘dataLayer’?‘&l=’+l:‘’;j.async=true;j.src=

‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);

})(window,document,‘script’,‘dataLayer’,‘GTM-KWN39ZV’);</script>

<!-- End Google Tag Manager -->

(supposed to go after the <body> tag)

<!-- Google Tag Manager (noscript) -->

<noscript><iframe src=“https://www.googletagmanager.com/ns.html?id=GTM-KWN39ZV”

height=“0” width=“0” style=“display:none;visibility:hidden”></iframe></noscript>

<!-- End Google Tag Manager (noscript) -->

Form Iframe code looks like this -

<script charset=“utf-8” type=“text/javascript” src=“//js-eu1.hsforms.net/forms/embed/v2.js”></script> <script>
hbspt.forms.create({
region: “eu1”,
portalId: “26880358”,
formId: “b943612f-2be1-4a17-bc37-1526253ad9e6”
});
</script>

I’ve had a look at other similar queries and they deal more with landing pages etc hosted by Hubspot; whereas this is just a form embedded in our Wordpress site.

Appreciate any help you might be able to give!

Many thanks.

2

Hi, @clh2613 :waving_hand: Thanks for your question. Let’s invite some of our community member to the conversation — hey @Teun @louischausse @Jnix284, have you been successful recently at getting anything similar set up?

Thanks for taking a look! — Jaycee

3

Hi @clh2613 ,

You do not need to insert the tracking script inside the form embed script, you can do one of two things;
1. Listen for the window event that tells you that a form has been submitted

<script>
 window.addEventListener('message', function(event) {
 if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
 window.dataLayer.push({
 event: 'hubspotFormLoaded',
 hsFormGuid: event.data.id,
 currentUrl: window.location.href,
 });
 }

 if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
 window.dataLayer.push({
 event: 'hubspotFormSubmitting',
 hsFormGuid: event.data.id,
 currentUrl: window.location.href,
 });
 }

 if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
 window.dataLayer.push({
 event: 'hubspotFormSubmitted',
 hsFormGuid: event.data.id,
 currentUrl: window.location.href,
 });
 }
 });
</script>

You can place this script in the head of your WordPress website or just before the closing </body> tag.

2. Update the tracking script to send data to the datalayer:

<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
 hbspt.forms.create({
 region: "eu1",
 portalId: "26880358",
 formId: "b943612f-2be1-4a17-bc37-1526253ad9e6",
 onFormSubmitted: ($form) => {
 window.dataLayer = window.dataLayer || [];
 window.dataLayer.push({
 event: 'hubspotFormSubmitted',
 currentUrl: window.location.href,
 });
 }
 });
</script>

I have a video on my YT channel that discusses GA4 and HubSpot events.

4

Here’s a link to @Teun’s video :raising_hands: — How to setup Tagmanager events for GA4 in HubSpot

Have fun building! — Jaycee

5

Thanks Teun for your help, I will check out your video.

Regards,

Cassia

6

Hi Teun, would the event listener method also work if have the form as a popup on the website?

7

Hello Teun,

I am trying to set up Enhanced Conversions. I have turned on EC under Ads → Events, but Google Ads is showing “Enhanced conversions has no recent data”. We think it’s because we are using Hubspot forms and once someone has submitted they are redirected to our Thakn you page. I noticed your option 2 suggests to “Update the tracking script to send data to the datalayer” - we do we change this script? thanks!!