diff --git a/jquery.scrolldepth.js b/jquery.scrolldepth.js index bad5774..2ae84f8 100644 --- a/jquery.scrolldepth.js +++ b/jquery.scrolldepth.js @@ -32,7 +32,8 @@ pixelDepth: true, nonInteraction: true, gaGlobal: false, - gtmOverride: false + gtmOverride: false, + elementsWithMarks : false }; var $window = $(window), @@ -92,19 +93,17 @@ * Functions */ - function sendEvent(action, label, scrollDistance, timing) { - + function sendEvent(action, label, scrollDistance, timing, elem) { if (standardEventHandler) { - standardEventHandler({'event': 'ScrollDistance', 'eventCategory': 'Scroll Depth', 'eventAction': action, 'eventLabel': label, 'eventValue': 1, 'eventNonInteraction': options.nonInteraction}); - - if (options.pixelDepth && arguments.length > 2 && scrollDistance > lastPixelDepth) { + standardEventHandler({'element' : elem, 'event': 'ScrollDistance', 'eventCategory': 'Scroll Depth', 'eventAction': action, 'eventLabel': label, 'eventValue': 1, 'eventNonInteraction': options.nonInteraction}); + if (options.pixelDepth && arguments.length > 2 && scrollDistance >= lastPixelDepth) { lastPixelDepth = scrollDistance; - standardEventHandler({'event': 'ScrollDistance', 'eventCategory': 'Scroll Depth', 'eventAction': 'Pixel Depth', 'eventLabel': rounded(scrollDistance), 'eventValue': 1, 'eventNonInteraction': options.nonInteraction}); + standardEventHandler({'element' : elem, 'event': 'ScrollDistance', 'eventCategory': 'Scroll Depth', 'eventAction': 'Pixel Depth', 'eventLabel': rounded(scrollDistance), 'eventValue': 1, 'eventNonInteraction': options.nonInteraction}); } if (options.userTiming && arguments.length > 3) { - standardEventHandler({'event': 'ScrollTiming', 'eventCategory': 'Scroll Depth', 'eventAction': action, 'eventLabel': label, 'eventTiming': timing}); + standardEventHandler({'element' : elem, 'event': 'ScrollTiming', 'eventCategory': 'Scroll Depth', 'eventAction': action, 'eventLabel': label, 'eventTiming': timing}); } } else { @@ -143,34 +142,50 @@ } - function calculateMarks(docHeight) { + function calculateMarks(elemHeight) { return { - '25%' : parseInt(docHeight * 0.25, 10), - '50%' : parseInt(docHeight * 0.50, 10), - '75%' : parseInt(docHeight * 0.75, 10), + '25%' : parseInt(elemHeight * 0.25, 10), + '50%' : parseInt(elemHeight * 0.50, 10), + '75%' : parseInt(elemHeight * 0.75, 10), // Cushion to trigger 100% event in iOS - '100%': docHeight - 5 + '100%': elemHeight - 5 }; } - function checkMarks(marks, scrollDistance, timing) { + function checkMarks(marks, scrollDistance, timing, element) { + var _cache = (element === document ? cache : element.cache); + // Check each active mark $.each(marks, function(key, val) { - if ( $.inArray(key, cache) === -1 && scrollDistance >= val ) { - sendEvent('Percentage', key, scrollDistance, timing); - cache.push(key); - } + if ( $.inArray(key, _cache) === -1 && scrollDistance >= val ) { + sendEvent('Percentage', key, scrollDistance, timing, element); + _cache.push(key); + } }); } function checkElements(elements, scrollDistance, timing) { $.each(elements, function(index, elem) { - if ( $.inArray(elem, cache) === -1 && $(elem).length ) { - if ( scrollDistance >= $(elem).offset().top ) { - sendEvent('Elements', elem, scrollDistance, timing); - cache.push(elem); + if ( $.inArray(elem, cache) === -1 && $(elem).length ) { + var top = $(elem).offset().top; + if (options.elementsWithMarks) { + if (elem.cache === undefined) { + elem.cache = []; + } + var height = $(elem).height(); + var bottom = top + height; + var marks = calculateMarks(bottom); + checkMarks(marks, scrollDistance, timing, elem); + + if (scrollDistance >= bottom) { + cache.push(elem); + } + } + else if ( scrollDistance >= top) { + sendEvent('Elements', elem, scrollDistance, timing, elem); + cache.push(elem); + } } - } }); } @@ -308,7 +323,7 @@ // Check standard marks if (options.percentage) { - checkMarks(marks, scrollDistance, timing); + checkMarks(marks, scrollDistance, timing, document); } }, 500));