How to track individual image views using Google Analytics
  • I'm trying to figure out how to track individual image views using Google Analytics. Not clicks - as my Galleries are large - over 100 each - and most users are clicking a thumb - then just watching the show.

    A feature like this script has would be awesome:

    Scroll down to Configuration Options > googleAnalytics

    Anyone able to do this now? I guess using Event Tracking would be a way to go - but I can't seem to figure it out.
  • prettyPhoto has a setting called "changepicturecallback". This is called every time a picture is displayed.

    So you could do something like:
    // your google analytics code.
  • Thanks for the response.

    I'm by no means an expert here - you think something like this will work:

    changepicturecallback: function(){
    _gaq.push(['_trackEvent', 'Gallery Images', 'View']);
  • Yes it should.

    I don't know where you grabbed the code but the escapes "\" for the prettyPhoto selector might not be needed
  • Oh yeah - those escapes are there because this is being added to the getJS() function of a Joomla template file . So they don't actually show when viewed in the source of the page.

    I guess I need to be patient now to see if it actually shows in my reports.

    Thanks for the help scaron.
  • I am looking for something similar, except what I want to do is pass the paths and filenames of all images viewed in prettyPhoto (even all filenames shown in a slideshow) to Google Analytics so that all images that are viewed through prettyPhoto on my site show up in my Google Analytics reports like this: "/images/image1.jpg", "/images/image2.jpg", etc.

    Any help would be greatly appreciated.
  • I wonder if this would work?

    changepicturecallback: function(){
    _gaq.push(['_trackEvent', 'Photos', 'View', pp_images[set_position]]);
  • These are solutions but require you to setup event tracking. I'm looking for a solution that allows you to simply add the tracking code so that google will track the lightbox as if it were a page like any other.
    Where can I add this code:

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '']);

    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);

    Any ideas would be helpful thanks.
    Great script by the way, and I'm using version 2.5.6
  • hey guys, if you want to make a quick mod to the plugin, you can do this:

    in prettyPhoto 3.1.3, add $pp_pic_holder as an argument to the callback:

    settings.changepicturecallback($pp_pic_holder); // Callback!

    in the prettyPhoto init part of your script:

    changepicturecallback : function($pp_pic_holder){
    var sourceOfImage = $pp_pic_holder.find('img').attr('src');
    [analytics or whatever go here]

    i feel like this should be integrated into the plugin because it's so easy and so obvious, but I can't tell if this suggestion falls into the "DO NOT contact me for support" portion of Scaron's policy =) maybe i'll get around to officially suggesting it some other time.
  • This is how I got tracking to work with the newer google analytics:

    opacity: 0.85,
    show_title: false,
    theme: 'dark_square',
    social_tools: false,
    overlay_gallery: false,
    changepicturecallback: function(){
    ga('send', 'event', 'Category Name','event name',pp_images[set_position],{'transport':'beacon'});

    I used part of what was posted before, and tweaked it a bit to get it working.

    Just set your Category Name as well as your event name, then include pp_images[set_position] to send the image url of the current image to google analytics.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Google Sign In with OpenID Sign In with Twitter