Custom event tracking - form tracking

Ask questions & share learnings here
, ,
1

Hello,

I am tracking the form interactions of ninja form plugins using the code given by @simo_ahava in the 3rd lesson of the Advanced Google Tag Manager. It looks like the ‘submit’ doesn’t work on ninja forms causing the ‘abandonment’ event to fire even after a form has been submitted.
Does anyone know how to deal with these kind of forms?
Here is the code:

<script>
  (function() {
    var forms = document.querySelector('form');

    var callback = function(event) {
      if (event.type === 'submit') {
        window.removeEventListener('beforeunload', callback);
      }

      if (event.type === 'beforeunload') {
        window.dataLayer.push({
          event: 'formEvent',
          eventTarget: 'Form',
          eventAction: 'abandonment'
        });
        return true;
      }

      window.dataLayer.push({
        event: 'formEvent',
        eventTarget: event.target.id,
        eventAction: event.type
      });
    };
    
    forms.addEventListener('change', callback, true);
    forms.addEventListener('submit', callback, true);
    window.addEventListener('beforeunload', callback);
  })();
</script>

Last edited by @kmel 2023-08-07T13:06:24Z

2

Hi @kmel

GTM is not something I know too much about, but hopefully this article gets the ball rolling before we get an expert to answer your questions. Let us know if there’s anything else we can do to help.

3

Tagging @whoiseddie and @ryan3 here in case they have anything to add :smiley:

4

@logan and @sakib thanks a lot for share and tagging the right persons :pray: