Push datalayer of a form without submission

[NHarada]

I want to create an event on GTM/GA4 that triggers when someone starts a form but doesn't complete it. I also want to get information about which field/step the user stops filling out. 

I tried pushing a datalayer with a script I found online but even when the tag is pushing the datalater on my contact page I'm not being able to trigger the event "formAbandonment"

This is the code I'm using to push information via dataLayer:
<script> (function() { if (typeof document.querySelectorAll === "undefined") { return } window.addEventListener('beforeunload', function(e) { findUnsubmittedForms().forEach(function(it) { window.dataLayer.push({ 'event' : 'formAbandonment', 'eventCategory' : 'Form Abandonment', 'eventAction' : it.history.join(" > ") }) }) }) var history = {} document.addEventListener("change", function(e) { var target = e.target if (target && target.tagName && (target.tagName.toUpperCase() == "INPUT" || target.tagName.toUpperCase() == "TEXTAREA" || target.tagName.toUpperCase() == "SELECT")) { var readableName = getNiceFieldName(target) var form = target.form if (form && readableName) { var formName = form.getAttribute("id") if (typeof history[formName] == "undefined") { history[formName] = [] } if (history[formName].slice(-1) != readableName) { history[formName].push(readableName) } } } }) function findUnsubmittedForms() { return Object.keys(history).filter(hasNoFormSubmitEvent(window.dataLayer)).map(findFormFromHistory).filter(notEmpty) } function hasNoFormSubmitEvent(dataLayer) { return function(id) { return dataLayer.filter(isFormSubmitEvent).map(getFormName).indexOf(id) == -1 } } function isFormSubmitEvent(e) { return (e.event === 'gtm.formSubmit' && e['gtm.elementUrl'] !== 'https://www.facebook.com/tr/') } function getFormName(e) { return e['gtm.elementId'] } function findFormFromHistory(id) { return { name: id, history: (history[id] || []) } } function notEmpty(form) { return form.history.length > 0 } function getNiceFieldName(target) { var fieldLabel = findFieldLabel(target) if (fieldLabel) { return fieldLabel; } var fieldTitle = findFieldTitle(target); if (fieldTitle) { return fieldTitle; } return findInputName(target); } function findFieldLabel(target) { var inputId = target.getAttribute("id"); var label = document.querySelector('[for="' + inputId + '"]'); if (label) { return label.innerHTML.trim(); } } function findFieldTitle(target) { var container = target.closest('.field-border'); if (container) { return container.querySelector('.field-title').innerHTML.trim(); } } function findInputName(target) { return target.getAttribute("name") } })() </script>

The tag is triggering but it's not generating any event. I'm using this tutorial but might be that it doesn't apply to hubspot forms https://www.getfishtank.com/insights/form-abandonment-tracking-in-google-analytics-4

[TomM2 · Accepted solution]

Hey @NHarada form input data isn't available as a callback in HubSpot forms. 

You'll need to create something along the lines of live input monitoring on your forms. However this would be a JS issue and completely outside of the HubSpot functionality. 

Personally I wouldn't recomend this as it circumvents any privacy and consent laws I'm aware of, but if you wish to do it that would be how to achieve it! 

[NHarada]

Tom, thanks for your thoughts. I'll keep this in mind. I don't want to mess with user's privacy for sure.