HubSpot Forms and Google Analytics Events

SOLVE
jtuason00
Participant

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?

0 Upvotes
1 Accepted solution

Accepted Solutions
amwilie
Solution
Key Advisor | Elite Partner

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!

border

Alyssa Wilie

Web Developer at LyntonWeb

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

View solution in original post

6 Replies 6
amwilie
Solution
Key Advisor | Elite Partner

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!

border

Alyssa Wilie

Web Developer at LyntonWeb

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

View solution in original post

jtuason00
Participant

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

0 Upvotes
juanjosezg
Participant

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
Member

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

0 Upvotes
DerekM
Participant

.

0 Upvotes
simeoned
Member

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