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.
Related
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.
I just finished working on a plugin for Sketch and I created a simple landing page for users to download the plugin. I want to use Google Analytics event tracking to track the downloads, but the event tracking is not working and I can't seem to figure out why.
Here is what the link looks like:
Download
Does anyone see what I'm doing wrong? Do I need to add any other code anywhere else besides the onclick attribute?
My bet is that you're facing what we call a race condition: the moment the user clicks the link, the browser initiates a page change, thus GA is interrupted before it's had a chance to send the event.
2 options
Open link in new tab: add target="_blank" to your links so they open in a new tab and don't interrupt GA in the current tab.
Prevent Default + Hitcallback: you can use a custom function for onClick that will prevent the link from opening by default (return false;), trigger the GA event, and use GA's hitCallback to trigger the page change programatically.
For option 2 there are different ways of doing it (since it's custom code). Here is an example from Google:
https://support.google.com/analytics/answer/1136920?hl=en
<script>
/**
* Function that tracks a click on an outbound link in Analytics.
* This function takes a valid URL string as an argument, and uses that URL string
* as the event label. Setting the transport method to 'beacon' lets the hit be sent
* using 'navigator.sendBeacon' in browser that support it.
*/
var trackOutboundLink = function(url) {
ga('send', 'event', 'outbound', 'click', url, {
'transport': 'beacon',
'hitCallback': function(){document.location = url;}
});
}
</script>
You'll also need to add (or modify) the onclick attribute to your links. Use this example as a model for your own links:
Check out example.com
I am looking to create a dataLayer push event for any time a click is made on any external link - I plan to use it as a trigger to fire a GTM tag for external link tracking. I envision it will be something like this :
<script>
Some code to detect clicks on any external links
dataLayer.push({'event': 'eventNameXYZ'});
</script
An example function:
function pushToDataLayer() {
var links = document.getElementsByTagName('a');
for(var i=0,cnt=links.length;i<cnt;i++) {
var current = links[i];
current.onclick = function() {
dataLayer.push({
'href': current.href,
'event': 'outbound' // event to trigger a rule in the tag manager
});
}
}
}
(This will be much easier if you use jQuery or something like it). This will attach an click event to all links. The click will push an event and a variable with the clicked href to the dataLayer.
In the Tag Manager you need to create a new rule that triggers a tag on the custom event "outbound" and a Macro with the type dataLayer that catches the "href" dataLayer Variable. You can use this variable in your tags - for example with a GA virtual ´pageview - and have the tags fire with the rule "fire on event "outbound".
The code might not work on all browsers and is a demonstration of a principle rather than production code (plus it will catch all links, you'd need to test for absolute urls or domains name or css class names that suggest an outbound link). I would recommend using jQuery for finding the links and attaching events.
I'm trying to get Google Analytics working on my blog, but the events are failing to show up in my account.
Part of the issue is that I'm using the new async code, but most of the documentation relates to the older synchronous version. I've read a bunch of SO and blog posts but can't quite see what I'm doing wrong.
One mentions that you have to "activate" event tracking in your site's profile, but I can't find where I might do that.
I originally put my Google Analytics code in an external file called ga.events.js, which is still linked from my site. I attached the events from a jQuery loaded event:
$(function () {
$('.rss').click(function() {
trackEvent("engagement", "rss subscribe", "rss subscription link clicks");
});
function trackEvent(category, action, label) {
_gaq.push(['_trackEvent', category, action, label]);
}
});
But I found a post that said you can't link in an external file for Google Analytics, so I also tried the old fashioned onclick approach:
email list
I put the _target="blank" attribute in case the request wasn't completing before the user navigated away from the page.
Executing the code in the Chrome console on my site returns a 0, when I was expecting a boolean value:
_gaq.push(['_trackEvent', 'Engagement', 'click', 'RSS subscription link'])
I've waited 24 hours after each of these tests to see if the event tracking wasn't real time.
What else should I try? Any obvious mistakes?
Figured it out. I had onclick instead of onClick with a capital C. Wait, JavaScript is a case sensitive language? Who knew?
I also had the syntax of the GA call incorrect.
Here's what my working code looks like:
email list
And here's a version that works using jQuery to attach the click handlers:
$(function () {
$('.rss').click(function() {
trackEvent('Engagement', 'Sidebar link click', 'RSS feed subscription');
});
function trackEvent(category, action, label) {
_gaq.push(['_trackEvent', category, action, label,, false]);
}
});
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;
}
}