Capture form start event for GA4 through Google Tag Manager

Forum|Forum|3 years ago
November 10, 2022
1 reply
6471 views

Is there a way to capture the event when a person clicks inside or starts to input a marketo form field, so that I can build a trigger and tag based on this in GTM? Recently, GA4 Enhanced Measurement introduced form submissions events, one of which is "form_start" that triggers when someone actually starts filling out the form. This is what I would like to mimic for our marketo forms. However, the form listener cHTML code that I have (which I've snagged from this community), does not include any event as such. The closest I could get was mkto.form.ready, but that isn't quite right. So does anyone know if there is anything that can be added to the form listener to capture that very first form interaction?

Marketo

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

Best answer by SanfordWhiteman

MktoForms2.whenReady(function (mktoForm) {
   let formEl = mktoForm.getFormElem()[0];
   
   formEl.addEventListener("change", function (e) {
        console.log("you started the form (as in 'changed a value')");
      },
      { 
        once: true 
      }
   );

   formEl.addEventListener("focus", function (e) {
        console.log("you started the form (as in 'focused a field')");
      },
      { 
        capture: true,
        once: true 
      }
   );
   
});

SanfordWhitemanAccepted solution

New Participant

MktoForms2.whenReady(function (mktoForm) {
   let formEl = mktoForm.getFormElem()[0];
   
   formEl.addEventListener("change", function (e) {
        console.log("you started the form (as in 'changed a value')");
      },
      { 
        once: true 
      }
   );

   formEl.addEventListener("focus", function (e) {
        console.log("you started the form (as in 'focused a field')");
      },
      { 
        capture: true,
        once: true 
      }
   );
   
});

E

ElinPeAuthor

New Participant

Thank you, Sanford! We did manage to get this to work with a few tweaks, more specifically by adding this to our existing form listener:

  MktoForms2.whenReady(function (mktoForm) {
   var formEl = mktoForm.getFormElem()[0];

   formEl.addEventListener("focus", function (e) {window.dataLayer.push({
          "event" : "focus"
        });
        
      },
      { 
        capture: true,
        once: true,
      }
   );
});

That said, we actually ended up with another solution, listening for visibility of the form. I found that we could use an Element Visibility trigger in GTM for this instead, and set it to fire when the form element ID is visible at a certain percentage. This seems to work perfectly fine so far, and is more accurate for what I'm after. At first I was thinking that form interaction is the way to go, but then I started thinking this wasn't ideal for pre-filled forms, which makes form visibility a more reliable measure for us.

SanfordWhiteman

New Participant

Thank you, Sanford! We did manage to get this to work with a few tweaks

Right, it was expected that you’d call whatever other functions the business required (not just GTM but anything else). I was showing how to correctly listen for the events.

That said, we actually ended up with another solution, listening for visibility of the form. I found that we could use an Element Visibility trigger in GTM for this instead, and set it to fire when the form element ID is visible at a certain percentage. This seems to work perfectly fine so far, and is more accurate for what I'm after. At first I was thinking that form interaction is the way to go, but then I started thinking this wasn't ideal for pre-filled forms, which makes form visibility a more reliable measure for us.

Can’t say I agree. The visibility of the (empty) <form> element doesn’t mean there’s meaningful content shown to the user.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded