Pixel tracking for Exit Intent and Popup forms on HubSpot CMS

[alfgar]

**This applies to sites hosted on HubSpot CMS**

While you can fire tracking pixels on a "thank you" page for standard forms, this isn't an option when using Exit Intent / Popup forms, and sadly there is no supported mechanism to remediate the issue.

The following tricked worked for us and since I couldn't find any post about it, I thought I'd share.  I've abusively commented the caveats and logic, but if you remove the comments, this is quite short and sweet 🙂

/**
 * This is the "magic" function that we trigger WHENEVER a popup form is submitted.
 *
 * "WHENEVER" means a couple things:
 * 1. The event is fired even is validation then fails and the submission is actually cancelled, so
 *    we need to check for this. Luckily for us, in the case of popup forms, everythign is done
 *    dynamically, so that the JavaScript backing the form will remove it from the DOM once it has
 *    been submitted.
 *
 * 2. There is no distinction on the specific popup form we respond to, so we'll use the form data
 *    to make that determination - see the comments in the code below.
 */
var trackExitIntentPopupSubmission = function(e) {
  // First test: if the form that was just submitted no longer exists, it was indeed submitted
  // - otherwise the submission was cancelled and we don't want to do anything yet!
  if ($('form#' + e.target.id).length === 0) {

    // Grab the form data
    var formData = $(e.target).serializeArray();

    // Now test out the form data to figure out which tracking code to trigger. In our case, we had
    // two fields on the form, so we check that the form data array has 3 item (there is an extra
    // field for the HubSpot form context), and that the first two fields are the ones we expect. If
    // so, we can trigger the tracking code, otherwise we'll move on to the next test (our someone in
    // our team created a new popup form for which we will need to modify this code and add new,
    // custom tracking).
    if (    formData.length === 3
         && formData[0].name === "expected-field-1"
         && formData[1].name === "expected-field-2"
       ) {
      // Call gtag, other tracking pixel code - in our case, raising custom events for GA to specify
      // which form was submitted, etc.)
    }
};

// Hookup our event handler on document-ready
$(document).ready(function(){
  // Not my preferred solution but we have to hook ourselves up on the body because popup forms are
  // created dynamycally with JavaScript and will not be present when the document is first loaded:
  // only if they do pop up!
  //
  // We then filter on the dynamic target specifier:
  //    form.leadin-form-wrapper
  // - that's so we only catch submit events for popup forms (arguably, you could remove/widen this
  // and catch all form for custom processing, however mind that redirection to a "Thank You" page
  // on a standard form will most likely cause our dynamic tracking here to fail: the page will be
  // redirected long before all your tracking pixels have fired! So you should only use this for
  // forms that display an inline response.
  //
  // We use debounce (always a good idea) and set a short timeout to give HubSpot the time to
  // process and remove the form - since the user will be shown an inline message we do have some
  // time as the page won't be redirected or disappear too quickly.
  $('body')
  .on(
       'submit'
     , 'form.leadin-form-wrapper'
     , $.debounce( 250
                 , function(e) {
                     setTimeout(function() {
                         trackExitIntentPopupSubmission(e);
                       }
                     , 500)
                   }
                 )
     );
});

Hopefully this helps some of you out there.

Happy coding!

Seb

[jennysowyrda]

Thanks for sharing @alfgar!