如何使灯箱中的灯光转换计算为对图像点击的分析 [英] How to make lightbox transitions count as analytics for image clicks in lightbox

问题描述

我甚至不确定我是否正确地问了这个问题，但是我找不到任何在线帮助我的资源。

由于lightbox过渡没有真正注册为分析照片点击次数，我试图找出一种方法，可以在灯箱查看过程中将照片与点击次数之间的转换链接起来，以及每个缩略图图像上的点击次数。

我从前面的线程中发现了这个，它添加了一个后加载函数，但我不确定将它粘贴到我的wordpress编辑器中的位置，以及如何修改它以在点击前/后箭头时包含lightbox转换：

  afterLoad：function（）{
 _gaq.push（['_ trackEvent'，'Lightbox'，'Open'，this .href，，true]）; 
}，
  

取自本网站： https://moz.com/ugc/tracking-fancybox-clicks-in-google-analytics

以下是图片库页面的直接链接： http://cultmontreal.com/photos/151020-justintrudeau-cl/

谢谢。

解决方案

我相信问题是：如何在灯箱上每次发生照片转换时注册一个事件？

<首先要注意的是，您问题中的代码片段是针对Google Analytics Classic（ga.js）的，但是您的网站运行的是Google Universal Analytics（analtyics.js），因此您需要使用正确的代码（而不是您的问题）。

首先确定要跟踪的事件的值并为Universal Analytics构建JS格式为：

  ga（'send'，'event'，'[category]'，'[action]'， '[label]'，[value]）; 
  

然后您需要绑定到滚动事件，这是左/右箭头的点击。幸运的是，这些箭头都有'fancybox-nav'类，所以你可以绑定到这两个，然后开始追踪。

只有其他要考虑的事情是叠加层是动态创建的，所以我们必须将一个事件委托给body中的每个'fancybox-nav'元素，以确保动态元素自动绑定。因此，使用jQuery将因此（记住要替换占位符文本）：

  jQuery（'body'）。on（'click' ，'.fancybox-nav'，function（）{
 ga（'send'，'event'，'lightbox'，'LightboxClicks'，'lightboxPhotos'，100）; 
}）; 
  

用jQuery（document）.ready（）包装器包装这一切，并将其放入任何JS在这些页面上加载的文件 - 可能最好是通过模板加载的JS文件，而不是插件，这样它就不会被定期覆盖。

您需要要阅读关于事件跟踪的Google文档以充分了解它。

要仔细检查事件是否正在触发，您需要调试/监控GA呼叫。 在这里查看我对这些技术的简要概述。

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.

解决方案

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.

这篇关于如何使灯箱中的灯光转换计算为对图像点击的分析的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！