Facebook custom pixel event - track someone who started to fill out form but does not submit

Question

Trying to figure out the best way to add a custom fb event via GTM that tracks when a person starts to fill in a payment form. The only info for form tracking that I have found is based off of form submissions. Does anyone have any insight on how I can accomplish this?

My ideas are:

1. track if the input area in the payment form is null or not
2. track clicks inside of the input area
3. track onkeyup events inside the input field

Thanks for the help!

Answer 1

To track when a user starts to fill out a form, you could have a form-level event listener that removes itself the first time it's called (so it only fires once).

Here's a small example:

var myForm = document.querySelector('#my-form');

var handleFirstInputEvent = function(event) {
  // call the Facebook pixel here
  // this line shows that the function only runs once
  document.querySelector('#output').innerHTML = new Date();

  // make sure the function is only called once
  myForm.removeEventListener('input', handleFirstInputEvent);
}

myForm.addEventListener('input', handleFirstInputEvent);

<form id="my-form">
  <input type="text">
  <select>
    <option>1</option>
    <option>2</option>
  </select>
</form>
<div id="output"></div>

If you also want to know when someone starts filling out a form but does not submit it, you could use a combination of a "first input" event like above and window.beforeunload.