Pixel tracking for Exit Intent and Popup forms on HubSpot CMS

Highlighted
New Contributor

**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

 

1 Reply 1
Community Manager

Thanks for sharing @alfgar


Did my post help answer your query? Help the Community by marking it as a solution
Reply
0 Upvotes