Tracking jQuery Slider (bxSlider) with Google Analytics

Question

Working to develop a slideshow with the ability to be tracked (via Universal Analytics).

Utilizing a variety of languages here, including jQuery and C# to build the slideshow.

Here's the code I'm having an issue with:

Working

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

Not Working

$('.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');
});

Slideshow example: http://edit-wwwprep.rose-hulman.edu

Thank you!

Answer 1

There are no DOM nodes that match the selector .imageCaption a ....so that's why that one doesn't work.

As for the pager link, I'm thinking that at the time you try to attach the event listener, those elements haven't been created (hence the reason why bxSlider provides you with an onSliderLoad callback.

I personally bind the majority of my listeners to the document and use them like this:

$(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');
   })

That way you never have to worry about rebinding events when elements may get added/removed. For most simple pages, the performance hit of doing this is not even remotely an issue.