Hubspot Form Tracking in Google Tag  Manager

Hubspot provides global form events that trigger three events related to forms. One occurs when a form is first loaded, and two when it’s submitted. These events provide a mechanism for triggering conversion pixels, but they don’t provide any of the values submitted with the form which makes it difficult to configure advanced matching with tools like Google Enhanced Conversions or the Facebook Conversions API through Google Tag Manager.

Custom Events in GTM

I’ve used the following custom script to work around this for the clients I work with. It provides the following Hubspot events in Google Tag Manager. Submit and Submitted events include a values property that includes the input values for the form that was submitted. reCAPTCHA and built-in hidden input fields are excluded, but every form field visible to the user will be there for you to reference.

Hubspot Form Ready

This event occurs when a Hubspot form has been loaded into a page on your site.

dataLayer.push({
  event: "Hubspot Form Ready",
  id: "f873fc3f-5607-4ec6-afa9-17365396637e"
})

Hubspot Form Submit

This event occurs when a Hubspot form submission starts, but hasn’t been successfully received yet.

dataLayer.push({
  event: "Hubspot Form Submit",
  id: "f873fc3f-5607-4ec6-afa9-17365396637e",
  values: {
    firstname: "Kevin",
    lastname: "Leary",
    company: "Kevinleary.net",
    jobtitle: "Web developer",
    email: "[email protected]",
    phone: "7814970885",
    country: "United States",
    state: "Alaska"
  }
})

Hubspot Form Submitted

This event occurs when a Hubspot form is submitted and the submission was received successfully.

dataLayer.push({
  event: "Hubspot Form Submitted",
  id: "f873fc3f-5607-4ec6-afa9-17365396637e",
  values: {
    firstname: "Kevin",
    lastname: "Leary",
    company: "Kevinleary.net",
    jobtitle: "Web developer",
    email: "[email protected]",
    phone: "7814300881",
    country: "United States",
    state: "Colorado"
  }
});

Custom Hubspot Tracking Script for GTM

The following custom script can be added to Google Tag Manager to track these Hubspot form submission events using the following steps:

1. Add a new Custom HTML tag
2. Name it Hubspot Form Events
3. Paste the snippet below into the HTML field
4. Expand the Advanced Settings options
5. Set Tag Sequencing to Fire a tag before Hubspot Form Events fires and then select the tag you have set up for the Hubspot analytics tracking script (something like https://js.hs-scripts.com/0000000.js)

If you don’t have any existing tags for Hubspot in GTM then you’ll want to set up the standard tracking JS first, this tag is what we’re adding to the Tag Sequencing settings. It could be loaded directly on your site, if it is, it’d be a good idea to move it into tag manager as part of this process.

<script>
/**
 * Hubspot Form Tracking
 */
(function (window, document) {
  // Serialize form data to array
  function serializeArray(form) {
    var arr = [];
    Array.prototype.slice.call(form.elements).forEach(function (field) {
      if (!field.name || field.disabled || ["file", "reset", "submit", "button"].indexOf(field.type) > -1) return;
      if (field.type === "select-multiple") {
        Array.prototype.slice.call(field.options).forEach(function (option) {
          if (!option.selected) return;
          arr.push({
            name: field.name,
            value: option.value,
          });
        });
        return;
      }

      if (["checkbox", "radio"].indexOf(field.type) > -1 && !field.checked) return;

      arr.push({
        name: field.name,
        value: field.value,
      });
    });
    return arr;
  }

  // Empty object check
  function isEmptyObject(obj) {
    return Object.keys(obj).length === 0 && obj.constructor === Object;
  }

  // Capture <form> data as JSON
  function formdata($form) {
    var array = serializeArray($form);
    var json = {};

    array.forEach(function (field, index) {
      var name = field.name;
      if (name.indexOf("recaptcha") !== -1) return;
      if (name.indexOf("hs_context") !== -1) return;
      if (name.indexOf("/") !== -1) {
        name = name.split("/")[1];
      }
      json[name] = field.value;
    });

    return json;
  }

  // Manually triggered "Hubspot Form Ready" (for reliability)
  var $hubspotForm = document.querySelector('form[id^="hsForm_"]');
  var formInput = {};
  if ($hubspotForm) {
    var id = $hubspotForm.getAttribute("id");
    id = id.replace("hsForm_", "");
    var _event = {
      event: "Hubspot Form Ready",
      id: id,
    };
    console.log(_event);
    window.dataLayer.push(_event);

    // Capture form inputs on submit
    $hubspotForm.addEventListener("click", function (event) {
      formInput = formdata(this);
    });
  }

  // Hubspot global events
  window.addEventListener("message", function (event) {
    if (event.data.type !== "hsFormCallback") return;

    var events = {
      onFormReady: "Hubspot Form Ready",
      onFormSubmit: "Hubspot Form Submit",
      onFormSubmitted: "Hubspot Form Submitted",
    };

    var customEvent = events[event.data.eventName];
    if (!customEvent) return;

    var _event = {
      event: customEvent,
      id: event.data.id,
    };

    // Capture input values from fields
    if (!isEmptyObject(formInput)) {
      _event.values = formInput;
    }

    // Cleared stored input fields on final submission event
    if (customEvent === "onFormSubmitted") {
      formInput = {};
    }

    window.dataLayer.push(_event);
  });
})(window, document);
</script>

Once this is in place and properly firing, you’ll see these 3 events available to work with in Google Tag Manager for all Hubspot form submissions.

References & Source Docs

• Hubspot Global Form Events
• Install Hubspot Tracking Code in Google Tag Manager