Google Tag Manager - Trigger on asynchronous form

Question

Is there a way within Google Tag Manager to track analytics with an asynchronous form that doesn't redirect to a confirmation page or other.

For example, the form when submitted gives you a brief confirmation message that pops up on the same page. I would assume that I need to set some trigger with the submit button?

I can't seem to find examples similar to that page linked above and a solution on how to track submissions.

Answer 1

1- Send data to the dataLayer

First step is to let GTM know that the form was submitted correctly. For that, you can use a custom dataLayer.push() into the callback function which is invoked upon a successful form submission. It could be like that:

function onFormSuccess(event) {
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'formSubmissionSuccess',
    formId: 'contactForm'
  });
  // Rest of the success callback code
}

2- Create a custom trigger for the form

Next step will be to create a trigger in GTM for the formSubmissionSuccess event. For that, we need to use:

• Type: Custom event
• Event name: formSubmissionSuccess
• Fires on: All custom events

3- Record the success

Final step is to create a tag with the action we want. It will be executed with the previous trigger. For example, we could create a Google Analytics tag to record the action as an event.