将Google代码管理器

Question

<script id="gtm-hover-listener">
  (function(document, window) {

    var qs = '{{Constant - Hover Listener CSS Selectors}}'.split(',');
    var addEvent = {{fn.addEvent}};
    var removeEvent = {{fn.removeEvent}};
    var i;

    for (i = 0; i < qs.length; i++) {

      var els;

      try {

        els = document.querySelectorAll(qs[i]);

      } catch(e) { 

        // If we're in Debug Mode, warn the tester
        if ({{Debug Mode}}) {

          throw 'DOMException: GTM Hover Listener - Invalid Query Selector in variable Constant - Hover Listener CSS Selectors; ' + e.message;

        }

      }
      var k;

      for (k = 0; k < els.length; k++) {

        var el = els[k];
        addEvent(el, 'scroll', bind_);

      }

    }

    function bind_(evt) {
      
      var el = evt.target;
        containerHeight = $('.coverage-content').height();
        mathHeight = containerHeight/95;
        scrollDistance = $('.coverage-content').scrollTop();
        console.log (scrollDistance)
        if (scrollDistance > mathHeight){

      // Fire our push as long as they don't leave in less than half a second
    
        dataLayer.push({
          event: "scroll",
          attributes: {
            element: el
          }
        });

      }
    }


  })(document, window);
</script>

<ul class="coverage-content"><li class="n pname">AARP MedicareRx Preferred</li><li class="p"><img src="../assets/img/check.jpg"></li><li class="r"></li><hr><li class="n pname">AARP MedicareRx Saver Plus</li><li class="p"><img src="../assets/img/check.jpg"></li><li class="r"></li><hr><li class="n pname">Aetna Commercial Fully Insured HMO 3 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Fully Insured HMO 4 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Fully Insured HMO 5 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Fully Insured POS 3 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Fully Insured POS 4 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Fully Insured POS 5 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Fully Insured PPO 3 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Fully Insured PPO 4 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Fully Insured PPO 5 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Self Insured HMO 3 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Self Insured HMO 4 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Self Insured HMO 5 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Self Insured POS 3 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Self Insured POS 4 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Self Insured POS 5 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Self Insured PPO 3 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Self Insured PPO 4 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Commercial Self Insured PPO 5 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna FEHBP HealthFund (CDHP/HDHP)</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna FEHBP Open Access Arizona</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Medicare Rx Saver </li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Fully Insured HMO 3 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Premier Fully Insured HMO 4 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Premier Fully Insured HMO 5 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Premier Fully Insured POS 3 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Premier Fully Insured POS 4 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Premier Fully Insured POS 5 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Premier Fully Insured PPO 3 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Premier Fully Insured PPO 4 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Premier Fully Insured PPO 5 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Premier Plus Fully Insured HMO 3 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Fully Insured HMO 4 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Fully Insured HMO 5 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Fully Insured POS 3 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Fully Insured POS 4 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Fully Insured POS 5 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Fully Insured PPO 3 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Fully Insured PPO 4 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Fully Insured PPO 5 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Self Insured HMO 3 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Self Insured HMO 4 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Self Insured HMO 5 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Self Insured POS 3 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Self Insured POS 4 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Self Insured POS 5 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Self Insured PPO 3 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Self Insured PPO 4 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Premier Plus Self Insured PPO 5 Tier</li><li class="p"></li><li class="r"></li><hr><li class="n pname">Aetna Value Plus HMO 5 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Value Plus POS 5 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr><li class="n pname">Aetna Value Plus PPO 5 Tier</li><li class="p"></li><li class="r"><img src="../assets/img/check.jpg"></li><hr></ul>

我正在使用Google跟踪代码管理器，并将滚动事件监听器应用于滚动部分。截面高度将根据下拉菜单中选择的选项而有所不同。我想计算用户滚动超过5％的时间。

在某些情况下，下拉菜单不会生成可滚动窗口。在这种情况下，我需要返回一个说明这样的声明。

以下是我正在使用的当前代码。

<script id="gtm-hover-listener">
  (function(document, window) {

    var qs = '{{Constant - Hover Listener CSS Selectors}}'.split(',');
    var addEvent = {{fn.addEvent}};
    var removeEvent = {{fn.removeEvent}};
    var i;

    for (i = 0; i < qs.length; i++) {

      var els;

      try {

        els = document.querySelectorAll(qs[i]);

      } catch(e) { 

        // If we're in Debug Mode, warn the tester
        if ({{Debug Mode}}) {

          throw 'DOMException: GTM Hover Listener - Invalid Query Selector in variable Constant - Hover Listener CSS Selectors; ' + e.message;

        }

      }
      var k;

      for (k = 0; k < els.length; k++) {

        var el = els[k];
        addEvent(el, 'scroll', bind_);

      }

    }

    function bind_(evt) {
      
      var el = evt.target;
        containerHeight = $('.coverage-content').height();
        mathHeight = containerHeight/95;
        scrollDistance = $('.coverage-content').scrollTop();
        console.log (scrollDistance)
        if (scrollDistance > mathHeight){

      // Fire our push as long as they don't leave in less than half a second
    
        dataLayer.push({
          event: "scroll",
          attributes: {
            element: el
          }
        });

      }
    }


  })(document, window);
</script>

Answer 1

根据你的目标，你的JS应该是这样的：

<script>
    $(document).ready(function(){

        if ($('.coverage-content')[0].scrollHeight<$('.coverage-content').height()) {
            //datalayer send no scroll
        }
        else {
            $('.coverage-content').scroll(function() { 
                var $this = $(this);
                var state = $('#state-selector').val();
                var firstLetter = $('#first-letter').val();
                var firstLetter = $('#plan-type').val();
                if ($this.attr('datalayer-sent') == undefined)
                {

                    var moreThan5 = this.scrollTop > this.scrollHeight/100*5;
                    if (moreThan5)
                    {           
                        //datalayer send scrolled more than 5%
                        $this.attr('datalayer-sent','true');
                    }
                }
            });
        }

        $('#state-selector, #first-letter, #plan-type').change(function(){
            $('.coverage-content').removeAttr('datalayer-sent');
            if ($('.coverage-content')[0].scrollHeight<$('.coverage-content').height()) {
                //datalayer send no scroll
            }
        })
    })
</script>

我在这个JS中放置了你需要添加代码的注释，以便推送到datalayer。

此脚本将执行的操作：

如果滚动次数超过5％，它将发送一次datalayer。然后，如果您向上滚动然后向下滚动，它将不会发送。但是，如果您要更改过滤器（状态，字母或计划）然后滚动，它将再次发送。

此外，它将检查是否没有滚动，它将发送没有滚动消息的数据层。