Oct 24, 20196:00 AM - edited Oct 24, 20196:09 AM
Member
Pixel tracking for Exit Intent and Popup forms on HubSpot CMS
**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) } ) );
});