Last active
June 30, 2021 08:54
-
-
Save fergusKe/da02967da9ae862a8db81f1a8af44c25 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script> | |
(function($) { | |
var eventCategoryString = '2019童書展熱銷主打活動頁'; | |
var $window = $(window); | |
var areaEle = { | |
0: {ele: 'header', label: '1.首圖'}, | |
1: {ele: '#area1', label: '2.熱門排行'}, | |
2: {ele: '#area2', label: '3.精選66折'}, | |
3: {ele: '#area3', label: '4.超值99'}, | |
4: {ele: '#area4', label: '5.滿額贈'} | |
} | |
$window.scroll(function() { | |
for(idx in areaEle){ | |
if(isScrolledIntoView(areaEle[idx].ele)) { | |
var action = '滾軸事件'; | |
var label = areaEle[idx].label; | |
console.log('label = ', label); | |
pushDatalayer(action, label); | |
// 送過刪除 | |
delete areaEle[idx]; | |
} | |
} | |
}).scroll(); | |
function isScrolledIntoView(pEle) { | |
var $ele = $(pEle); | |
var eleTop = $ele.offset().top; | |
var eleHeight = $ele.height(); | |
var eleHalfHeight = eleHeight / 2; | |
var windowHeight = $window.height(); | |
var windowHalfHeight = windowHeight / 2; | |
var scrollTop = $window.scrollTop(); | |
var scrollPosition = scrollTop + windowHeight; | |
// 滑到項目顯示出一半的位置 || 螢幕一半的位置 | |
return (scrollPosition >= eleTop + eleHalfHeight) || (scrollPosition >= eleTop + windowHalfHeight) | |
} | |
function pushDatalayer(thisAction, thisLabel) { | |
dataLayer.push({ | |
event: 'cusevent', | |
eventCategory: eventCategoryString, | |
eventAction: thisAction, | |
eventLabel: thisLabel | |
}); | |
} | |
})(jQuery) | |
</script> | |
<!-- 純js --> | |
<script> | |
$(function() { | |
var dataLayer = window.dataLayer || []; | |
var eventCategoryString = '國考實驗'; | |
var areaEle = { | |
0: {ele: document.querySelectorAll('#page-top')[0], label: '1.國考戰場'}, | |
1: {ele: document.querySelectorAll('#part1')[0], label: '2.為考生加油'}, | |
2: {ele: document.querySelectorAll('#part2')[0], label: '3.常見Q&A'}, | |
3: {ele: document.querySelectorAll('#part3')[0], label: '4.關懷講座'}, | |
4: {ele: document.querySelectorAll('#part4')[0], label: '5.宅家線上學'}, | |
5: {ele: document.querySelectorAll('#part5')[0], label: '6.上榜好機會'}, | |
6: {ele: document.querySelectorAll('#part6')[0], label: '7.築夢好課程'}, | |
7: {ele: document.querySelectorAll('#part6 #ticket_pt')[0], label: '8.公職教育卷'}, | |
8: {ele: document.querySelectorAll('#part7')[0], label: '9.限時fun優惠'} | |
} | |
var scrollEvent = function() { | |
// console.log('scroll'); | |
for(idx in areaEle){ | |
if(isScrolledIntoView(areaEle[idx].ele)) { | |
var action = '滾軸'; | |
var label = areaEle[idx].label; | |
console.log('label = ', label); | |
pushDatalayer(action, label); | |
// 送過刪除 | |
delete areaEle[idx]; | |
} | |
} | |
}; | |
function isScrolledIntoView(pEle) { | |
var $ele = $(pEle); | |
var eleTop = $ele.offset().top; | |
var eleHeight = $ele.height(); | |
var eleHalfHeight = eleHeight / 2; | |
var h = document.documentElement, | |
b = document.body, | |
st = 'scrollTop', | |
sh = 'scrollHeight'; | |
var windowHeight = h.clientHeight; | |
var scrollTop = h[st]; | |
var scrollPosition = scrollTop + windowHeight; | |
// console.log('windowHeight = ', windowHeight); | |
// console.log('scrollTop = ', scrollTop); | |
// console.log('scrollPosition = ', scrollPosition); | |
// 滑到項目顯示出一半的位置 || 螢幕一半的位置 | |
return (scrollPosition >= (eleTop + eleHalfHeight) || scrollPosition >= (eleTop + windowHeight)) | |
} | |
function pushDatalayer(thisAction, thisLabel) { | |
dataLayer.push({ | |
event: 'cusevent', | |
eventCategory: eventCategoryString, | |
eventAction: thisAction, | |
eventLabel: thisLabel | |
}); | |
} | |
window.addEventListener('scroll', scrollEvent); | |
scrollEvent(); | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment