使用Google Analytics跟踪Fancybox（jQuery Lightbox）中的图像视图

我正在这个网站上工作： http ：//www.vomero.co.uk/Torquay.aspx，并希望跟踪图像的视图（在Fancybox图库中打开）。

我知道我可以为每个图像添加一个onClick事件，但由于图库允许用户使用Next / Prev图标查看所有图像，因此用户不太可能实际点击每张照片。

有任何想法吗？

谢谢，马特

Answer 1

我想我找到了一个很好的解决方案。 如果您只将“onComplete”键添加到fancybox（）对象传递Google Analytics分析自定义操作的值 – 它会在每次fancybox的内容完全加载时记录自定义操作…

如果您将其添加到您的fancybox，它将自动在My-Category下记录My-Action，链接标题用作标签：

'onComplete':function(){_gaq.push(['_trackEvent','My-Category','My-Action', this.title]);} 

示例fancybox电话：

 jQuery(document).ready(function(){ jQuery('a[rel=screenshots]').fancybox({ 'type':'image', 'transitionIn':'fade', 'transitionOut':'fade', 'onComplete':function(){_gaq.push(['_trackEvent','ComicBox','Screenshots', this.title]);} }); }); 

从示例链接调用：

 Screenshot 2 

上面的链接将在fancybox中打开图像，当图像完全加载时，它将触发谷歌分析，它将在“屏幕截图”下记录一个新动作，标记为“屏幕截图2” – 所有这些都在名为“ComicBox”的自定义事件类别下

希望这有帮助..如果没有 – 请查看我的实时代码http://www.hauntly.com/

Answer 2

您需要Google Analytics事件跟踪API 。

这允许您将事件插入在Google Analytics中注册的网页的JavaScript代码中。 像这样的东西：

 Play 

或者更现实地，这样的事情：

 function openLightbox(id) { // your code to open the lightbox here _gaq.push(['_trackEvent', 'Images', 'View', 'Specific Image Name']); } Play 

一点点Firebug探险显示Fancybox左右箭头是锚标签，如下所示：

所以你可以像这样挂钩click事件：

 $("#fancybox-right").click(function(){ alert("hi"); }); 

jQuery将此单击处理程序添加到单击处理程序的集合中，单击该按钮时将全部触发。 因此，将保留按钮的原始行为。

在这种情况下，爬到“#fancybox-inner”兄弟并检索图像url会更有用。

 $("#fancybox-right").click(function() { alert( $("#fancybox-inner > img").attr("src") ); }); 

或者，点击Google Analytics事件API

 $("#fancybox-right").click(function() { var image_url = $("#fancybox-inner > img").attr("src"); _gaq.push(['_trackEvent', 'Images', 'Click Right', image_url]); }); $("#fancybox-left").click(function() { var image_url = $("#fancybox-inner > img").attr("src"); _gaq.push(['_trackEvent', 'Images', 'Click Left', image_url]); });