Marketing Integrations

jtuason00
Participant

HubSpot Forms and Google Analytics Events

SOLVE

Hi all,

 

I'm trying to track HubSpot Form submissions as events in Google Analytics. Really, I'm using Google Tag Manager, hoping to pass the event information to Google Analytics

Here's where I'm running into an issue:

 

The HubSpot form is implemented through a time-based lightbox popup (Convert Plus).

 

In GTM, the tag trigger is set up on Trigger Type: Form Submission firing on Form ID.

 

In this case, I've tried both the HubSpot form's ID and the lightbox container's ID (because why not).

 

I've also tried setting it to fire on Click URL with the target page (an online PDF.)

 

With that said, the form tag still doesn't appear in the GTM preview panel.

 

Now, I've seen these posts on GA events and HubSpot forms but I haven't attempted any of them because 1. I'll admit I'm out of my depth here, and 2. The lightbox popup manager is throwing me for a loop when it comes to embed codes.

 

Trigger Google Analytics Event with Form Submission

CTA and Google analytics event tracking

Google analytics form submission event tracking - possible workaround

Any thoughts?

1 Accepted solution
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

HubSpot Forms and Google Analytics Events

SOLVE

Hey @jtuason00 

Due to how Hubspot forms work the built in form submission listener in GTM won't work; you have to actually litsen for Hubspot's particular submission callback to track it. Here's a step-by-step on creating a custom listener for tracking hubspot form submissions with GTM:

https://nettlesnet.com/track-hubspot-forms-with-google-tag-manager-analytics/

If you want to track only a particular form you can just add && event.data.id === "[your form GUID here]" to the end of the if statement in the form listener tag the instructions have you add. Like so :

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted' && event.data.id === "6a007255-a43f-4d60-a668-d74cf37b9aa3") {
      window.dataLayer.push({
        'event': 'hubspot-form-success',
        'hs-form-guid': event.data.id
      });
    }
  });
</script>


Hope this helps!

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

Kickstart your success on HubSpot's CMS with a theme by the HubSpot experts at Lynton

 

View solution in original post

14 Replies 14
DShepherd
Participant

HubSpot Forms and Google Analytics Events

SOLVE

Thanks for this. I'm struggling with Step 4 as I'm using Google Analytics GA4 - can you let me know what to change please.

0 Upvotes
codeandtonichq
Contributor

HubSpot Forms and Google Analytics Events

SOLVE

EASIEST METHOD EVER

If Google Tag Manager is too complex as you you're a little out of your deptd, the easiest way ever is shown in this blog post Track Hubspot forms with Google analytics. No Google Tag Manager! 

Like amwilie mentioned, you'll need to listen to events coming from the iframe but...you don't really need to understand any of that. Just copy-paste the code in that blog post to your site. 

amwilie
Key Advisor | Elite Partner
Key Advisor | Elite Partner

HubSpot Forms and Google Analytics Events

SOLVE

@DDemagistris You can follow these instructions for setting up a tag for Google Ads conversion then just use the hubspot-form-success trigger as the trigger for the tag.

 

@simeoned Unfortanutely Hubspot does not store the form title in anyway in the form code or listener so there's no way to access it easily. You would have to use the forms API to search for it by it's guid and then get the name that way. API's aren't my strong suit but I think it'd be something like this?

window.addEventListener("message", function(event) {
  if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
    var url = "https://api.hubapi.com/forms/v2/forms/" + event.data.id + "/?hapikey=YOUR-API-KEY"

    $.ajax({
      url: url,
      dataType: json,
      data: data,
      success: function(html) {
        window.dataLayer.push({
          'event': 'hubspot-form-success',
          'hs-form-name': data.name
        });
      }
    });
  }
});

 

@factsetresearch @juanjosezg You would have to keep track of form fields interacted with and then probably use an exit intent trigger. It would work ok if the person stays in the tab and leaves the page, but I don't think a script would be able to run quick enough to capture when someone closes the tab. I think it'd be a little complex so don't currently have the time to throw some code here for you but if I get some free time I'll see what I can put together.

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

Kickstart your success on HubSpot's CMS with a theme by the HubSpot experts at Lynton

 

RTeuchler
Participant

HubSpot Forms and Google Analytics Events

SOLVE

@amwilie I've followed all the steps for setting up conversion tracking between hubspot and Google Ads in GTM. I do have one problem though, it seems like the Google Ads Conversion Tag is firing as a successful conversion even when someone hasn't filled in all required fields but tried sending in the form.

Basically it seems they're firing on Form Submit while they should only fire on Form Submitted. 

 

What I'm worried about is that this will distort our conversion data in Google Ads when people try sending in a complete form. We've hade some correct conversions where we see 1 form submission in HubSpot while it's being counted as 1 conversion in Google Ads. But we also hade 3 conversions one day in Google Ads, but no form submissions at all in HubSpot. So I'm really worried this might happen from time to time if we don't find the cause to this.

 

Do you know why this could be? Or if you think it has to do with something else?

 

This is my set up:

RTeuchler_0-1632301905617.png

 

RTeuchler_1-1632302005320.png

 

RTeuchler_2-1632302506194.png

RTeuchler_3-1632302796981.png

 

 

Tags firing when I haven't filled in alla required fields, but tried sending in the form

RTeuchler_4-1632303087932.png

 

and after that when I send in the form with all required fields filled in I get a form success message with the correct Form ID etc which would count as a conversion.

0 Upvotes
amwilie
Key Advisor | Elite Partner
Key Advisor | Elite Partner

HubSpot Forms and Google Analytics Events

SOLVE
@RTeuchler Due to the way Hubspot forms work you can't use GA's Form Submission trigger to accurately log form submissions. Follow the instructions exactly in the link I provided in my solution answer to create a variable for the form guid and a custom event trigger that looks for the data the form listener pushes.

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

Kickstart your success on HubSpot's CMS with a theme by the HubSpot experts at Lynton

 

0 Upvotes
DDemagistris
Participant

HubSpot Forms and Google Analytics Events

SOLVE

@amwilie Will the same code work for Google Ads?

0 Upvotes
amwilie
Solution
Key Advisor | Elite Partner
Key Advisor | Elite Partner

HubSpot Forms and Google Analytics Events

SOLVE

Hey @jtuason00 

Due to how Hubspot forms work the built in form submission listener in GTM won't work; you have to actually litsen for Hubspot's particular submission callback to track it. Here's a step-by-step on creating a custom listener for tracking hubspot form submissions with GTM:

https://nettlesnet.com/track-hubspot-forms-with-google-tag-manager-analytics/

If you want to track only a particular form you can just add && event.data.id === "[your form GUID here]" to the end of the if statement in the form listener tag the instructions have you add. Like so :

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted' && event.data.id === "6a007255-a43f-4d60-a668-d74cf37b9aa3") {
      window.dataLayer.push({
        'event': 'hubspot-form-success',
        'hs-form-guid': event.data.id
      });
    }
  });
</script>


Hope this helps!

If this answer solved your question, please mark it as the solution!

Alyssa Wilie

Web Developer at Lynton

Kickstart your success on HubSpot's CMS with a theme by the HubSpot experts at Lynton

 

cgrignon
Member

HubSpot Forms and Google Analytics Events

SOLVE

Hey, I'm still encountering this problem and the link you shared is not accessible anymore. Is there an updated url?

0 Upvotes
GeorgianaC
Participant

HubSpot Forms and Google Analytics Events

SOLVE

Could you please help me with a thing i have noticed? I have setup the event listener for form submission parsed the form name parameter towards the event, and somehow I do not see the data in google analytics 4. I am wondering because I have internal traffic excluded? How about someone who has submitted a newsletter signup via hubspot form, i have checked the gtm and my event is triggered correctly in tag assistant, when i debug, but the new person who has signed up to my newsletter is not counted in google analytics on the 23rd of march, when i received an email from hubspot saying they have registered a new sign up. please help. i am confused. Any help would be appreciated.

0 Upvotes
DDemagistris
Participant

HubSpot Forms and Google Analytics Events

SOLVE

This was very helpful! It worked perfectly for me. 

Now I'm wondering how to count the same trigger as a Google Ads conversion. 

Can you please help me?

0 Upvotes
simeoned
Member

HubSpot Forms and Google Analytics Events

SOLVE

Can you please advise on a way to modify the lisener, the variable, or both to include the name of the HS form itself? We wamt to set up goal tracking so that the label has something human readable for reporting purposes. Right now it just has  "{{Forms — hs-form-guid}}".

 

We want to roll up all the different form submissions from all the different forms into the same goal in GA but be able to distinguish between which ones got sent. So...

 

Category: button

Action: Submit

Label: {{hs-form-name}}

 

Would be ideal. Again, what would need to be modified in the listener/variable to accomplish this? 

Thanks!

 

Dan

 

juanjosezg
Participant

HubSpot Forms and Google Analytics Events

SOLVE

Hi, @amwilie   is it possible to track the abandoned forms with some code as you posted?

I have been using the code that you posted to track the form submissions with GTM,  but I would like to know if I can track the abandoned forms

0 Upvotes
factsetresearch
Participant

HubSpot Forms and Google Analytics Events

SOLVE

@amwilie I'm hoping to get abandoned forms, but also drop data layer varables for all actions within the form process.

0 Upvotes
jtuason00
Participant

HubSpot Forms and Google Analytics Events

SOLVE

Very cool, thanks! I'll take a look. Learning something new every day.

0 Upvotes