Vanilla 2

johnbenedict

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:
http://www.justinbarkhuff.com/lab/lightbox_slideshow/

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.

scaron

prettyPhoto has a setting called "changepicturecallback". This is called every time a picture is displayed.

So you could do something like:
$("a[rel^='prettyPhoto']").prettyPhoto(changepicturecallback:function(){
// your google analytics code.
});

johnbenedict

Thanks for the response.

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

$(\"a[rel^='prettyPhoto']\").prettyPhoto({
changepicturecallback: function(){
_gaq.push(['_trackEvent', 'Gallery Images', 'View']);
}
});

scaron

Yes it should.

I don't know where you grabbed the code but the escapes "\" for the prettyPhoto selector might not be needed

johnbenedict

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.

Josh

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.

Josh

I wonder if this would work?

$(\"a[rel^='prettyPhoto']\").prettyPhoto({
changepicturecallback: function(){
_gaq.push(['_trackEvent', 'Photos', 'View', pp_images[set_position]]);
}
});

wiknar

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', '']);
_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);
})();

Any ideas would be helpful thanks.
Great script by the way, and I'm using version 2.5.6

dguzzo

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:

jQuery("a[rel^='lightbox']").prettyPhoto({...
...
...
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.

toddaustin

This is how I got tracking to work with the newer google analytics:


 $("a[rel^='prettyPhoto']").prettyPhoto({
        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.

Vanilla 2

Howdy, Stranger!

Categories