Skip to content
This repository has been archived by the owner on Jun 4, 2022. It is now read-only.

Feature/custom mark #3

Closed
wants to merge 6 commits into from
Closed

Feature/custom mark #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8329c6a
correct the script call
Dec 10, 2015
8891431
add calculated mark with custom gap
Dec 10, 2015
1091d6a
custom marker array
Dec 10, 2015
71c31d3
fix calc
Dec 10, 2015
fbe895b
add -5px on 100%scroll
Dec 10, 2015
a0652ef
add custom mark
Dec 10, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 23 additions & 11 deletions gascrolldepth.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@
pixelDepth: true,
nonInteraction: true,
gaGlobal: false,
gtmOverride: false
gtmOverride: false,
markGap: 25,
customMarks: []
};

var cache = [],
Expand Down Expand Up @@ -267,16 +269,25 @@

}

}
}

function calculateMarks(docHeight) {
return {
'25%' : parseInt(docHeight * 0.25, 10),
'50%' : parseInt(docHeight * 0.50, 10),
'75%' : parseInt(docHeight * 0.75, 10),
// 1px cushion to trigger 100% event in iOS
'100%': docHeight - 5
};
function calculateMarks(docHeight, gap, customMarks) {
var marks = {};
gap = (!gap) ? 25 : gap;

for (var i = 1; i < (100 / gap); i++){
marks[gap * i + '%'] = parseInt(docHeight * gap * i / 100, 10);
}

if (customMarks.constructor === Array) {
customMarks.forEach(function (mark) {
marks[mark + '%'] = parseInt(docHeight * mark / 100, 10);
});
}

marks['100%'] = docHeight - 5;

return marks;
}

function checkMarks(marks, scrollDistance, timing) {
Expand Down Expand Up @@ -363,11 +374,12 @@
scrollDistance = getPageYOffset() + winHeight,

// Recalculate percentage marks
marks = calculateMarks(docHeight),
marks = calculateMarks(docHeight, options.markGap, options.customMarks),

// Timing
timing = +new Date - startTime;


// If all marks already hit, unbind scroll event
if (cache.length >= 4 + options.elements.length) {
removeEventListener(window, 'scroll', scrollEventHandler);
Expand Down
7 changes: 4 additions & 3 deletions test/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ <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="../scrolldepth.js"></script>
<script src="../gascrolldepth.js"></script>
<script>
function log(str) {
if ( typeof console !== 'undefined' && typeof console.log !== 'undefined' ) {
Expand Down Expand Up @@ -40,10 +40,11 @@ <h1>jQuery Scroll Depth Test Page</h1>
//dataLayer = undefined;
//ga = undefined;

scrollDepth.init({
gascrolldepth.init({
elements: ['#main', 'footer'],
userTiming: true,
gtmOverride: true
gtmOverride: true,
customMarks: [66]
//eventHandler: function(data) {
//log(data)
//}
Expand Down
4 changes: 2 additions & 2 deletions test/index.jquery.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h1>jQuery Scroll Depth Test Page</h1>
<footer style="background: #999; height: 200px; display: block;">footer</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="../scrolldepth.js"></script>
<script src="../gascrolldepth.js"></script>
<script>
function log(str) {
if ( typeof console !== 'undefined' && typeof console.log !== 'undefined' ) {
Expand Down Expand Up @@ -41,7 +41,7 @@ <h1>jQuery Scroll Depth Test Page</h1>
//dataLayer = undefined;
//ga = undefined;

$.scrollDepth({
$.gascrolldepth({
elements: ['#main', 'footer'],
userTiming: true,
gtmOverride: true
Expand Down