I have a site where I track click outs, one user may click out several times so if I have 100 users I may have 300 click out events. This is ok for a rough guide but ideally I would like to know how many users have clicked out so 100 users 85 users clicked out.
I could write some js on my site to handle this store in a cookie but I was wondering if there is anything in ga.js that will allow me to fire an event once per session.
You can use Custom Dimensions to scope things to the session (or even the user). Create a dimension in the Google Analytics admin tab under Property within Custom Definitions.
Set the scope to session, then copy the ga('set', 'dimension1', 'Description Here'); and paste it before sending the event (obviously, change "Description Here" to your own explanation. Also, make sure 'dimension1' matches the index it gives you.
Custom dimensions (and metrics) are tied to hit types, so simply setting them does nothing until a hit type is sent- so either a pageview or an event.
Once you've created the dimension, you can use it for anything you would a standard dimension in reporting- including segments and custom reports.
Hope that helps!
Related
How can I track the user in Google Analytics but only between two actions?
I can only use Javascript including jQuery.
I would like to have the engagement time of a user during a game (not during all the page view).
My problem is actually I have the engagement time of all actions.
I would like it from the game beginning moment to the end game moment.
I really want to do that in Google Analytics.
How it it possible ?
Thanks.
There's a few approaches you could use.
If this is all on a single page, you could use custom events: https://developers.google.com/analytics/devguides/collection/gajs/eventTrackerGuide. Basically, you would need to add event handlers for "game beginning" and "game end", then log each as a custom event.
If you are trying to track them between a session, I'd try manually logging Google Analytics pages like this: https://developers.google.com/analytics/devguides/collection/analyticsjs/pages. When a user starts a game, store that somehow, either with a cookie/local storage/web call, etc, then on every page, check for that state, and if they are in the game, log the page.
This isn't exactly what GA normally does, so you'll have to do something custom like this.
This question is more of a general coding practice question. I am writing an extension for Google Chrome that gathers the ASIN number from Amazon.com when viewing an item page.
Design requirements:
When viewing a page that contains an element with id=ASIN, capture the ASIN. (E.g. B004FYJFNA from http://www.amazon.com/gp/product/B004FYJFNA/?tag=justinreinhart-20 )
When user changes platforms (e.g. from Playstation 3 to Xbox 360), detect that a change has occurred and capture the new ASIN value.
I have a "content script", injection.js, that is injected on every amazon page and can successfully perform requirement #1.
The issue I have is with #2. I am not able to efficiently detect a change to the ASIN value. Either the code doesn't fire OR I pick an element that fires ~100 times. I am at a loss how to do this efficiently.
Failure examples:
// (A) This fires ~100 times when user changes platforms,
// and also fires during mouseover events.
// Unacceptable but it does work.
$("#handleBuy").bind('DOMNodeRemoved', OnProductChange);
// (B) This doesn't fire at all. I have a few guesses why but no certainties.
$("#ASIN").on('change', OnProductChange);
Blathering:
Switching product platforms when the user clicks seems to tear the Amazon page apart and it destroys any event binding that I attempt. (I believe the element is removed and reinserted--not just changed.) I do not know javascript well enough to skillfully take these massive DOM changes into account.
Your help and knowledge is appreciated.
I am working on Google Universal Analytics and I see that our Dimensions are being captured by Google about 60% of the time. I see that the Dimensions are being set and I have verified in the Network that the Dimension is being sent to Google. Someone suggested that I look into setting {'nonInteract': 1}. I am confused where I should set the nonInteract flag to (ie - should I be setting this to GA() when I am setting the Dimension, or should it be set to the GA() when I am sending the event?
I have tried the following below, but I am confused with the result. In the Network tab, I do see that the Dimension is being sent to Google. When I inspect the Console with the GUA Debugger Tool, trying to set the dimension results in a Command ignored. Unknown target: undefined.
//Two variations I have tried when implementing the `nonInteraction` flag:
ga(u.name + '.send', 'event', category, action, label, {'nonInteraction': 1});
ga('set', 'dimension' + cvSlot, label, {'nonInteraction': 1});
Screenshot of console when cannot set Dimension15:
Source of where I got the nonInteract code:
https://developers.google.com/analytics/devguides/collection/analyticsjs/events
My question is how do I attach the nonInteraction flag to my Dimension?
Setting a non-interaction flag on a set call for a dimension would be pointless since the set call is not an interaction in the first place. An Interaction is a hit that sends information to the Google servers (send pageview, event, timing, ecommerce item and transactions). You need to have an interaction hit to send a custom dimension. The only hit type you can set to non-interactive is event. However a set call after an event is pointless since the hit has already been sent and the dimension cannot be added to the hit (and it might even be harmful, since a set call attaches the dimension to all subsequent hits, interactive or not).
So the best way would be to use a non-interaction event and attach the dimension to it via it's configuration object.
ga('send', 'event', 'category', 'action', {
'nonInteraction': 1}
'dimension': myvalue
});
Non-Interaction means that the event will not affect the bounce rate, so it's not like the setting will have a huge effect (it will only affect people who trigger an event on their first pageview and then leave without looking at more pages).
Does anyone know of a way to track changes to a web form, i.e. select or text field using webtrends?
I know Google Analytics has similar functionality, can this be done in WebTrends?
Webtrends has Javascript click tracking so you'd have to add Javascript onChange or onClick events to whatever you need to track.
Since web forms don't typically trigger the Webtrends link tracking, you have to use the dcsMultiTrack function, passing the variables that need to be tracked.
For example, you might use the following to track the URL that you're on and the fact that a particular field was clicked:
onClick="onclick="dcsMultiTrack('DCS.dcssip','www.domain.com','DCS.dcsuri','/yourpage', 'WT.ti','formfield1','WT.dl','1');"
Note that the WT.dl parameter should be set so you don't count extra page views. Also note that the WT.ti parameter is used for automatically tracking this as a link click. If you need more granularity, you can always define another variable (for example, "formname) and configure Webtrends to report on that as another dimension.
I was wondering how sites such as crazyegg.com store user click data during a session. Obviously there is some underlying script which is storing each clicks data, but how is that data then populated into a database? It seems to me the simple solution would be to send data via AJAX but when you consider that it's almost impossible to get a cross browser page unload function setup, I'm wondering if there is perhaps some other more advanced way of getting metric data.
I even saw a site which records each mouse movement and I am guessing they are definitely not sending that data to a database on each mouse move event.
So, in a nutshell, what kind of technology would I need in order to monitor user activity on my site and then store this information in order to create metric data? I am not looking to recreate GA, I'm just very interested to know how this sort of thing is done.
Thanks in advance
Heatmap analytics turns out to be WAY more complicated than just capturing the cursor coordinates. Some websites are right-aligned, some are left-aligned, some are 100%-width, some are fixed-width-"centered"... A page element can be positioned absolutely or relatively, floated etc. Oh, and there's also different screen resolutions and even multi-monitor configurations.
Here's how it works in HeatTest (I'm one of the founders, have to reveal that due to the rules):
JavaScript handles the onClick event: document.onclick = function(e){ } (this will not work with <a> and <input> elements, have to hack your way around)
Script records the XPath-address of the clicked element (since coordinates are not reliable, see above) in a form //body/div[3]/button[id=search] and the coordinates within the element.
Script sends a JSONP request to the server (JSONP is used because of the cross-domain limitations in browsers)
Server records this data into the database.
Now, the interesting part - the server.
To calculate the heatmap the server launches a virtual instance of a browser in-memory (we use Chromium and IE9)
Renders the page
Takes a screenshot,
Finds the elements' coordinates and then builds the heatmap.
It takes a lot of cpu-power and memory usage. A lot. So most of the heatmap-services including both us and CrazyEgg, have stacks of virtual machines and cloud servers for this task.
The fundamental idea used by many tracking systems uses a 1x1px image which is requested with extra GET parameters. The request is added to server log file, then log files are processed to generate some statistics.
So a minimalist click tracking function might look like this:
document.onclick = function(e){
var trackImg = new Image();
trackImg.src = 'http://tracking.server/img.gif?x='+e.clientX+'&y='+e.clientY;
}
AJAX wouldn't be useful because it is subject to same-origin policy (you won't be able to send requests to your tracking server). And you'd have to add AJAX code to your tracking script.
If you want to send more data (like cursor movements) you'd store the coordinates in a variable and periodically poll for a new image with updated path in the GET parameter.
Now there are many many problems:
cross-browser compatibility - to make the above function work in all browsers that matter at the moment you'd probably have to add 20 more lines of code
getting useful data
many pages are fixed-width, centered, so raw X and Y coordinates won't let you create visual overlay of clicks n the page
some pages have liquid-width elements, or use a combination of min- and max-height
users may use different font sizes
dynamic elements that appear on the page in response to user's actions
etc. etc.
When you have the tracking script worked out you only need to create a tool that takes raw server logs and turns them into shiny heatmaps :)
Don't know the exact implementation details of how crazyegg does it, but the way I would do it is to store mouse events in an array which I'd send periodically over AJAX to the backend – e.g. the captured mouse events are collected and sent every 30 seconds to the server. This recudes the strain of creating a request for every event, but it also ensures that I will only lose 30 seconds of data at maximum. You can also add the sending to the unload event which increases the amount of data you get, but you wouldn't be dependent on it.
Some example on how I'd implement it (using jQuery as my vanilla JS skills are a bit rusty):
$(function() {
var clicks = [];
// Capture every click
$().click(function(e) {
clicks.push(e.pageX+','+e.pageY);
});
// Function to send clicks to server
var sendClicks = function() {
// Clicks will be in format 'x1,y1;x2,y2;x3,y3...'
var clicksToSend = clicks.join(';');
clicks = [];
$.ajax({
url: 'handler.php',
type: 'POST',
data: {
clicks: clicksToSend
}
});
}
// Send clicks every 30 seconds and on page leave
setInterval(sendClicks, 30000);
$(window).unload(sendClicks);
});
Note that I haven't tested or tried this in any way but this should give you a general idea.
If you're just looking for interaction, you could replace your <input type="button"> with <input type="image">. These are automatically submitted with the X, Y coordinates of where the user has clicked.
jQuery also has a good implementation of the mousemove event binding that can track the current mouse position. I don't know your desired end result, but you could setTimeOut(submitMousePosition, 1000) to send an ajax call with the mouse position every second or something like that.
I really don't see why do you think that is impossible to store all click points in one user session to the database?
Their moto is "See Where People Click"
Once when you gather enough data it is fairly easy to make heat maps in batch processes.
People are really underestimating databases, indexing and sharding. The only hard thing here is to gather enough money for underlying architecture :)