{"id":5505,"date":"2023-01-29T18:42:05","date_gmt":"2023-01-29T15:42:05","guid":{"rendered":"https:\/\/trackingchef.com\/?p=5505"},"modified":"2024-08-05T15:29:52","modified_gmt":"2024-08-05T12:29:52","slug":"advanced-hubspot-form-submission-tracking","status":"publish","type":"post","link":"https:\/\/trackingchef.com\/facebook\/advanced-hubspot-form-submission-tracking\/","title":{"rendered":"Advanced Hubspot Form Submission Tracking"},"content":{"rendered":"\n

In a previous post, I described how to track Hubspot forms using Google Tag Manager<\/a> for reporting conversions in various analytics and ad platforms.<\/p>\n\n\n\n

In this post, I’ll try to break down some advanced tracking concepts for which you can use your Hubpost form tracking.<\/p>\n\n\n\n

The Hubspot form listener<\/h2>\n\n\n\n

The most robust way of tracking Hubspot forms is by using a Javascript event listener that observes form submissions.<\/p>\n\n\n\n

<script type=\"text\/javascript\">\n  window.addEventListener(\"message\", function(event) {\n    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {\n      window.dataLayer.push({\n        'event': 'form_submission',\n        'form_id': event.data.id\n\n      });\n    }\n  });\n<\/script><\/code><\/pre>\n\n\n\n
This event listener can be used as a standalone script across all your pages (as above) or injected into the Hubspot form’s JSON:<\/p>\n\n\n\n
<script charset=\"utf-8\" type=\"text\/javascript\" src=\"\/\/js.hsforms.net\/forms\/v2.js\"><\/script>\n<script>\n  hbspt.forms.create({\n\tportalId: \"12345678\",\n\tformId: \"988c94e6-d06b-4181-95d4-3ea925d01d47\",\n        onFormSubmit: function($form){\n        window.dataLayer.push({\n          'event': 'form_submission',\n          'form_name': 'request demo'\n      });\n    }\n});\n<\/script><\/code><\/pre>\n\n\n\n
The events<\/h3>\n\n\n\n
Hubspot forms report several different events<\/a> at various stages. I find two events to be meaningful:<\/p>\n\n\n\n
    \n
  1. onFormSubmit <\/em>– This is defined by Hubspot as “Called at the start of form submission, submission hasn’t been persisted yet”. What this means in practice is that the form has passed validation and the data has been passed back to Hubspot (without a response yet). Potentially, a form could fail at this point for various technical reasons, but that’s very uncommon.<\/li>\n\n\n\n
  2. onFormSubmitted <\/em>– This is defined by Hubspot as “Called after the form has been submitted and submission has been persisted”. What this means in practice is that a response for the form’s submission has been received and is positive (i.e. the form’s data was recorded).<\/li>\n<\/ol>\n\n\n\n
    When choosing to use an event for the event listener that will trigger conversion pixels, we can choose from either event. onFormSubmit<\/em> will be more permissive and will allow for forms that didn’t validate also to trigger a conversion event. On the other hand, onFormSubmitted<\/em> is more conservative and waits for full validation that the form passed correctly.<\/p>\n\n\n\n
    When to use which event?<\/h3>\n\n\n\n
    We can use onFormSubmit <\/em>when we want to trigger a manual redirect logic (e.g. if Industry is X, route to page Y) instead of the basic Hubspot logic.<\/p>\n\n\n\n
    If you’re using a Thank You page redirect and also triggering multiple pixels, you might want to fire them before the server response returns so that they have time to trigger before the redirect takes place.<\/p>\n\n\n\n
    Another benefit of the onFormSubmit<\/em> event is that it carries the actual form data, so we can use it to grab the submitted form data (examples below).<\/p>\n\n\n\n
    If you’re using a simple thank you message, I recommend using the onFormSubmitted<\/em> event.<\/p>\n\n\n\n
    Advanced use cases for Hubspot for tracking<\/h2>\n\n\n\n
    One great way of using these triggers is to capture identified user data for advanced processing.<\/p>\n\n\n\n
    \n
    Note that using these data points must happen in accordance with your site’s privacy policy and the user’s given consent.<\/p>\n<\/blockquote>\n\n\n\n
    Advanced Matching for Google and Facebook Ads conversions<\/h3>\n\n\n\n
    Since the user has submitted their email and other personally identifiable information, this data can be used to enhance your conversion matching on your ad platforms. Though this is relevant for multiple platforms I’ll walk through Google and Facebook Ads.<\/p>\n\n\n\n
    By adjusting the event listener with the code below, you can capture the user’s email, phone, and first\/last name as Datalayer Variables alongside the form submission.<\/p>\n\n\n\n
    window.addEventListener(\"message\", function(event) {\n    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {\n        console.log(event.data);\n        formData = event.data.data;\n        const formObj = formData.reduce((acc, curr) => {\n            acc[curr.name] = curr.value;\n            return acc;\n        }, {});\n        window.dataLayer.push({\n            'event': 'hubspot-form-success',\n            'hs-form-guid': event.data.id,\n            'email': formObj.email,\n            'phone': formObj.phone,\n            'first_name': formObj.firstname,\n            'last_name': formObj.lastname\n        });\n    }\n});<\/code><\/pre>\n\n\n\n
    Once these data points are available, we can assign them to the relevant tags<\/p>\n\n\n
    \n
    \"image-4528800\"
    Adding the user’s email to a Facebook event tag<\/figcaption><\/figure><\/div>\n\n\n
    You can read the full blog post about setting up Facebook Advanced Matching here<\/a>.<\/p>\n\n\n\n
    Full setup for GTM<\/h3>\n\n\n\n
    For setting up the full tracking of Hubspot form submission and enhanced conversions in GTM, use this script:<\/p>\n\n\n\n
    window.addEventListener(\"message\", function(event) {\n    if (event.data.type === 'hsFormCallback') {\n        if (event.data.eventName === 'onFormSubmit') {\n            console.log(event.data);\n            var formData = event.data.data;\n            var formObj = formData.reduce(function(acc, curr) {\n                acc[curr.name] = curr.value;\n                return acc;\n            }, {});\n            window.dataLayer.push({\n                'event': 'hubspot-advanced-matching',\n                'form_id': event.data.id,\n                'email': formObj.email,\n                'phone': formObj.phone,\n                'first_name': formObj.firstname,\n                'last_name': formObj.lastname\n            });\n        } else if (event.data.eventName === 'onFormSubmitted') {\n            window.dataLayer.push({\n                'event': 'hubspot-form-success',\n                'form_id': event.data.id\n            });\n        }\n    }\n});<\/code><\/pre>\n\n\n\n
    Segment Identify events<\/h3>\n\n\n\n
    Another great use case is the often-overlooked integration of Hubspot with Segment.<\/p>\n\n\n\n
    In many clients that I’ve audited their accounts, I’ve come across a one-way data integration between Hubspot and Segment. This meant that only Segment was pushing data into Hubspot. It usually happens on a Segment Identify event that will trigger the equivalent Hubspot event. The most common scenario is an app login or sign-up form that triggers Segment which in turn triggers Hubspot.<\/p>\n\n\n\n
    But many sites also have Hubspot forms for Demo Requests or gated content that don’t communicate with Segment.<\/p>\n\n\n\n
    Since the data is readily available, we can easily trigger it to Segment as well.<\/p>\n\n\n\n
    In this case, we can use the event listener to trigger the Segment Identify call directly (or via Google Tag Manager).<\/p>\n\n\n\n
    window.addEventListener(\"message\", function(event) {\n    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {\n        console.log(event.data);\n        formData = event.data.data;\n        const formObj = formData.reduce((acc, curr) => {\n            acc[curr.name] = curr.value;\n            return acc;\n        }, {});\n        analytics.identify(, {\n            email: formObj.email,\n            phone: formObj.phone,\n            first_name: formObj.firstname,\n            last_name: formObj.lastname\n        });\n    }\n});<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
    In a previous post, I described how to track Hubspot forms using Google Tag Manager for reporting conversions in various analytics and ad platforms. In this post, I’ll try to break down some advanced tracking concepts for which you can use your Hubpost form tracking. The Hubspot form listener The most robust way of tracking […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4,42,134],"tags":[200],"class_list":["post-5505","post","type-post","status-publish","format-standard","hentry","category-facebook","category-google-ads","category-hubspot","category-segment","tag-forms"],"_links":{"self":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/5505","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/comments?post=5505"}],"version-history":[{"count":4,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/5505\/revisions"}],"predecessor-version":[{"id":5856,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/posts\/5505\/revisions\/5856"}],"wp:attachment":[{"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/media?parent=5505"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/categories?post=5505"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/trackingchef.com\/wp-json\/wp\/v2\/tags?post=5505"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}