項目顯示出一半時觸發事件2.html

<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>