跟踪jQuery滑块(bxSlider)与谷歌分析

Question

正在开发能够被跟踪的幻灯片(通过Universal Analytics)。

这里使用多种语言，包括jQuery和c#来构建幻灯片。

下面是我遇到问题的代码:

$('.bx-prev').on('click', function(){
    ga('send', 'event', 'Carousel', 'click', 'Previous Slide' );
});
$('.bx-next').on('click', function(){
    ga('send', 'event', 'Carousel', 'click', 'Next Slide');
});

不工作

$('.bx-pager-link').on('click', function(){
    ga('send', 'event', 'Carousel', 'click', 'Pager Item');
});
$('.imageCaption a').on('click', function(){
    ga('send', 'event', 'Carousel', 'click', 'Caption Link - Story');
});

幻灯片示例:http://edit-wwwprep.rose-hulman.edu

谢谢!

Answer 1

没有匹配选择器.imageCaption a ....的DOM节点这就是为什么这个不行

至于分页链接，我认为在您尝试附加事件侦听器时，这些元素尚未创建(因此bxSlider为您提供onSliderLoad回调的原因)。

我个人将大多数侦听器绑定到文档，并像这样使用它们:

$(document)
   .on('click','.bx-prev',function() {
       ga('send', 'event', 'Carousel', 'click', 'Previous Slide' );
   })
   .on('click','.bx-next',function() {
       ga('send', 'event', 'Carousel', 'click', 'Next Slide' );
   })
   .on('click','.bx-pager-link',function() {
       ga('send', 'event', 'Carousel', 'click', 'Pager Item');
   })

这样，当添加/删除元素时，您永远不必担心重新绑定事件。对于大多数简单的页面，这样做对性能的影响根本不是问题。