I have a button
<button data-z="myvalue">
click
</button>
which clicks i want to track in Google Analytics (Universal - analytics.js).
I try it with
<button data-z="myvalue"
onClick="ga('send', 'event', 'clickout', 'buttonclick', window.location.href, getAttribute('data-z'));>
click
</button>
With window.location.href i get the current URL (work), and with getAttribute('data-z') i want to get the myvalue from data-z (doesn't work).
Any help is appreciated!
PS: JQuery based solutions are welcome!
You are not telling your getAttribute method to which element the attribute belongs - getAttribute does not exists on its own, it is a method of a DOM object (your button in this case).
Since you are using inline Javascript the DOM object will be available by using the "this" keyword in the click function to call the getAttribute of the button:
<button data-z="myvalue"
onClick="ga('send', 'event', 'clickout', 'buttonclick', window.location.href, this.getAttribute('data-z'));>
click
</button>
Much less expensive than jQuery selectors (however using jQuery you could dispense with inline scripts and attach the click in an javascript function. Mixing HTML and JS is not elegant).
One possible solution, using jQuery, would be to evaluate for the the clicked element first to acquire the attribute value, and then pass that into the onclick handler:
onclick="var d=$(this).data('z'); ga('send', 'event', 'clickout', 'buttonclick', window.location.href, d);"
Related
I'm stuck with setting up correctly FB pixel code, events like page view and content view work fine, but seems I missing something with tracking button clicks like "AdToCart" or "InitiateCheckout" events. Tried to play with a code, but didn't figure out it.
Here is the original code I tried to implement from Facebook for Add to Cart event.
<script>
<button id="button add-to-cart-button">AddtoCart</button>
<script type="text/javascript">
$('#addToCartButton').click(function() {
fbq('track', 'AddToCart', {currency: "EUR", value: {{ option.price }}});
});
</script>
What am I doing wrong?
First, you cannot have multiple ids to one element. The id is unique, so id="add-to-cart-button"
Second, the id is 'add-to-cart-button', so the jquery selector should match that: #add-to-cart-button not #addToCartButton
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.
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.
I have 10 link buttons on my web page. Each button pertains to a unique city. Each link button has an id attribute containing the name of the city. Each link button contains an onclick event which is recorded/tracked in Google Analytics Event Tracking. However, I haven't figured out how to capture the location from the unique id attribute. See example code below.
In short, I want to dynamically capture the value of the id attribute of the <a> tag as the Event Label in Google Analytics? FYI: In the code below, the Event Label is sending event.target.href to GA. This is where I want to capture the id value.
Here's the code:
<a id=“location-city-example” onclick=“ga(‘send’, ‘event’, ‘button’, ‘click’, event.target.href);” href="/apply" class="btn btn-rj">apply now</a>
Mmm... I think this would work
onclick="ga('send', 'event', 'button', 'click', this.id);"
Note that I would stick to using "straight" quotes rather than the "smart" quotes as in your original code. The latter does funny things sometimes.
I'm trying to add event tracking to my two buttons, but my button code looks like the following. I'm popping the user down to the section they clicked and hiding the other button's section:
<button class="btn btn-primary btn-lg" onclick="$('#order-form').show();$('#digital-download').hide();location.href='#Print'">
Order Print
Version
</button>
Anyone know how would I add the GA tracking code?
// Form Tracking for Google Analytics
$('.form-track').click(function(e){_gaq.push(['_trackEvent', 'Form', 'Completions', 'Form_'+$(this).attr('title')+'_'+location.href]); });
You can try something similar to this, adding the following code to your buttons:
$('.btn.btn-primary.btn-lg').click(function(e){
ga('send','event','your_category', 'your_action',$(this).text().trim());
})
When the button is clicked, it will send the event with your specified category, action, and the button text as the label. Note that you are using UA, so the event tracking syntax in your example is incorrect.