Snowplow does not track Hubspot Forms (JS 2.18.2)

For engineers Tracking SDKs
1

I need help! Our Snowplow (v2.18.2) instance is not tracking Hubspot form submissions.
For standard forms we see a Self describing event “SD Event: focus_form” and “SD Event: submit_form” but for Hubspot Snowplow does not pick up any activity ( no data being sent )

What we’ve tried
Based on this refreshFormTracking for capturing dynamic form changes we found we figured the issue must be that the form is being loaded after page load

  • Wrapping instance.plugins.snowplow.enableFormTracking() in a window.onload = () => {} function / Also tried event listeners and a few other DOM load functions
  • Running instance.plugins.snowplow.enableFormTracking() in console. This returns undefined but form tracking still not working

I suspect it’s something to do with the fact that the form seems to populate in an on the page

<iframe id="hs-form-iframe-0" class="hs-form-iframe" scrolling="no" width="100%" style="width: 100%; position: static; border: none; display: block; overflow: hidden; height: 672px;" height="672"></iframe>

Hubspot Form embed example
Here’s the code we are using to embed the Hubspot form - You could use this as well to see how it works

        <script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/v2.js"></script>
        <script>
            hbspt.forms.create({
                region: "eu1",
                portalId: "25643516",
                formId: "2b6a2942-13f3-470f-a376-56e67dcaae7a"
            });
        </script>

Please can someone help. Without form tracking we cannot track our customer’s site performance

2

If I understand correctly, the form is inside an embedded iframe while the Snowplow tracker is initialized on the parent page? Unfortunately, this is not supported – the form needs to be embedded on the same page as the tracker.

You could theoretically inject code into the iframe that initializes the tracker and enable form tracking but that requires that the content in the iframe is from the same domain as the parent page which I assume is not the case since you are loading the form from HubSpot.

Here is a related question where the user wants to track a form within an iframe.

3 Likes
3

Just a quick note that we have released version 3.4 of the JavaScript tracker that brings the ability to track forms inside certain types of iframes (which also includes Hubspot forms). Here is an excerpt from the docs:

Tracking forms embedded inside iframes

The options for tracking forms inside of iframes are limited – browsers block access to contents of iframes that are from different domains than the parent page. We are not able to provide a solution to track events using trackers initialized on the parent page in such cases. However, since version 3.4, it is possible to track events from forms embedded in iframes loaded from the same domain as the parent page or iframes created using JavaScript on the parent page (e.g., HubSpot forms).

In case you are able to access form elements inside an iframe, you can pass them in the options.forms argument when calling enableFormTracking on the parent page. This will enable form tracking for the specific form elements. The feature may also be used for forms not embedded in iframes, but it’s most useful in this particular case.

The following example shows how to identify the form elements inside an iframe and pass them to the enableFormTracking function:

let iframe = document.getElementById('form_iframe'); // find the element for the iframe
let forms = iframe.contentWindow.document.getElementsByTagName('form'); // find form elements inside the iframe
enableFormTracking({
    options: {
        forms: forms // pass the embedded forms when enabling form tracking
    },
});