Bumped version for release, fixed license, adjusted Readme to list br…

…owser support

Gruntfile.js

@@ -9,12 +9,20 @@ module.exports = function(grunt) {
                 ' * Written by @notdanwilkerson',
                 ' * Documentation: https://github.com/lunametrics/gascroll/',
                 ' * Licensed under the Creative Commons 4.0 Attribution Public License',
-                ' */'].join('\r\n');
+                ' */'
+  ].join('\r\n');
 
   grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
     jshint: {
-      files: ['./src/lunametrics-scroll-tracking.gtm.js']
+      // files: ['./src/*.js'],
+      ignore_warning: {
+        options: {
+          '-W030': true,
+          '-W058': true
+        },
+        src: ['./src/*.js']
+      }
     },
     uglify: {
       options: {
@@ -109,7 +117,7 @@ module.exports = function(grunt) {
 
     oldContainer.containerVersion.tag[oldTag].parameter[oldParameter].value = '<script type="text/javascript" id="gtm-scroll-tracking">\n' +
       newScript +
-      '\n</script>'
+      '\n</script>';
 
     fs.writeFileSync(options.build.dest, jsBeautify(JSON.stringify(oldContainer)));
 

LICENSE.MD

@@ -1,3 +1,5 @@
+The MIT License (MIT)
+
 Copyright (c) 2016 LunaMetrics, LLC
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

lunametrics-scroll-tracking.gtm.js

@@ -2,7 +2,133 @@
 
   'use strict';
 
-  var cache = {};
+  // Global cache we'll use to ensure no double-tracking occurs
+  var MarksAlreadyTracked = {};
+
+  // Backwards compatible with old every setting, which was single value
+  if (config.distances.percentages && config.distances.percentages.every) {
+
+    if (!isArray_(config.distances.percentages.every)) {
+
+      config.distances.percentages.every = [config.distances.percentages.every];
+
+    }
+
+  }
+
+  // Backwards compatible with old every setting, which was single value
+  if (config.distances.pixels && config.distances.pixels.every) {
+
+    if (!isArray_(config.distances.pixels.every)) {
+
+      config.distances.pixels.every = [config.distances.pixels.every];
+
+    }
+
+  }
+
+  // Get a hold of any relevant elements, if specified in config
+  var elementDistances = (function(selectors) {
+
+    // If no selectors specified, short circuit here
+    if (!selectors) return;
+
+    // Create a cache to store positions of elements temporarily
+    var cache = {};
+    var counter = 0;
+
+    // Fetch latest positions
+    _update();
+
+    // Return a function that can be called to get a map of element positions
+    return function () {
+
+      // Clone here to prevent inheritance from getMarks step
+      var shallowClone = {};
+      var key;
+
+      counter++;
+
+      // If temp cache counter is greater than 10, re-poll elements
+      if (counter > 10) {
+
+        _update();
+        counter = 0;
+
+      }
+
+      for (key in cache) {
+
+        shallowClone[key] = cache[key];
+
+      }
+
+      return shallowClone;
+
+    };
+
+    function _update() {
+
+      var selector,
+          markName,
+          els,
+          el,
+          y,
+          i;
+      // Clear current cache
+      cache = {};
+
+      if (selectors.each) {
+
+        for (i = 0; i < selectors.each.length; i++) {
+
+          selector = selectors.each[i];
+
+          if (!MarksAlreadyTracked[selector]) {
+
+            el = document.querySelector(selector); 
+
+            if (el) cache[selector] = getNodeDistanceFromTop(el);
+
+          }
+
+        }
+
+      }
+
+      if (selectors.every) {
+
+        for (i = 0; i < selectors.every.length; i++) {
+
+          selector = selectors.every[i];
+          els = document.querySelectorAll(selector);
+
+          // If the last item in the selected group has been tracked, we skip it
+          if (els.length && !MarksAlreadyTracked[selector + ':' + (els.length - 1)]) {
+
+            for (y = 0; y < els.length; y++) {
+
+              markName = selector + ':' + y; 
+
+              // We also check at the individual element level
+              if (!MarksAlreadyTracked[markName]) {
+
+                el = els[y];
+                cache[markName] = getNodeDistanceFromTop(el);
+
+              }
+
+            }
+
+          }
+
+        }
+
+      }
+
+    }
+
+  })(config.distances.elements);
 
   // If our document is ready to go, fire straight away
   if(document.readyState !== 'loading') {
@@ -40,9 +166,12 @@
 
   function getMarks(_docHeight, _offset) {
 
-    var marks = {};
+    var marks = elementDistances() || {};
     var percents = [];
     var pixels = [];
+    var everyPercent,
+        everyPixel,
+        i;
 
     if(config.distances.percentages) {
 
@@ -54,8 +183,12 @@
 
       if(config.distances.percentages.every) {
 
-        var _everyPercent = every_(config.distances.percentages.every, 100);
-        percents = percents.concat(_everyPercent);
+        for (i = 0; i < config.distances.percentages.every.length; i++) {
+
+          everyPercent = every_(config.distances.percentages.every[i], 100);
+          percents = pixels.concat(everyPercent);
+
+        }
 
       }
 
@@ -71,8 +204,12 @@
 
       if(config.distances.pixels.every) {
 
-        var _everyPixel = every_(config.distances.pixels.every, _docHeight);
-        pixels = pixels.concat(_everyPixel);
+        for (i = 0; i < config.distances.pixels.every.length; i++) {
+
+          everyPixel = every_(config.distances.pixels.every[i], _docHeight);
+          pixels = pixels.concat(everyPixel);
+
+        }
 
       }
 
@@ -126,19 +263,27 @@
 
   function checkDepth() {
 
-    var _bottom = parseBorder_(config.bottom);
-    var _top = parseBorder_(config.top);
-
+    var _bottom = parseScrollBorder(config.bottom);
+    var _top = parseScrollBorder(config.top);
     var height = docHeight(_bottom, _top);
     var marks = getMarks(height, (_top || 0));
     var _curr = currentPosition();
-    var key;
+    var target,
+        key;
 
     for(key in marks) {
 
-      if(_curr > marks[key] && !cache[key]) {
+      target = marks[key];
+
+      // If we've scrolled past the mark, we haven't tracked it yet, and it's in range, track the mark
+      if(
+        _curr > target && 
+        !MarksAlreadyTracked[key] && 
+        target < (_bottom || Infinity) && 
+        target > (_top || 0)
+      ) {
 
-        cache[key] = true;
+        MarksAlreadyTracked[key] = true;
         fireAnalyticsEvent(key);
 
       }
@@ -176,7 +321,7 @@
 
   }
 
-  function parseBorder_(border) {
+  function parseScrollBorder(border) {
 
     if(typeof border === 'number' || parseInt(border, 10)) {
 
@@ -188,10 +333,8 @@
 
       // If we have an element or a query selector, poll getBoundingClientRect
       var el = border.nodeType === 1 ? border : document.querySelector(border);
-      var docTop = document.body.getBoundingClientRect().top;
-      var _elTop = Math.floor(el.getBoundingClientRect().top - docTop);
 
-      return _elTop;
+      return getNodeDistanceFromTop(el); 
 
     } catch (e) {
 
@@ -252,6 +395,7 @@
 
   }
 
+
   /*
   * Throttle function borrowed from:
   * Underscore.js 1.5.2
@@ -315,6 +459,26 @@
 
   }
 
+  // Helper for fetching top of element
+  function getNodeDistanceFromTop(node) {
+
+    var nodeTop = node.getBoundingClientRect().top;
+    // https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollX
+    var docTop = (window.pageYOffset !== undefined) ?
+      window.pageYOffset :
+      (document.documentElement || document.body.parentNode || document.body).scrollTop; 
+
+    return nodeTop + docTop;
+
+  }
+
+  // Helper to check if something is an Array
+  function isArray_(thing) {
+
+    return thing instanceof Array;
+
+  }
+
 })(document, window, {
   // Use 2 to force Classic Analytics hits and 1 for Universal hits
   'forceSyntax': false,
@@ -324,12 +488,17 @@
     // Configure percentages of page you'd like to see if users scroll past
     'percentages': {
       'each': [10,90],
-      'every': 25
+      'every': [25]
     },
     // Configure for pixel measurements of page you'd like to see if users scroll past
     'pixels': {
       'each': [],
-      'every': null
+      'every': []
+    },
+    // Configure elements you'd like to see users scroll past (using CSS Selectors)
+    'elements': {
+      'each': [],
+      'every': []
     }
   },
   // Accepts a number, DOM element, or query selector to determine the top of the scrolling area
@@ -342,7 +511,7 @@
   'label': document.location.pathname
 });
 /*
- * v1.0.2
+ * v1.1.0
  * Created by the Google Analytics consultants at http://www.lunametrics.com/
  * Written by @notdanwilkerson
  * Documentation: https://github.com/lunametrics/gascroll/

package.json

@@ -14,7 +14,7 @@
   },
   "devDependencies": {
     "grunt": "^0.4.5",
-    "grunt-contrib-jshint": "~0.10.0",
+    "grunt-contrib-jshint": "~0.12.0",
     "grunt-contrib-uglify": "^0.9.1",
     "js-beautify": "1.5.7"
   },