Creating a trigger "Element Visibility" ("Form Submit" tracking conversion as an example)

Attention: This guide does not provide a 100% step-by-step solution! Step 5 is unique to each website. You will need to find a piece of code (coding skills are not required).

Attention: This guide does not apply to forms with a "Thank you" page (see how to track them) and forms in iframes (most often forms in iframes are added to the site through a third-party application and cannot be tracked).

What you need:

• Admin access to the GTM container

• The GTM code must be added to your site (see how to add the GTM code to your Shopify or WordPress site).

Steps (see screenshots below):

Step 1: Log into your GTM account. If this is your first trigger, go to the "Variables" and click the "Configure" button in the Built-In Variables section. (If no, go to Step 3)

Step 2: Check off any variables you might need (all Clicks, Percent Visible, etc.)

Step 3: Go to the "Triggers" section. Click the "New" button.

Step 4: Click on "Trigger Configuration" and select the "Element Visibility" trigger type.

Step 5: Go to the site and fill out the form you want to track.

Note: If, after successfully submitting the form, you navigate to a new page (confirmation page or Thank You Page), then you do not need GTM to track this form. Check out the article "How to track 'Thank You' Page?"

Step 6: After submitting the form, you should see a confirmation message. In our case, it was "Thanks for contacting us! We will get in touch with you shortly.". Right-click on the message and select "Inspect".

Step 7: On the right side of the screen, you will have a console with a highlighted message code. You need to find the ID or Class of the element (a piece of code) that will be used as a trigger. Choose a unique ID or Class that only appears with this message. In our case, this is "id = gform_confirmation_message_1".

Note: Sometimes, the message may not have its own ID, then you will have to choose Class. But even this may not be obvious enough. Therefore, you may need to ask someone familiar with coding for help. The main thing to remember is that you need to find a unique element that appears only upon completing the required form.

Step 8: Go back to the trigger settings. In the "Selection Method" field, select an ID (you may have a Class). Paste your element code into the Element ID field (in our case, it is gform_confirmation_message_1). If you have a Class, then you need to put "." before the code (it will look something like ".gform_confirmation_message_1").

Step 9: "When to fire this trigger" - choose "Every time an element appears on screen"

Step 10: "Minimum Percent Visible" - write 1

Step 11: Check "Observe DOM changes ". Give a name to your trigger and click Save.

Done. You can check your new trigger only by adding it to the tag and conducting a test.

See "Track a form submission on a website with a GTM tag (Element Visibility)" or "FB Ads - How to track any event on the site (using GTM)?"

See Screenshots:

Step 1: Log into your GTM account. If this is your first trigger, go to the "Variables" and click the "Configure" button in the Built-In Variables section. (If you've done this before, go to Step 3)

Step 2: Check off any variables you might need (all Clicks, Percent Visible, etc.)

Step 3: Log into your GTM account. Go to the "Triggers" section. Click the "New" button.

Step 4: Click on "Trigger Configuration" and select the "Element Visibility" trigger type.

Step 5: Go to the site and fill out the form you want to track.

Step 6: After submitting the form, you should see a confirmation message. In our case, it was "Thanks for contacting us! We will get in touch with you shortly.". Right-click on the message and select "Inspect".

Note: If, after successfully submitting the form, you navigate to a new page (confirmation page or Thank You Page), then you do not need GTM to track this form. Check out the article "How to track 'Thank You' Page?"

Step 7: On the right side of the screen, you will have a console with a highlighted message code. You need to find the ID or Class of the element (a piece of code) that will be used as a trigger. Choose a unique ID or Class that only appears with this message. In our case, this is "id = gform_confirmation_message_1".

Step 8: Go back to the trigger settings. In the "Selection Method" field, select an ID (you may have a Class). Write your element code into the Element ID field (in our case, it is gform_confirmation_message_1). If you have a Class, then you need to put "." before the code (it will look something like ".gform_confirmation_message_1").

Step 9: "When to fire this trigger" - choose "Every time an element appears on screen"

Step 10: "Minimum Percent Visible" - write 1

Step 11: Check "Observe DOM changes ". Give a name to your trigger and click Save.

Done. You can check your new trigger only by adding it to the tag and conducting a test.

See "Track a form submission on a website with a GTM tag (Element Visibility)" or "FB Ads - How to track any event on the site (using GTM)?"