Data label option for elements about scroll-depth HOT 1 CLOSED

First off, great plugin. I started to hack together a test for a single page and thought hmm, maybe there is a plugin that has all this figured out. I was in luck. Almost immediately I ran into the caveat @alexei encountered which is the actions and labels auto generated are not very intuitive. I hacked this very simple solution into the code and it works great. It is just 2 new lines and a change to one.

function checkElements(elements, scrollDistance, timing) {
  $.each(elements, function(index, elem) {
    if ( $.inArray(elem, cache) === -1 && $(elem).length ) {
      if ( scrollDistance >= $(elem).offset().top ) {
        var action = ($(elem).data('sd-action') != 'undefined' ? $(elem).data('sd-action') : 'Elements');
        var label = ($(elem).data('sd-label') != 'undefined' ? $(elem).data('sd-label') : elem);
        sendEvent(action, label, scrollDistance, timing);
        cache.push(elem);
      }
    }
  });
}

As @alexei points out, I believe the data attributes are the right way to go about it so pages don't need to build and include inline scripts, we can simply tag html with data-* attributes. I even took this a step further to write a global init script so I I only need data attributes to do anything. It looks like this:

jQuery(function() {
    var data_sd = $('[data-sd]');
    if(data_sd.length) {
        jQuery.scrollDepth({percentage: false, pixelDepth: false, userTiming: false});
        $.each(data_sd, function(){
            jQuery.scrollDepth.addElements(['#' + $(this).attr('id')]);
        });
    }
});

Now I can just happily add data attributes to any html element and have it tracked with the actions and labels I want:

<div id="track-me" data-sd="true" data-sd-action="AB Test 1" data-sd-label="Comments">

If you decide to go with the data-* approach and allow for a global constructor it would be great if your code looked for $('[data-sd]') during initialization so we could just call jQuery.scrollDepth(). Maybe on option can be passed telling the bindScrollDepth method to look for elements with 'data-sd' so it only bothers to look upon request. Also, addElements() accepting a jQuery object so an id is not even necessary would be nice too.

from scroll-depth.