Below is the code I keep trying; I’m basically just trying to use this to track the page with General GA; then assign a class that tracks onClick events within a category and generates a 1,2,3 automatically at the end of the file name. I’m essentially just trying to streamline tracking my onClick files within a website; I do not want to continue manually adding onClick code to every file I’m trying to track on a page. What is the matter with my below code?
<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 -->
UPDATED —-
Below is the code updated per Jasper’s Response; (thanks !) I have it in and am awaiting to see how it resolves.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- GA track all onClicks -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-35609953-1']);
_gaq.push(['_trackPageview']);
_gaq.push(['_trackEvent', 'Downloads', 'JPG', '/downloads/img/"+x+"']);
$(function(){
$('.downloadsmall a').on("click", function(){
var theHREF = $(this).attr('href'),
myGAQ = _gaq || [];
myGAQ.push(['_trackPageview', theHREF]);
myGAQ.push(['_trackEvent', 'Downloads', 'JPG', theHREF]);
});
});
</script>
<!-- End GA track all onClicks -->
You are returning a string from your event handler, which won’t actually do anything. Instead, just run the code normally. Also, once you
returnsomething from a function, the function stops executing, so your secondreturnisn’t even being run.Try this:
This code is actually accessing the GA
_gaqobject and asking it to create a page-view and an event tracking beacon.The code still shouldn’t work though, as the
iargument in your event handler is really theeventobject, not an index (which I’m assuming is what you want). You could get the actual HREF of the link and use it as your tracking data: