「GTM」Using Element Visibility for Form Submission Tracking

Table of Contents

Update time: January 13, 2025

This article introduces how to use element visibility in Google Tag Manager to track form submissions.

Meet Element Visibility

Element visibility trigger fires when a selected element becomes visible in the web browser’s viewport.

The setting interface for Element visibility is as follows:

Selection Method： is to locate a specific location, you can use the ID attribute or CSS selector:
- ID: Selects a single element based on the value of an element’s ID attribute.
- CSS Selector: Selects one or more elements based on a specified CSS selector pattern.
When to fire this trigger：Used to set the trigger frequency, there are three types:
- Once per page
- Once per element:
- Every time an element appears on-screen
Advanced：There are three advanced settings:
- Minimum Percent Visible: Triggered when the visible ratio reaches a certain value, the default is 50%.
- Set minimum on-screen duration: Triggered when the display time reaches a certain length, the unit is milliseconds.
- Observe DOM changes: Check this box to enable the trigger to track matched elements that appear as the DOM changes.

Case Presentation

Now we need to track the form submission in https://www.bbccss.com/contact-form-7. If the form submission is successful, it will be displayed：

If yours does not have a similar display, this method will not apply.

Step 1 : Set Up the Trigger

Move the mouse to track the position, and then view the page elements:

There is a class attribute, which is wpcf7-response-output, and can be positioned using a CSS selector.

In GTM , click「Triggers」——「New」——「Choose a trigger type to begin setup…」——「Custom Event」，Name it “Element Visibility—Submit Form”, and make the following settings:

The reason why the element selector is set to div.wpcf7-response-output is because this class is in a div.

Click Text contains Thanks is limited to triggering only if the display text contains Thanks.

Step 2 : Set Up the Tags

In GTM , click「Tags」——「New」——「Choose a tags type to begin setup…」——「Google Analytics: GA4 Event」，Name it “GA4-Event-Submit Form(Element Visibility) “, and make the following settings: