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.
Related
I have the following button, for which I want to create a Google Tag Manager trigger (but I seem to be unable to do so):
<div class="class-a class-b">
<form class="class-c" action="https://www.example.com/test" method="get" onclick="window.open(this.action); return false;">
<button type="submit">Open now</button>
</form>
</div>
Which type of trigger should I use (the auto-event variable does not
work)?
How would I need to configure the trigger to track a button
click?
What would I need to do in order to also catch the action
value (i.e. the URL https://www.example.com/test)? Would I need Javascript for that to bind to its submit? If so, how?
You want to use the Any Click: All Elements.
In the trigger, you enable the "Some clicks" Then Click Element -> Matches CSS Selector -> button[type="submit"]
Optionally, you can add more conditions there.
Use this trigger in a new Tag. Use the Universal Analytics as a tag type.
Tag settings: change it from Pageview to Event. Now you have three fields for Category, Action and Label of your event.
Then you want to set your Action as a URL. Start typing {{ in that field and pick the variable to populate there like so:
That should be it.
Update to address the actual html given:
So just return this value in your CJS var:
{{Click Element}}.parentElement.getAttribute("action");
It should work for the exact html situation that you've provided.
Then use this CJS in your tag and you should be good.
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'm working on Google Tag Manager/Analytics for a site, here's an example page that a tag is being fired on:
https://www.forktrucktraders.co.uk/listings/refurbished-combilift-multi-directional-gas/
The tag is fired when the "Send Message" button on the contact form is clicked:
https://imgur.com/a/qTPb3Ci
Right now I've got the event's action returning the URL of the current page the form was sent from, but I'd like to know if it's possible to get the href from the "Visit dealer's website" link on the page, as it would give a faster idea of which dealer the listing is coming from. Probably a long shot to make this happen solely through Tag Manager (if not possibly just a hidden bit of data that just has the dealer's name in on the "Send Message" button) but I'd appreciate any input.
You most certainly can. Off the top of my head something along the lines of the following should work...
It depends on whether you prefer just having the url or breaking it down further.
Just the URL:
Create the following in a custom HTML tag within GTM
<script>
//This selects your desired href:
var dealerURL = document.querySelector(".stm-dealer-image-custom-view a").href;
//This pushes the value into the dataLayer temporarily for use later:
window.dataLayer.push({
event: 'formSubmit',
dealer: dealerURL
})
</script>
Ideally, this should be fired on page load of all your listings pages.
Next create a new User-Defined Variable of the dataLayer var type
within GTM corresponding to dealer, this will store the value to be
pulled through in your event.
Now just change your event action to {{dealer}} (or whatever you
ended up naming the datalayer variable), and this value should be
pulled through in your event.
Getting the dealer name:
Now presuming the href format is always the same across the site you could split this by a delimiter instead:
var dealerURL = document.querySelector(".stm-dealer-image-custom-view a").href;
var dealerSplit = dealerURL.split("/");
var dealer = dealerSplit[4];
The above would leave you with a variable containing the string 'hitec'.
This however is quite prone to breaking if the page path does not always follow the same format, as such it would be better to use RegEx instead.
To answer your specific question, you would need to create a variable to target that specific link element that contains the dealer's website's url. The simplest way is probably to add an id to the <a> element and create a variable in GTM to track it.
I had a quick look at your site and I think you have more problems with the form.
Your even triggers without validating the form, this would lead to extra events.
The event category, action and label could use some work in organizing it to help you analyze the data
You also have a mix of gtag.js and GTM snippet on the page, I would say this is not normal practice, usually, GTM is enough. You can contact me through my profile if you'd like to chat more about it.
I use tag manager's "click listener" to collect clicks on a website form, which I then analyse in the "events" section of google analytics. This all seems to be working fine, apart from with an important button that's part of the page template...
If you check out https://lptent.worldsecuresystems.com/pop-up-gazebos.html and click "Configure this Gazebo" you'll see a blue button appear in the header of the form which reads "chat to an expert". This is the button/element we are struggling with.
Any help or advice on tracking clicks on this element would be greatly appreciated!
Cheers,
Andrew
The href="javascript:void(0);" is preventing the event from bubbling up through the DOM.
Try instead adding a dataLayer.push({}); in your click function:
jQuery("a.lp_box").click(function(){
var rel = jQuery(this).attr("rel"),
grel = rel.split("#")[1];
jQuery("#"+grel).css("top", "60px" ).fadeIn(500);
dataLayer.push({'event': 'chatClick'});
bg_lightbox();
});
And then create your event in GTM using {{event}} equals chatClick as your rule for that event.
with Google Tag Manager Auto-Event Tracking (dataLayer.push), I want to track this information:
the name of the links clicked in my menu, for example:
<ul class="my-nav">
<li>
Anoter site
</li>
</ul>
so: 'Another site'
I want to push the name of the parent link name of the clicked link with this structure:
<li>Linkname
<ul>
<li>
Website name
<li>
<ul>
<li>
So there: I want 'Linkname'
the 'status' of a toggle link - whether the element has a class 'open' or not
<a class="content-toggler open" href="#">Hide all the content</a>
I have read through many tutorials and walkthroughs, but most talk about tracking links that go to external sites in general, or submit events and so on.
Here I want to track the name of a link in a certain dom tree.
And I want to track the element 'status' with a certain class.
Please explain how this can be achieved, or refer me to articles that have an example to
this kind of events, not only to general walkthroughs.
Many many thanks!
Let's start with the last one.
1) What you have to do it to create a link click listener (new tag-->tag type-->Link click listener) and run it on all the pages (or only the pages where it is relevant). This will generate an event for GoogleTagManager that you an use in a rule.
2) Create a rule like the following. This will trigger an event that we will do in the next stage
3) Set an event like the following. Note that I added an element id. If you have more than one toggle open link, you need to find a way how to distinguish between them on google analytics. ID could help you. Also note that using gtm you can only use the classes, not one specific class. (as far as I know)
Now let's go back to the first one. You can use the same method used here above, but instead of putting the {{element classes} as the value of the event, you can create a new macro that will employ the inner text of that link (gtm.element.innertext). On how to do it, read here: http://www.swellpath.com/2013/10/google-tag-manager-inspecting-andconfiguring-auto-event-tracking/
For the second one, you need the innertext of a third level parent. I'm not sure how to implement it other than using javascript that will call an event through the data layer.
So I would suggest a solution like the following:
Create an event on GTM that listens to events that are pushed via the data layer.
On how to do this, go to this post: http://moz.com/ugc/tracking-google-analytics-events-with-google-tag-manager
Start with "Tracking Google Analytics Events with GTM: The Second Way" and do steps: 1,2 and 3.
Create javascript code that is executed when the link is clicked. This JS will take the text of that 3rd parent element whenever that link is clicked. Again, I suggest to provide IDs so the task will be easier.
Then, the same JS code should then run this code
dataLayer.push({ 'event':'GAevent', 'eventCategory':'Navigation Clicks', 'eventAction':'Menu Item Click', 'eventLabel':'Outbound Click', 'eventValue:***YOUR 3RD LEVEL PARENT TEXT HERE***});
Then the event with the value is registered via google analytics.
Note that all the names I gave for the event values in my reply are based on my understanding of your needs. You will need to adjust them to what you want to achieve with this event tracking.