Skip to content

Commit

Permalink
Merging Pixel Depth feature branch
Browse files Browse the repository at this point in the history
  • Loading branch information
@robflaherty
robflaherty committed Mar 1, 2014
2 parents f7abb7d + cca9b2b commit ca17688
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 35 deletions.
107 changes: 76 additions & 31 deletions jquery.scrolldepth.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,30 @@
* Licensed under the MIT and GPL licenses.
*/
;(function ( $, window, document, undefined ) {

"use strict";

var defaults = {
elements: [],
minHeight: 0,
elements: [],
percentage: true,
testing: false
},
userTiming: true,
pixelDepth: true
};

$window = $(window),
cache = [];
var $window = $(window),
cache = [],
lastPixelDepth = 0,
universalGA,
classicGA,
googleTagManager;

/*
* Plugin
*/

$.scrollDepth = function(options) {

var startTime = +new Date;

options = $.extend({}, defaults, options);
Expand All @@ -33,44 +38,79 @@
return;
}

/*
* Determine which version of GA is being used
* "ga", "_gaq", and "dataLayer" are the possible globals
*/

if (typeof ga === "function") {
universalGA = true;
}

if (typeof _gaq !== "undefined" && typeof _gaq.push === "function") {
classicGA = true;
}

if (typeof dataLayer !== "undefined" && typeof dataLayer.push === "function") {
googleTagManager = true;
}

// Establish baseline (0% scroll)
sendEvent('Percentage', 'Baseline');

/*
* Functions
*/

function sendEvent(action, label, timing) {
if (!options.testing) {
function sendEvent(action, label, scrollDistance, timing) {

if (typeof dataLayer !== "undefined" && typeof dataLayer.push === "function") {
dataLayer.push({'event':'ScrollDistance', 'eventCategory':'Scroll Depth', 'eventAction': action, 'eventLabel': label, 'eventValue': 1, 'eventNonInteraction': true});
if (googleTagManager) {

if (arguments.length > 2) {
dataLayer.push({'event':'ScrollTiming', 'eventCategory':'Scroll Depth', 'eventAction': action, 'eventLabel': label, 'eventTiming': timing});
}
} else {
dataLayer.push({'event': 'ScrollDistance', 'eventCategory': 'Scroll Depth', 'eventAction': action, 'eventLabel': label, 'eventValue': 1, 'eventNonInteraction': true});

if (options.pixelDepth && arguments.length > 2 && scrollDistance > lastPixelDepth) {
lastPixelDepth = scrollDistance;
dataLayer.push({'event': 'ScrollDistance', 'eventCategory': 'Scroll Depth', 'eventAction': 'Pixel Depth', 'eventLabel': rounded(scrollDistance), 'eventValue': 1, 'eventNonInteraction': true});
}

if (typeof ga === "function") {
ga('send', 'event', 'Scroll Depth', action, label, 1, {'nonInteraction': 1});
if (options.userTiming && arguments.length > 3) {
dataLayer.push({'event': 'ScrollTiming', 'eventCategory': 'Scroll Depth', 'eventAction': action, 'eventLabel': label, 'eventTiming': timing});
}

} else {

if (universalGA) {

ga('send', 'event', 'Scroll Depth', action, label, 1, {'nonInteraction': 1});

if (arguments.length > 2) {
ga('send', 'timing', 'Scroll Depth', action, timing, label);
}
if (options.pixelDepth && arguments.length > 2 && scrollDistance > lastPixelDepth) {
lastPixelDepth = scrollDistance;
ga('send', 'event', 'Scroll Depth', 'Pixel Depth', rounded(scrollDistance), 1, {'nonInteraction': 1});
}

if (typeof _gaq !== "undefined" && typeof _gaq.push === "function") {
_gaq.push(['_trackEvent', 'Scroll Depth', action, label, 1, true]);
if (options.userTiming && arguments.length > 3) {
ga('send', 'timing', 'Scroll Depth', action, timing, label);
}

}

if (classicGA) {

if (arguments.length > 2) {
_gaq.push(['_trackTiming', 'Scroll Depth', action, timing, label, 100]);
}
_gaq.push(['_trackEvent', 'Scroll Depth', action, label, 1, true]);

if (options.pixelDepth && arguments.length > 2 && scrollDistance > lastPixelDepth) {
lastPixelDepth = scrollDistance;
_gaq.push(['_trackEvent', 'Scroll Depth', 'Pixel Depth', rounded(scrollDistance), 1, true]);
}

if (options.userTiming && arguments.length > 3) {
_gaq.push(['_trackTiming', 'Scroll Depth', action, timing, label, 100]);
}

}

} else {
$('#console').html(action + ': ' + label);
}

}

function calculateMarks(docHeight) {
Expand All @@ -79,15 +119,15 @@
'50%' : parseInt(docHeight * 0.50, 10),
'75%' : parseInt(docHeight * 0.75, 10),
// 1px cushion to trigger 100% event in iOS
'100%': docHeight - 1
'100%': docHeight - 5
};
}

function checkMarks(marks, scrollDistance, timing) {
// Check each active mark
$.each(marks, function(key, val) {
if ( $.inArray(key, cache) === -1 && scrollDistance >= val ) {
sendEvent('Percentage', key, timing);
sendEvent('Percentage', key, scrollDistance, timing);
cache.push(key);
}
});
Expand All @@ -97,13 +137,18 @@
$.each(elements, function(index, elem) {
if ( $.inArray(elem, cache) === -1 && $(elem).length ) {
if ( scrollDistance >= $(elem).offset().top ) {
sendEvent('Elements', elem, timing);
sendEvent('Elements', elem, scrollDistance, timing);
cache.push(elem);
}
}
});
}

function rounded(scrollDistance) {
// Returns String
return (Math.floor(scrollDistance/250) * 250).toString();
}

/*
* Throttle function borrowed from:
* Underscore.js 1.5.2
Expand Down Expand Up @@ -171,7 +216,7 @@
}

// Check standard marks
if (options.percentage) {
if (options.percentage) {
checkMarks(marks, scrollDistance, timing);
}
}, 500));
Expand Down
27 changes: 23 additions & 4 deletions test/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,31 @@ <h1>jQuery Scroll Depth Test Page</h1>
<div id="main" style="background: #ccc; height: 2000px">#main</div>
<footer style="background: #999; height: 200px; display: block;">footer</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../jquery.scrolldepth.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../jquery.scrolldepth.js"></script>
<script>
var _gaq = {};
_gaq.push = function(data) {
console.log("_gaq.push(" + JSON.stringify(data) + ");");
};

var dataLayer = {};
dataLayer.push = function(data) {
console.log("dataLayer.push(" + JSON.stringify(data) + ");");
};

var ga = function(params) {
var args = Array.prototype.slice.call(arguments, 1);
console.log("ga(" + args.join(',') + ");");
};

_gaq = undefined;
dataLayer = undefined;
//ga = undefined;

$.scrollDepth({
testing: true,
elements: ['#main', 'footer']
elements: ['#main', 'footer'],
userTiming: false
});
</script>
</body>
Expand Down

0 comments on commit ca17688

Please sign in to comment.