How to set up a custom dimension with GA+GTM to distinguish pages with and without buttons

Question

GOAL

Hi to everyone reading this. Using Google Analytics and Google Tag Manager, the goal I am trying to achieve is to set up a custom dimension that would allow for distinguishing between pages that contain buttons and pages that don't contain buttons as shown in the example table below.

This would allow me to know that a page such as PAGE B has no button clicks because it has no buttons and that a page such as PAGE D has no button clicks because there is something that needs to be fixed or improved.

ATTEMPTS MADE AT ACHIEVING THE GOAL

In Google Analytics

1. A custom dimension was created: scope hit , active yes, and the index number of 1 was noted.

In Google Tag Manager

1. A variable named "Button Visibility" was created: variable type element visibility, element selector buybtn (class of the button), output type true/false, minimum percent visible 50, format value convert true to yes, convert false to no.

   2. The Google Analytics Settings variable was edited to have one custom dimension with index number 1 and the dimension value {{Button Visibility}}

Additional information

There are other tags and triggers that were set up and work correctly as the daily button click events are being tracked by GTM and reported by GA which means that the buttons are entering the user's viewport, but for some reason, when viewing GA and choosing the custom dimension, there is no data and when previewing the website via GTM, the button visibility variable is null even though there are several buttons present in the viewport. I've also tried changing the scope to session, but no tracking happens and the button variable visibility remains null.

SOLUTION

If you have any suggestions on how to solve this issue, preferably without using the Data Layer, or if you could point me in the right direction via tutorials, I would appreciate your support.

Answer 1

Make sure in the Variable config that you include the dot .buybtn for Element Selector.

Also the Element Visibility Variable when using a true/false boolean value refers to whether the selected element is visible when the variable is referenced
- it will return null as the value, if the page does not contain an element with the specified class buybtn.

Taking the above into account, I would change the format values
true to visible
false to not visible
null to no button