I'm using Google Tag Manager to send an event to Google Analytics when you click an <a> or a<button> tag, which works fine.
However I also have an <a> tag wrapping an <img> and the event is not firing because the element getting clicked is not the <a> tag, it's the <img> tag.
I've tried to move my .sau-btn to the <img> tag but this doe not work either. I've also tried to move my a tag to act as a hotspot on top of it.
<v-img :src="require('#/assets/img/sales-banner-enterprise.jpg')" class="gtm-btn" data-gtm-category="Sales Offer" data-gtm-action="Test Link" data-gtm-label="Image Real Link One" alt="alt tag"></v-img>
How get I get my event to fire when you click anything inside of the class that it is holding?
If you're looking for the parent anchor tag to not capture the event down to the image tag, you can call event.stopPropagation() on it.
By default, events do get to the most nested element through the capturing phase. Here is a link to the API :
https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation
Related
I'm making an element visibility tag in tag manager, this bit appears regardless if the form was submitted or not
<div class="et-pb-contact-message">
after a form has been submitted it changes to
<div class="et-pb-contact-message">
<p>Thanks for contacting us</p></div>
I've attached a screenshot of the tag
I'm trying to set up a click event for a certain button in GA4 Analytics in GTM, but the event does not fire in the preview.
The button has a specific ID. I can see the ID in the DOM, I can see that the gtm.element contains the ID in the API call, but the debug information shows that the Click ID does not match.
I've tested with my front-end developers that the event click events are propagated through the DOM. On a simple image where I've set up the click event in the same way the click event is properly registered.
Any insight in how to solve this is greatly appreciated.
From you screenshots. Looks like GTM detect the click is fired on the <span> inside the button you want.
For this kind of case. I would suggest to use click element as your trigger.
Here is the selector
button#ga_welcome_start_print_job, button#ga_welcome_start_print_job *
This means we want to track the click for the button and all the element inside it.
TLDR; wrap text in an attribute that has id property. Make a custom variable in GTM, of type 'Auto Event Variable' -> Variable Type = Element ID. Then assign to tag.
I had a similar situation. I was using React MUI's Button and I noticed that the id attribute wasn't actually being assigned to GA4's elementId. My guess is the id attribute wasn't 'bubbling' up or it was being processed somehow in MUI which conflicts with GA4. Anyways, I literally just started using analytics, so here's what I did to get it working.
I had a MUI button with the following setup
<Button
id='location-filter-tag'
className='reco-filter-button'
variant={searchState === 'cumulative' ? "contained" : "text"}
size="small"
onClick={() => {
setQueryType('cumulative');
}}
>
<h6 className="some-class">
Location
</h6>
</Button>
Checking the the push event gtm.click below, you can see the id='location-filter-tag' is concatenated into one big string. under gtm.element.
At the time, the gtm.elementId was an empty string (image is of working instance)
I tried to hook into gtm.element and trigger the tag using contains = location-filter-tag but that didn't work. So I moved the id property to the child attribute to get it to register with GA4's gtm.elementId
<h6
id='location-filter-tag'
className="text-overflow reco-filter-text"
>
Then in google tag manager, I setup a variable like so:
Then I assigned it as a trigger. This is my location trigger
hope that helps.
In Google Tag Manager, I set it up to track some data from clicks on elements that contain a certain class and record an event in Google Analytics. It seems to work just fine for text links, but I run into problems if there is another tag inside the link for an image, icon, etc. For example, the following would work fine:
Click here
But this won't work:
<a href="link.html" class="track_this" data-tracking-info="my info">
<span class="icon click-here"></span>
</a>
And something like this will work if you click on the text, but not if you click on the icon:
<a href="link.html" class="track_this" data-tracking-info="my info">
<span class="icon click-here"></span> Click Here
</a>
I know that I could add the "track_this" class into the span for the icon, but it gets REALLY messy in more complicated scenarios. Like imagine having a thumbnail image with an icon and some text below it all wrapped into one a tag. I'd have to put that class and the tracking info on the image tag, the span for the icon, the div for the text, etc.
Is there a better way to do this? Thanks!
I could speak more definitively on this if I could see how your GTM was setup, but my guess is that you are using an "All Elements" trigger to capture these link clicks, and filtering on "Click Classes" or "Click Element". The issue with this is that, when the link tag (<a></a>) contains another element, such as a <span>, even though that triggers your link to open, the element that GTM records as receiving the click is the span, not the link.
If you want to fix this, there are two options, either of which should work.
The first is to switch to using a "Click - Just Links" trigger type, and filter on the class "track_this". For this trigger, GTM lets click events "bubble" up until they hit a link element, and then it tests your trigger against that link, instead of the element that was clicked on. Simply using this trigger type should work for all three of your samples.
The other option is to use a more advanced filter with the "Click - All Elements" trigger. If you modify the trigger so it fires on "Some Clicks", and then make the condition that "Click Element matches CSS selector:"
.track_this, .track_this *
then it will register a click on any element that has the track_this class, as well as a click on any element inside those elements.
This problem can also be solved using a little bit of javascript and a 'User-Defined Variable' in Tag Manger. This solution is for handling more complex UI components.
Explanation
Google Analytics + Tag Manger record the very specific Element or Node that is clicked by the user. That element is stored in GA as a "Click Element" variable. So in more complex UI situations it is possible the user could click on multiple elements for a single action to occur. For example. Here is a button with an icon and text.
<div
class="button"
id="PARENT_ID"
onClick = () => ...
>
<span id="CHILD_ONE">
icon
</span>
<span id="CHILD_TWO">
text
</span>
</div>
In this scenario it is possible for the user to click on any of the three id's above. All three will activate the onClick action. However, Google Analytics doesn't care about the onClick. It only cares about what specific element was clicked. IE: PARENT_ID, CHILD_ONE or CHILD_TWO.
The "User-Defined Variable" Solution.
In Tag Manager go to the 'Variables'. (Left column menu.)
Add a new 'User-Defined Variable'.
Select the variable type as 'Custom JavaScript'.
Add:
function() {
if ({{Click Element}}.id != "") {
return {{Click Element}}.id;
}
if ({{Click Element}}.parentNode.id != "") {
return {{Click Element}}.parentNode.id;
}
if ({{Click Element}}.parentNode.parentNode.id != "") {
return {{Click Element}}.parentNode.parentNode.id;
}
return {{Click Element}}.parentNode.parentNode.parentNode.id;
}
This script will search the DOM up three levels up from any child Element (Node) and look for a matching Tag id.
NOTE: Click Element is the variable name used by Google Analytics. It's the gtm.element the user clicked.
Setup Tag Manager Configuration to use your new 'Custom Variable'.
Now use the parent id for setting up your Triggers. In my example PARENT_ID will be the returned id even if a user clicks on CHILD_ONE or CHILD_TWO. So select 'contains' PARENT_ID.
------ Further Considerations -----
This solution only works within three parent levels. Also while unlikely it is possible to capture an element out of scope of what is intended.
In more complex UI components it might be preferable to add the Tag id's to every Element. If you are using a front end framework like React I would suggest making the Tag Id a dynamic prop and add it to all child components.
NOTE: Google Analytics changes often. This is a GA4 + Tag Manager solution.
style use pointer-events:none can't tracking by inside.
<a>
<svg id="gtm-track">
<rect style="pointer-events:none"> .... <rect/>
<path style="pointer-events:none"> .... <path/>
<svg/>
<a/>
I have created a script which works fine, but i am just stuck on one issue that i cannot figure-out how to tackle it. So I wanted your help guys.
I just want to click a button but the thing is there are several buttons having the exact same class on the page. So the script does is it just clicks on the first button that it finds on the page. I want to skip that first button and click the second button.
So in short
button 1 <-- skip
button 2 <-- click
(both have same class="buttons")
below is the code
TAG POS=1 TYPE=SPAN ATTR=TXT:NEXT
WAIT SECONDS=6
TAG POS=1 TYPE=INPUT:TEXT FORM=NAME:NoFormName ATTR=ID:knowledge-preregistered-email-response CONTENT={{!COL4}}
TAG POS=1 TYPE=SPAN ATTR=TXT:NEXT
WAIT SECONDS=7
TAG POS=1 TYPE=BUTTON ATTR=CLASS:yt-uix-button*yt-uix-button-size-default*yt-uix-button-default*yt-uix-button-empty*yt-uix-button-has-icon*no-icon-markup*comment-action-buttons-renderer-thumb*yt-uix-sessionlink*sprite-comment-actions*sprite-like*i-a-v-sprite-like*
WAIT SECONDS=7
This is the button class
> ATTR=CLASS:yt-uix-button*yt-uix-button-size-default*yt-uix-button-default*yt-uix-button-empty*yt-uix-button-has-icon*no-icon-markup*comment-action-buttons-renderer-thumb*yt-uix-sessionlink*sprite-comment-actions*sprite-like*i-a-v-sprite-like*
So i want to skip the first button having this class and move on to the next one and click that.
Damn im so silly. I did it myself :) .. just changed TAG POS=1 to 2
have a page with many links.
when any link is clicked, the page corresponding to that hyperlink should open within a specified area on the same page, that is the "div content"
yes i can use iframe
but can i make a div target of the hyperlink?
please no jscript only html and asp.net
You can use anchors and use it to target your iframe
Google
<iframe name="thisframe" src="http://www.yahoo.com"></iframe>
As far as i know, you can never target *div*s unless you use javascript to manipulate the DOM, though. But if you really REALLY had to use the HyperLink control instead, the you can use the following code instead of using the anchor:
<asp:HyperLink ID="uxHyperLink" runat="server" Target="thisframe" NavigateUrl="http://www.google.com">Google</asp:HyperLink>
<iframe name="thisframe" />
you can use html bookmarks. For an example click on this link
http://www.matlus.com/quartz-for-aspnet/#videos
If will not only take you to a page but scroll your browser down to the "videos" section onthe page.
In the url (the link) notice the /#videos. That is the bookmark. On the target page in question I have an anchor tag with it's name attribute set to "videos"
[a name="videos"][/a]
I'm using square brackets above because of the editor not allowing anchor tags. So basically, just above your "target" div, place an anchor tag and set the "name" attribute. Then you your link simply append the /#anchorname at the end of the url.