GA // Tracking onClick Events via a Class that generates unique output?

Question

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

Jasper · Accepted Answer · 2012-10-24 17:34:17Z

2

You are returning a string from your event handler, which won't actually do anything. Instead, just run the code normally. Also, once you return something from a function, the function stops executing, so your second return isn't even being run.

Try this:

$(function(){
    $('.downloadsmall a').on("click", function(i){
        var x     = 'LowRes0'+(i+1)+'.jpg',
            myGAQ = _gaq || [];
        myGAQ.push(['_trackPageview', '/downloads/img/' + x]);
        myGAQ.push(['_trackEvent', 'Downloads', 'JPG', '/downloads/img/' + x]);

    });
});

This code is actually accessing the GA _gaq object and asking it to create a page-view and an event tracking beacon.

The code still shouldn't work though, as the i argument in your event handler is really the event object, 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:

$(function(){
    $('.downloadsmall a').on("click", function(){
        var theHREF = $(this).attr('href'),
            myGAQ   = _gaq || [];
        myGAQ.push(['_trackPageview', theHREF]);
        myGAQ.push(['_trackEvent', 'Downloads', 'JPG', theHREF]);

    });
});

edited Oct 24, 2012 at 17:34

answered Oct 23, 2012 at 16:06

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lieutenant Dan Over a year ago

Thanks - Just updated my Q; I put what you wrote in; and am going to test it !

Collectives™ on Stack Overflow

GA // Tracking onClick Events via a Class that generates unique output?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related