事件範例2.html

<script>
  var jQuery = jQuery || undefined;

  (function($) {
    var dataLayer =  window.dataLayer || [];
    var eventCategoryString = '首頁';

    eventFun($);

    function eventFun($) {
      if ($) {
        setEvent();
      } else {
        // 載入jQ
        loadScript('https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js', function () {
          eventFun(jQuery);
        });
      }

      // 設置事件
      function setEvent() {
        var eventInfo = [
          ['.pc-a-bt td:nth-child(1)', '服務按鈕點擊', '預約租車'],
          ['.pc-a-bt td:nth-child(2)', '服務按鈕點擊', '加入會員'],
          ['.pc-b-bt td:nth-child(1)', '下方導航列點擊', '回和運租車首頁'],
          ['.pc-b-bt td:nth-child(2)', '下方導航列點擊', ''],
          ['.rbt a', '右側浮動banner點擊', '網路預約GO']
        ];

        for ( var k2 in eventInfo ){
          normalEvent(eventInfo[k2][0], eventInfo[k2][1], eventInfo[k2][2]);
        }
      }

      function normalEvent(thisTarget, thisAction, thisLabel) {
        var $this = '';
        var label = '';
        var ratio = 0;

        $(thisTarget).click(function() {
          $this = $(this);
          ratio = getScrollRatio(25);
          if (isNaN(ratio) || ratio > 100 || ratio < 0) return;  // 過濾掉錯誤的資訊

          if (thisTarget.indexOf('.rbt') > -1) {
            label = '網路預訂' + ' - ' + ratio + '%';
            pushDatalayer('右側浮動banner點擊', label);
          }
          if (thisTarget.indexOf('.pc-b-bt td:nth-child(2)') > -1) {
            label = $this.text().trim();
            pushDatalayer(thisAction, label);
            return;
          }

          pushDatalayer(thisAction, thisLabel);
        });
      }

      function pushDatalayer(thisAction, thisLabel) {
        dataLayer.push({
          event: 'cusevent',
          eventCategory: eventCategoryString,
          eventAction: thisAction,
          eventLabel: thisLabel
        });
      }

      function getScrollRatio(percentage){
        var winheight = $(window).height();
        var docheight = $(document).height();
        var scrollTop = $(window).scrollTop();
        var trackLength = docheight - winheight;
        return parseInt(scrollTop / trackLength * 100 / percentage) * percentage;
      }

      function loadScript(url, callback) {
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.async = 'async';
        script.src = url;
        document.body.appendChild(script);
        if (script.readyState) { //IE
          script.onreadystatechange = function () {
            if (script.readyState == 'complete' || script.readyState == 'loaded') {
              script.onreadystatechange = null;
              callback();
            }
          }
        } else { //非IE
          script.onload = function () {
            callback();
          }
        }
      }
    }
  })(jQuery)
</script>


<!-- /one-pager -->
<script>
  var jQuery = jQuery || undefined;

  (function($) {
    var dataLayer =  window.dataLayer || [];
    var eventCategoryString = 'simpos簡介頁';
    var areaEle = {
      0: {ele: '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > p:nth-child(2)', label: '產品比較圖'},
      1: {ele: '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > p:nth-child(6)', label: '7大優勢功能-1~2'},
      2: {ele: '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > p:nth-child(7)', label: '7大優勢功能-3~5'},
      3: {ele: '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > p:nth-child(8)', label: '7大優勢功能-6~7'},
      4: {ele: '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > p:nth-child(13)', label: 'Q&A_綠Ｑ1~Ｑ2'},
      5: {ele: '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > p:nth-child(14)', label: 'Q&A_綠Ｑ3~Ｑ4'},
      6: {ele: '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > p:nth-child(16)', label: 'Q&A_藍Ｑ1~Q2'},
      7: {ele: '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > p:nth-child(19)', label: 'Q&A_橘Ｑ1~Q2'},
      8: {ele: '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > p:nth-child(20)', label: 'Q&A_橘Ｑ3'},
      9: {ele: '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > p:nth-child(21)', label: 'Q&A_紅Ｑ1~Q2'}
    }

    eventFun($);

    function eventFun($) {
      // console.log('eventFun = ', $);
      if ($) {
        // console.log('aaa');
        setEvent(window.jQuery);
      } else {
        // console.log('bbb');
        // 載入jQ
        loadScript('https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', function () {
          // console.log('ccc');
          eventFun(window.jQuery);
        });
      }
    }

    // 設置事件
    function setEvent($) {
      console.log('setEvent');
      // 點擊上方按鈕
      $('body').on('click', '.chakra-stack .chakra-stack:eq(0) > div', function() {
        var label = $(this).text().trim();
        pushDatalayer('點擊上方按鈕', label);
      });

      $('body').on('click', '.chakra-stack .chakra-stack:eq(1) .chakra-button', function() {
        pushDatalayer('點擊上方按鈕', '日夜模式切換');
      });

      // 產品比較-免試
      $('body').on('click', '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > p:nth-child(4) > a', function() {
        pushDatalayer('點擊按鈕', '產品比較-免試');
      });

      // 7大優勢-免試
      $('body').on('click', '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > p:nth-child(10) > a', function() {
        pushDatalayer('點擊按鈕', '7大優勢-免試');
      });

      // Q&A_綠-免試
      $('body').on('click', '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > p:nth-child(15) > a', function() {
        pushDatalayer('點擊按鈕', 'Q&A_綠-免試');
      });

      // Q&A_藍-開啟Line客服
      $('body').on('click', '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > div:nth-child(18) > div > a', function() {
        pushDatalayer('點擊按鈕', 'Q&A_藍-開啟Line客服');
      });

      // 更多ＦＡＱ
      $('body').on('click', '#__next > div.css-nchllk > div > div > div.css-68o9ad > div > p:nth-child(22) > a', function() {
        pushDatalayer('點擊按鈕', '更多ＦＡＱ');
      });

      // 頁尾Line客服
      $('body').on('click', '#linelink', function() {
        pushDatalayer('點擊按鈕', '頁尾Line客服');
      });

      $(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 $ = window.jQuery;
      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) {
      if (location.pathname === '/one-pager') {
        dataLayer.push({
          event: 'cusevent',
          eventCategory: eventCategoryString,
          eventAction: thisAction,
          eventLabel: thisLabel
        });
      }
    }

    function loadScript(url, callback) {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.async = 'async';
      script.src = url;
      document.body.appendChild(script);
      if (script.readyState) { //IE
        script.onreadystatechange = function () {
          if (script.readyState == 'complete' || script.readyState == 'loaded') {
            script.onreadystatechange = null;
            callback();
          }
        }
      } else { //非IE
        script.onload = function () {
          callback();
        }
      }
    }
  })(jQuery)
</script>