How to incorporate Google Analytics Event Tracking with Anythingslider - google-analytics

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;
}
}

Related

Google Analytics - Events data not reflecting

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.

Tracking user link clicks with google analytics

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.

AddThis Share : LinkedIn always open in new window

We're using AddThis Social Share functionality with our Sitecore/MVC application. The problem we're facing is that the LinkedIn share always opens in new window. On Inspect, we can see the target=_blank in code, which is not being added in our code.
Any help?
Thanks,
Chandana
The behavior of each share button is as per the website to which the page is being shared. If you test each button (say Facebook, G+, Twitter, LinkedIn, etc.) you will notice that they all work differently. It's not AddThis choice. This is because each website has its own API and that's the way that website decided it would work with their system. LinkedIn happens to open a separate window... Pinterest first opens a popup within your page and then another window after you selected the image you wanted to share. G+ and Facebook open a new tab. And the popups/windows all look quite different, but the users should recognize each respective brand as a result...
I suspect that this is a problem with the AddThis Social Share functionality. To share on LinkedIn, all you need is the following URL format...
https://www.linkedin.com/sharing/share-offsite/?url={url}
Then you can setup your <a href="..."> element however you like, with target="_blank" or not.
Source: Official LinkedIn Sharing Documentation.
Can try out below JavaScript code, which will overwrite addthis functionality, and make linkedIn as popup,
setInterval make sure click event attached to dynamically generated anchor tag
$(document).ready(function () {
var clickinterval = setInterval(setclickevent, 500);
function setclickevent() {
if ($('.at-svc-linkedin').length > 0) {
$('.at-svc-linkedin').on('click', function () {
window.open('https://www.linkedin.com/sharing/share-offsite/?url=' + fixedEncodeURIComponent(window.location.href), 'popup', 'width=600,height=600');
e.preventDefault();
return false;
});
clearInterval(clickinterval);
}
}
function fixedEncodeURIComponent(str) {
return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
return '%' + c.charCodeAt(0).toString(16);
});
}
});

How can I make sure that gtm send the pageview fast?

I am making the change from the basic analytics code to google tag manager since I need it to track impressions for certain elements. While testing when the pageview fires, I get this warning :
"This page took a long time to send a pageview hit to Google Analytics. Users could be clicking away from your site before it records a pageview."
Google tag manager requires adding the code at the beginning of the body (I tried adding it in the header just in case it helps with that warning, but that didn't work).
Probably GA is not the best choice for such task. GA is well-tailored for pageviews, but not for custom actions.
I solve similar issue with http://www.devmetrics.io analytics. To track impressions for certain elements on my page: 1) add for each of this elements trackvisible css class 2) using setInterval check visibility every few seconds.
Example code using jQuery and devmetrics analytics:
$('.trackvisible').each(function( index ) {
if ($(this).visible()) {
var tag = 'element.' + $(this).attr('id');
devmetrics.userEvent('impression', [tag]);
}
});

Event Tracking code for multiple links in one banner

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.

Resources