SOLVED

Re: Capture form start event for GA4 through Google Tag Manager

Go to solution
Elin_Pedersen
Level 2

Capture form start event for GA4 through Google Tag Manager

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?

1 ACCEPTED SOLUTION

Accepted Solutions
SanfordWhiteman
Level 10 - Community Moderator

Re: Capture form start event for GA4 through Google Tag Manager

 

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 
      }
   );
   
});

 

View solution in original post

4 REPLIES 4
SanfordWhiteman
Level 10 - Community Moderator

Re: Capture form start event for GA4 through Google Tag Manager

 

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 
      }
   );
   
});

 

Elin_Pedersen
Level 2

Re: Capture form start event for GA4 through Google Tag Manager

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
Level 10 - Community Moderator

Re: Capture form start event for GA4 through Google Tag Manager


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.

Elin_Pedersen
Level 2

Re: Capture form start event for GA4 through Google Tag Manager

Form visibility vs form submission is actually what we are looking to measure, in addition to form interaction, so for us this is the way the go. This fits with how we use forms on our landing pages, and the page layouts, and works better than the mkto.form.ready event that I based the trigger on initially. For example, we have some pages where the form sits at the top of the page without any other content (requests, gated assets etc). But we also have pages with quite a bit of content, that includes a form at the bottom. I would like to know how many people actually saw the form, regardless of where it sits on the page, and how many started filling it out, and ultimately submitted it . So will still look for form first interaction, using your code. Thanks again for your help here!