I have a R Shiny app that I have connected to Google Analytics using Google Tag Manager (R Shiny app means AJAX website). I am currently tracking the standard stuff like PageViews, and have set up a tag to track which Tab a user clicks on (Using Click Element).
In most tabs, I have a drop-down menu/list (can be seen in the picture). When clicking on this list to select/change the input, the click element does not fire. So clicking does not work here.
In the same picture, I have included the source html code. I highlighted what I think is important. The default input is "Age Group (Discrete)." The "option value=" and "selected" changes the input (changed to "Pyramid (Discrete)"). And it also changes in the div class="item" data-value=..." line.
I do not know how to capture when a user changes the input using Google Tag Manager. I am however able to successfully track this if I put this GA code in my JavaScript file.
$(document).on('change', 'select', function(e) {
ga('send', 'event', 'widget', 'select data', $(e.currentTarget).val());
});
But the above only works if I also have this included:
ga('create', 'UA-######', 'auto');
ga('send', 'pageview');
Which means it is double-counting pageviews (tracking page-views on GTM and the GA code above).
I prefer to track what I want using just GTM. Any help would be appreciated. Let me know if the image is hard to see (May need to zoom in). Thanks
one possible solutions is using GTM custom events:
1) adjust your code to trigger custom event instead of sending GA event:
$(document).on('change', 'select', function(e) {
dataLayer.push({
'event': 'widget data selected',
'selected_value': $(e.currentTarget).val()
});
});
This will trigger specific widget data selected select that can be catched with Custom Event Trigger. Then just use that trigger for your regular Analytics Event GTM tag.
Additionally, you might set up user-defined Data Layer variable to read the selected option value from dataLayer and use it in your tag.
Related
In my website we have a banner which on clicking directs the user to our client's website. In order to track the number of people clicking the banner we decided to make use of the google analytics events component. I added the JS provided by them just below my Google analytics script.
var captureOutboundLink = function(url) { ga('send', 'event', 'outbound', 'click', url, { 'transport': 'beacon', 'hitCallback': function(){document.location = url;} }); }
Then in the place of the banner I called the function
<a href="https://example.com/pg/" onclick="return captureOutboundLink('https://example.com/pg/');">
<img src="https://www.moreexample.com/admin/banner/mascot.jpg" alt="macott2022" title="macott2022" class="img-res innerbann" />
But the google analytics events tab is still not tracking. I tried clicking the Banner few times but it shows no signs of activity. Does it take time to reflect ?
yes, events report might need some time to process the data. you can use "events" section of real-time report instead.
moreover you might use Tag assistant or other GA debugging tool to make sure that your event data being sent.
I have started using Google Tag Manager recently and I don't understand why one of my variables remains undefined while everything seems to be set up correctly.
Here is first the code that I use to create my datalayer:
<script>
window.dataLayer = [{
'pageCategory': 'test1',
'Device' : 'test2',
'Manufacturer': 'test3'
}];
</script>
I have created custom dimensions based on those variables and I can find them in Google Analytics. So far, everything is all right.
I then want to track a click on a button that leads the users to an external link. I use the following code:
window.dataLayer.push({
'ShopURL': url,
'ShopName': shop_name,
'PriceOffer': price,
'event': 'ClickPrice'
});
I have checked the content of each variable with a console.log and they all display the correct values.
In GTM, I have created datalayer variable for each one of them, I have created a custom event to push them to Google Analytics. I have taken "ShopName" for event_category, "Device" for event_action, "PriceOffer" for event_label.
When I look at the data in Google Analytics I see that event_category is undefined while event_action has the correct value. It looks like the event is fired correctly because I can only see it in GA when I click on the button but somehow some variables are not populated correctly.
You can see it in action here: https://www.mobilemultimedia.be/en/nokia/price-nokia-8.1 (click on one of the "check offer" button to trigger the event)
With GTM preview in the browser I see all the correct values.
Any idea?
Additional info
Here is a screenshot of the variable configuration in GTM:
I'm sorry, it's in French but you can see the variable with the right name.
I believe you have your trigger set incorrectly.
I think it might be an element click trigger right now, but you need it to be a "custom event" trigger and you should have "ClickPrice" as the event name you use to trigger.
Like so:
I have created an affiliate marketing website. Here users will register on my website and shop, however the shopping link will be of amazon.
I need to know how to set up Google Analytics so that it can track which registered user has clicked an affiliate link on my website.
For example I have this amazon link
https://www.amazon.in/BassHeads-225-Super-Extra-Headphones/dp/B01M9C51T9/ref=sr_1_1?_encoding=UTF8&pf_rd_i=desktop&pf_rd_m=A1VBAL9TL5WCBF&pf_rd_p=14ffe21a-e5a2-45c9-a9c0-91f47b082bbc&pf_rd_r=94G5Y8CM93G8M5Y2SNS3&pf_rd_t=36701&qid=1554008093&s=gateway&smid=A14CZOWI0VEHLG&sr=8-1
I know I'm supposed to put an onClick event on there somewhere but I don't have any idea how it links to Google Analytics? I am using Google Tag Manager
Is this the correct Onclick code:
onClick="_gaq.push(['_trackEvent', 'Link', 'Click', 'Banner Advert1']);"
If not what do I need to add to track the registered user?
I have many links to external sites on my website; an example link looks like this:
<a id="Buy" data-itemDescription="(a description)" data-itemValue="2.80" href=http://externalsite?id=6789>
The key things here are the extra attributes before the href: id (used to identify the specific event that occurs when the link is clicked, i.e. in this case a Buy event) and the data-itemDescription and data-itemValue metadata (used in constructing the event label etc.)
The relevant GTM artefacts are as follows:
Trigger:
Buy: Click - Just Links when Click Id contains Buy
User-defined variables (custom Javascript):
ItemDescription:
function() {
return {{Click Element}}.getAttribute("data-itemDescription");
}
ItemValue:
function() {
return {{Click Element}}.getAttribute("data-itemValue");
}
ItemValueFloat (100 multiplier used because GA didn't like my decimal places - I then divide by 100 at reporting time to get the right answer):
function() {
return parseFloat({{ItemValue}})*100;
}
Tag BuyClicked is an Event triggered by the Buy trigger as above, with:
Category = Purchase Tracking
Action = Purchase {{ItemDescription}}
Label = {{Page Path}} : {{Click URL}}
Value = {{ItemValueFloat}}
I also have Non-Interaction Hit set True.
The BuyClicked event is then collected by GA, and reportable on from e.g. Google Data Studio, without my having to do anything further.
If you can't add an id or metadata, you could undoubtedly do the same sort of thing more painfully by handling all clicks through a single trigger and then parsing the Click URL via custom Javascript to get granular Categories, Actions, Labels.
I have a banner on my sites home page, It has multiple links and the html code is written within tag and does not contains any anchor links, instead it has a href link only.
My IT heads says its not possible to embedd a onclick event tracking code to track all the links.
Please let me know how will i track this?
A pure unobtrusive javascript solution (derived from Googles example, working but not necessarily the most complete or beatiful code) :
function addListener(element, type, callback) {
if (element.addEventListener) element.addEventListener(type, callback);
else if (element.attachEvent) element.attachEvent('on' + type, callback);
}
links = document.getElementsByTagName('a');
for(i=0,cnt=links.length;i<cnt;i++) {
addListener(links[i], 'click', function() {
ga('send', 'event', 'button', 'click', 'nav-buttons');
});
}
If you put that in an external js file or an inline script it will "decorate" all links in the page (you would need a more specific selector instead of "all links") with a click event that fire google event tracking when somebody clicks the link. No embedded click code in the link tags necessary (that's bad practice in any case).
If you are already using jQuery (since that's probably the most popular javascript library) you can simply do
$( "a" ).click(function() {
ga('send', 'event', 'button', 'click', 'nav-buttons');
});
(again, choose a more specific selecor).
Both examples assume Universal Analytics, for classic you'd need to change the event tracking code (see DalmTos answer for examples).
The following examples will depend on if you are running classic VS universal analytics.
For Classic Analtyics look for ga.js in your tracking code:
Play
For Universal Analytics look for Analtyics.js in your tracking code:
Play
I don't see any reason why you wouldn't be able to track it in your banner.
I am looking for some clues on where to add Google Analytics Event Tracking to a page that has AnythingSlider installed. I have a slider that does not autoscroll and you have to click the navigation buttons for the slides to move. I wish to track these clicks. I would also like to track if a visitor clicks on a link within a slide.
I am wishing to use Google's InPage Analytics to track visitor click behavior and workout what items (images & phrases) catch the attention of the visitor in order to make better lead funnels.
I did try the Event tracking guide from Google before posting here, but I was unsure of where to pickup the navigation clicks from the slider.
add this to any a href in your html
onClick="_gaq.push(['_trackEvent', 'Slider','Panelno:x', 'blah']);"
Untested (I'm about to do this myself) but the API suggests to me that I should use the onSlideComplete callback, e.g. (assuming you've set up the names of your panels in an array called pages).
onSlideComplete : function(foo) {
_gaq.push(['_trackEvent', 'Slider','Panelno:'+slider.currentPage, pages[index - 1]]);
}
EDIT: Be careful with onSlideComplete, it seems to fire off too often. Set a var to tell it not to refire, and reset the var with onSlideBegin.
onSlideBegin : function(e, slider) {
refire = 1;
},
onSlideComplete : function(slider) {
if (refire) {
_gaq.push(['_trackEvent', 'Slider','Panelno:'+slider.currentPage, pages[slider.currentPage - 1]]);
refire=0;
}
}