Human Readable Goal Tracking with GTM in GA

[simeoned]

Hopefully this helps someone else who is in need of a similar solution. 

The Situation:

We were trying to implement some goal tracking for a client who had multiple forms on their webflow site. We needed a way to pass something other than the form GUID to Google Analytics using GTM so that the goals we wanted to set up would generate menaingful reports. 

The problem(s): 

As this post points out, "...the built in form submission listener in GTM won't work...". And the suggested code for the Tag setup that has been floating around all over the place on every forum and blog post for ages only serves to pass the GUID to GA:

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

This doesnt really help with the human readable part as the GUID is a radom string. For reference, the article describing the full process for setting this up with GTM can be seen here: https://nettlesnet.com/track-hubspot-forms-with-google-tag-manager-analytics/

We followed this article to get us 95% of the way there. What we did went a bit further when we modified the Listener script and created another Variable in GTM. That solution is found below. 

So, follow the article above as normal to get you as far as it can. Then, we'll be modifying the code from step 1, adding another variable as described in step 2, the trigger in step 3 is good to go as is, and finally we'll be modifying the label found in step 4 to include our newly created variable. 

So, we still needed a way to pass something other than the GUID...

The Solution:

What we wound up doing was modifying the JS for the tag to listen for a *hidden field* (screenshot below) in our HS Forms, setting up another variable in GTM, and passing the data from the custom field to GA to match our Goals. 

1) Create a Data Layer Variable in GTM called "Forms — hs-custom-field"

2) Set up your Custom Event Trigger (may already be done if you follow the above article)

3) Set up your "Forms — HS Success Listener" with this modified code:

<script>
var customfield = 'defaultvalue';
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
var found = event.data.data.filter(function(item) { return item.name === 'goaltrackinglabel'; });

console.log('found', found[0])
customfield = found[0].value;
}
});




window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
console.log(customfield);
window.dataLayer.push({
'event': 'hubspot-form-success',
'hs-form-guid': event.data.id,
'hs-custom-field':customfield
});
}
});
</script>

The key here is the difference in the Event Names: onFormSubmit vs. onFormSubmitted

4) Set up your Tag to send the data to GA using the variable(s) you created as the label. Ours wound up looking like this: 

{{Forms — hs-custom-field}} - hubspot form ID: {{Forms — hs-form-guid}}

5) Set up your forms to have a hidden field with a name of "goaltrackinglabel" and make the Default Value be whatever you want to pass to GA. 

Then, in GA you can set up your "starts with" goals to look for whatever naming convention suites your needs. Boom, you have some meaningful data to report on that is also human readable - something unique for any form you wish in HS. We've found this to be very useful so far. 

This met all of our requirements and we were able to train the marketing director and client pretty easily on how to add this field if they want to manage their own form creation moving forward. 

Hope this helps someone out there who might be struggling to find a way to do somethign similar! 

Custom Field screenshot:

[PamCotton]

Hello @simeoned 

Thank you for sharing this information with the Community!

Happy new year! 🎆

Kindly,

Pam