How to measure the non-clickable span class with GTM?

Question

There is a contact form and when submitted it is not directed to a different page, it acts on the same page and gives a flash message that the forum has been sent.

 <span class="form-submitted">Thanks For Submttied</span>

The form-submitted class is unique class and only appears when the form is sent.

I need to track, when this element appears on page.

How I can track the measurement?

Answer 1

If I understand correctly, the element is displayed once the form is submitted. For that, GTM has a "Visibility trigger", that can trigger tags when the display property of the element is changed, or when it is dynamically inserted into the page.

Go to "Triggers", create a new trigger, select "Element Visibility" as trigger type, change "Element Selector" from "id" to "CSS Selector" and enter the class of your element.

If your element is inserted dynamically rather than made visible via CSS styles, you need to check the "Observe DOM changes" checkbox. Checking for DOM changes is an expensive operation, so you will get a warning that this might affect performance (although in my experience this is more of a theoretical concern).

Caveat is that the element needs to be visible to the user, i.e. inside the viewport. If it appears outside the viewport (e.g. in a small browser window) the trigger will not fire.