Hubspot Forms

Most Hubspot forms are not compatible with Ruler's automated form tracker.

You need to apply some additional tracking script to pages with Hubspot forms to capture these form submissions in Ruler.

The script below can be added using Google Tag Manager or your website CMS. For help and advice, speak to a member of the Ruler support team.

This script is in two parts - the first part is compatible with older (v3) Hubspot forms while the second is compatible with newer (v4) forms. If you aren't sure which to use, you can apply the full code block and it will collect form submissions made by v3 and v4 forms.

👍
This script will work with Hubspot forms embedded in iframes

<script type="text/javascript">
  // Part one - compatible with HubSpot v3 forms
  window.addEventListener('message', function(event) {
    if (
      event.data.type === 'hsFormCallback' &&
      event.data.eventName === 'onBeforeFormSubmit'
    ) {
      var submission = event.data;
      var payload = { form_id: submission.id };
      
      for (var i = 0; i < submission.data.length; i++) {
        var field = submission.data[i];
        if (field.name && field.value && field.name !== 'hs_context') {
          payload[field.name] = field.value;
        }
      }
      
      RulerAnalytics.trackConversionAsync(payload, '', '', 500);
    }
  });

  // Part two - compatible with HubSpot v4 forms
  window.addEventListener('hs-form-event:on-submission:success', function(event) {
    var hsform = HubspotFormsV4.getFormFromEvent(event);
    if (!hsform) {
      return;
    }
    
    hsform.getFormFieldValues().then(function(fieldValues) {
      var raPayload = fieldValues.reduce(function(obj, item) {
        var keyParts = item.name.split('/');
        var key = keyParts.length > 1 ? keyParts[1] : item.name;
        
        if (key === 'hs_context') {
          return obj;
        }
        
        obj[key] = item.value || '';
        return obj;
      }, {});
      
      raPayload.formId = hsform.getFormId();
      raPayload.conversionId = hsform.getConversionId();
      raPayload.submittedAt = new Date().toISOString();
      
      RulerAnalytics.trackConversionAsync(raPayload, '', '', 500);
    });
  });
</script>

This script can be applied to every page of your website, including pages that don't have a Hubspot form.

If you apply this script via Google Tag Manager it can be added as custom HTML and triggered on 'page load' or on 'DOM ready'.

📘
Need help?
Email the Ruler support team: [email protected]