How to make lightbox transitions count as analytics for image clicks in lightbox

问题

I am not even sure I am asking this question properly, but I could not find any resources online that would help me in this regard.

Since lightbox transitions don't really register as photo clicks for analytics, I am trying to figure out a way to link the transition between photos to click counts during lightbox viewing in addition to the click count on each thumbnail image.

I found this from a previous thread which adds an afterload function but am not sure where to paste it in my wordpress editor and how to modify it to include lightbox transitions when clicking on the front/back arrows:

afterLoad: function() {
      _gaq.push(['_trackEvent','Lightbox','Open',this.href, ,true]);
 },

taken from this site: https://moz.com/ugc/tracking-fancybox-clicks-in-google-analytics

Here is a direct link to the photo gallery page: http://cultmontreal.com/photos/151020-justintrudeau-cl/

Thanks.

回答1:

I believe the question is: how do I register an event every time a photo transition takes place on the lightbox?

First thing to note is that your code snippet in your question is for Google Analytics Classic (ga.js) however your site runs Google Universal Analytics (analtyics.js) so you need to use the correct code (not what is in your question).

First of all decide on values for the event you want to track and compose the JS for Universal Analytics in the format:

ga('send', 'event', '[category]', '[action]', '[label]', [value]);

Then you need to bind to the scroll event which is a click on the left/right arrows. Fortunately these arrows both have classes of 'fancybox-nav' so you could bind to both of those and then just fire the tracking.

Only other thing to consider is that the overlays are created dynamically, so we have to delegate an event to every 'fancybox-nav' element in the body which ensures dynamic elements are automatically bound too.

Your complete code using jQuery would therefore be (remember to replace the placeholder texts):

jQuery('body').on('click', '.fancybox-nav', function(){ 
  ga('send', 'event', 'lightbox', 'lightboxClicks', 'lightboxPhotos', 100);
});

Wrap this all in a jQuery(document).ready() wrapper and throw it in to any JS file that is loaded on these pages - probably best to be a JS file loaded through your template rather than the plugin so that it doesn't get overwritten regularly.

You need to read the google docs about event tracking to fully understand it.

To double check that events are firing, you'll need to debug/monitor the GA calls. See my brief overview of these techniques here.

来源：https://stackoverflow.com/questions/33378287/how-to-make-lightbox-transitions-count-as-analytics-for-image-clicks-in-lightbox