Post

Track Form Submissions with Element Visibility in GTM

Prerequistes

  • Google Analytics installed on your gtm
  • Google tag added to your GTM

Get your Success Message

We are going to use your form success message as the element visibility trigger. As soon as the browser renders the form success message (which is hidden by default and only visible after the form is submitted) that is when we track it as a conversion.

  • You can target the success message by id or css selector so you want to check the html wrapper of the success msg and copy that.

In my case my success message html is:

1
2
3
4
5
6
<div
  class="wpforms-confirmation-container-full wpforms-confirmation-scroll"
  id="wpforms-confirmation-1109"
>
  <p>Thanks for contacting us! We will be in touch with you shortly.</p>
</div>

I’m going to use the id from the above wpforms-confirmation-1109. When that id is visible on the page, then the Trigger will fire.

Add Trigger

  • Select the element visibility tag
  • Choose id or css selector from drop down method selector.

Add Element ID

  • Ensure to use the . for the .css_selector, when targeting ids just the text is required.
  • Paste in the id or css value of the success message html wrapper
  • Select Once per page
  • Select minimum percent visible to be 1
  • As the message will be a “new” appearence on the screen select observe dom changes

visibility element trigger configuration

Preview Changes

  • Enter url where form is, test the form submission and see if the element visibility event was Triggered.

element visibility option in sidebar menu

Send this data to GA4

Create a Tag

  • Add New Tag

Add the following to create your tag

  • Google analytics
  • GA4
  • Add measurement id
  • Add event name of form_submission

When then event is sent google tag manager also sends the page url which is important for working out which page form was submitted on

Select Trigger

  • Select your visibility Trigger you created earlier
  • Save

Can I have Multiple Triggers?

If you have multiple forms you can have multiple triggers using a unique id for each form. Just keep adding more triggers. In Google analytics you can see which form was submitted.

Preview Test

  • Hit Preview
  • Fillout your form
  • In tag manager debugger window
  • Hit element visibility event in sidebar
  • Check your form submission tag was fired.

Submit your changes.

If everything worked in the preview submit your changes.

More Info

more info

This post is licensed under CC BY 4.0 by the author.

Comments powered by Disqus.