I’m trying to come up with a Script; using perhaps, ‘Math Method in Javascript — that allows me to simply attach a CSS class to dozens of files / photos / media, etc that I am using google Analytics to track onClick.
Essentially; I’ve been implementing the below, manually; across dozens of sites where I want to track onClick.
<p class="downloadsmall">download: <a href="jpg/LOW/1.jpg" onClick="_gaq.push(['_trackPageview', '/downloads/img/LowRes/1.jpg']);">Low Res</a></p>
I’m wondering if I can simply define a class here; and within a JavaScript array or similar; I call the class attached to the mark-up; that assigns Google’s onClick Tracking code automatically; while at the same time populating the name differently, in a simple way; like adding a 1,2,3 etc at the end of the name.
EG;
'/downloads/img/LowRes01.jpg']);">Low Res</a></p>
'/downloads/img/LowRes02.jpg']);">Low Res</a></p>
*Anyone have any suggestions as to how I can write this? Is it possible?*
Update: //
Below is the full code I’m trying; The standard GA seems to read, but it is not resolving any of the onClicks? I’ve checked under ‘Content Drilldown’ and ‘Events’ and nothing is seeming to resolve except the Basic ‘GA’ Reading.
<!doctype html>
<head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35609953-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- GA track all onClicks -->
<script>
$(function(){
$('.downloadsmall a').attr("onclick", function(i){
var x='LowRes0'+(i+1)+'.jpg';
return "_gaq.push(['_trackPageview', '/downloads/img/"+x+"'])";
});
});
</script>
<!-- End GA track all onClicks -->
<style>
#wrap {
width: 940px;
margin-left: 0 auto;
}
#left {
width: 50%;
float: left;
}
#right {
width: 50%;
float: right;
}
.downloadsmall {
height: 50px;
width: 200px;
border: 3px dotted #333;
}
</style>
</head>
<body>
<div id="wrap"><!-- Wrap -->
<div id="left">
<p class="downloadsmall">
download: <a href="http://www.google.com">Low Res</a>
</p>
</div>
<div id="right">
<p class="downloadsmall">
download: <a href="http://www.yahoo.com">Low Res</a>
</p>
</div>
</div><!-- Wrap -->
</body>
</html>
UPDATE —
// I now have it so it is reading the page ‘events’ and is tracking the page views, but it is not categorizing as LowRes01.jpg – LowRes02.jpg according to the attached class; which was the main goal — Below is my updated Full Code. What am I doing wrong here ?
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35609953-1']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackEvent', 'Downloads', 'JPG', '/downloads/img/LowRes01.jpg']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- GA track all onClicks -->
<script>
$(function(){
$('.downloadsmall a').attr("onclick", function(i){
var x='LowRes0'+(i+1)+'.jpg';
return "_gaq.push(['_trackPageview', '/downloads/img/"+x+"'])";
return "_gaq.push(['_trackEvent', 'Downloads', 'JPG', '/downloads/img/"+x+"'])";
});
});
</script>
<!-- End GA track all onClicks -->
<style>
#wrap {
width: 940px;
margin-left: 0 auto;
}
#left {
width: 50%;
float: left;
}
#right {
width: 50%;
float: right;
}
.downloadsmall {
height: 50px;
width: 200px;
border: 3px dotted #333;
}
</style>
</head>
<body>
<div id="wrap"><!-- Wrap -->
<div id="left">
<p class="downloadsmall">
download: <a href="http://www.google.com">Low Res</a>
</p>
</div>
<div id="right">
<p class="downloadsmall">
download: <a href="http://www.yahoo.com">Low Res</a>
</p>
</div>
</div><!-- Wrap -->
</body>
</html>
Did you mean something like this
DEMO (See the html source).
Source
Outout
Update:
To track the event you have to use event tracking method of
GA, i.eand that’s displayed as
Eventsin the Analytics reporting interface. So, I think it should be likeFor more read this.