I have accordions in my website and I am using GTM to track Clicks using GTM triggers. Below is the inspect screenshot of the accordion:
And my GTM settings to track click based on the class name is as below:
The problem is, on the preview mode, clicks are detected but the element and classes are empty as below:
The gtm.elementclasses, gtm.elementid are all empty. How can I fix this?
I think it is because the GTM detecting the click target is the h3 dom in the div you want right?
I would suggest to change the trigger to
Click Element -> match css selector -> "div.key-activity__grouping, div.key-activity__grouping *"
This will capture all the click event inside the div.
Does this meet your requirement?
Related
I have created a couple of click triggers in Google Tag Manager to track some areas of my site and I was surprised that the figures were so low. I have realised why but couldn't find a way around it.
Code example:
<li id="myUniqueID"><i class="material-icon">mail_outline</i></li>
If I create a click trigger on "myUniqueID", it only captures the clicks in the area outside the space occupied by the icon. If I click right into the icon, the listener is not fired.
Is there a way to capture all clicks based on a unique ID or class that would take clicks of all sub-elements into account.
It's probably something stupid that I have overlooked.
Thanks!
Change your trigger to Click All Elements that Match a CSS Selector.
As a selector, try using #myUniqueID, #myUniqueID *
The second selector selects all descendants/children of whoever has the myUniqueID id.
I want to fire a GTM trigger based on the div the button is in.
The Tag Details show the Click Element condition is not met:
But the Variables on the exact same Click show the Click Element does contain 'div.website-notice':
I cannot figure it out. Please help :)
Updated GTM Debug output is misleading. Click Element value is HTMLElement not a string so you have to use matches CSS selector condition instead of contains in your trigger.
You can use "match css selector" as contain.
The click element seems not working the same way as other built-in variables.
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?
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.
Is there a way to activate a trigger in Google Tag Manager once a class appears visible on the page after a button click?
For example I want this error to populate after the user clicks a call to action:
The error bar in the yellow does have a CSS class to reference but unsure of the triggers to use to make this happen.
Any help would be awesome, thank you!
You can use Element visibility trigger with CSS selector that match this class.
I have the following Code Structure:
<div id="container">
Link
</div>
I have managed to create Tags that fire when Links are clicked that have an ID. But it seems to be a big hazzle to add an ID to each link and create a tag for each link.
I would like to create one tag that fires whenever a link within the container of the given ID is clicked. How exactly do I do that with the given options from Tag Manager? I have already created a Variable with the container ID. However I am not sure how to set up the Trigger.
If you want to track clicks on all links inside #container then your CSS selector should be #container a.
In GTM your trigger should be like that: