From 1906e50e561309975cc754902a60231cce4850ed Mon Sep 17 00:00:00 2001 From: Matias Fuster Date: Thu, 4 Aug 2016 18:31:13 -0300 Subject: [PATCH 1/3] feat(standardEventHandler): add reference to the element that is being tracked for scroll distance --- jquery.scrolldepth.js | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/jquery.scrolldepth.js b/jquery.scrolldepth.js index bad5774..e8f3112 100644 --- a/jquery.scrolldepth.js +++ b/jquery.scrolldepth.js @@ -92,19 +92,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 { @@ -153,11 +151,11 @@ }; } - function checkMarks(marks, scrollDistance, timing) { + function checkMarks(marks, scrollDistance, timing, element) { // Check each active mark $.each(marks, function(key, val) { if ( $.inArray(key, cache) === -1 && scrollDistance >= val ) { - sendEvent('Percentage', key, scrollDistance, timing); + sendEvent('Percentage', key, scrollDistance, timing, element); cache.push(key); } }); @@ -167,7 +165,7 @@ $.each(elements, function(index, elem) { if ( $.inArray(elem, cache) === -1 && $(elem).length ) { if ( scrollDistance >= $(elem).offset().top ) { - sendEvent('Elements', elem, scrollDistance, timing); + sendEvent('Elements', elem, scrollDistance, timing, elem); cache.push(elem); } } @@ -308,7 +306,7 @@ // Check standard marks if (options.percentage) { - checkMarks(marks, scrollDistance, timing); + checkMarks(marks, scrollDistance, timing, document); } }, 500)); From 1e5cbddf64daf4b8a05be0ac92f0b87d6e60957a Mon Sep 17 00:00:00 2001 From: Matias Fuster Date: Thu, 4 Aug 2016 18:35:08 -0300 Subject: [PATCH 2/3] feat(checkElements): support percentage marks on elements --- jquery.scrolldepth.js | 37 +++++++++++++++++++++++++++---------- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/jquery.scrolldepth.js b/jquery.scrolldepth.js index e8f3112..4059d35 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), @@ -152,23 +153,39 @@ } 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, element); - 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, elem); - 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); + } } - } }); } From 400999c484812261d2a3c091c78fcd891d0eb9b9 Mon Sep 17 00:00:00 2001 From: Matias Fuster Date: Thu, 4 Aug 2016 18:43:13 -0300 Subject: [PATCH 3/3] style(calculateMarks): improve parameter name as it refers to the element's height now, not only the document. --- jquery.scrolldepth.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/jquery.scrolldepth.js b/jquery.scrolldepth.js index 4059d35..2ae84f8 100644 --- a/jquery.scrolldepth.js +++ b/jquery.scrolldepth.js @@ -142,13 +142,13 @@ } - 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 }; }