Element visibility in GTM: a handy feature for PPC-experts

Setting a trigger to track the visibility of items on a website

Choose trigger type:

Set up trigger fields:

Choose the method of selection: using the ID or CSS.
ID identifier – the trigger will act when viewing a specific CSS selector.
The obvious difference between this two is that you can add multiple element selectors to the CSS selector string, separated by commas.

The trigger can act when we see each of them in a browser window.

Tip.

ID selector works best if you have only one item to track.
Define trigger launch rules:

Once per page – the trigger will be launched only on the current page when the first element matches the ID or the selector string enters the viewport.

Once per item – the trigger will be launched once for the identifier, but several times for the selector. For a group, the trigger will be launched once for each selector.

With each appearance of an element on the screen: the trigger is always triggered on a specific element.

Additional settings:

• minimum percentage of visibility – indicates how many percent the element must be reflected for the trigger to launch;
• minimum time of visibility – indicates how long the item in milliseconds should be within the visitor’s line of sight;
• DOM changes registration. The setting tracks items that are not initially on the page (for example, pop-up forms). If your content is inserted dynamically, check the box and such items will become visible.

As an example, take the submitting of a filled out form for a gift certificate order. To do this, we need to create a trigger with the "Element Availability" type and a tag that will transmit data to Google Analytics when the user sees a message about the successful form submission.

Website Form:

View code in the developer panel:

In our example, we can configure the trigger for both the ID and the CSS selector (in two ways).

For ID:

For CSS selector (first method):

Note that the attribute is written in GTM with a dot before the class name.

CSS selector (second method):

Next, we configure the tag for transfer data given in Google Analytics.
Trigger type: Universal Analytics.
Tracking type: Event, Category and Action we name at our discretion.
In our case, the Id and dot are added to testing.

Using the same example, 2 more triggers were created for the CSS selector. For each method.
Check how our triggers and tags work through Google Analytics in GTM view mode and in real-time.

Select any of the options to set a goal:

But don’t forget to import your customized goals into Google Analytics 🙂