Question

我正在寻找这个jQuery的方向。可能有更好的方法来做到这一点，但基本上我正在尝试发送一个dataLayer变量，当用户达到50％的页面滚动，并在他们达到75％的页面时发送另一个。

$(window).on('scroll', function(){
  var s = $(window).scrollTop(),
  d = $(document).height(),
  c = $(window).height();

  var scrollPercent = (s / (d - c)) * 100;

  if (scrollPercent > 74 && scrollPercent < 76) {
  dataLayer.push({'Project Profile':'75% Scrolled'})
  };

  if (scrollPercent > 49 && scrollPercent < 51) {
  dataLayer.push({'Project Profile':'50% Scrolled'})
  };
})

由于数字可以是74.23413424,74.3495490等，它在最小值74和最大值76之间发射很多次。

有更好的方法吗？有没有办法只发送一个dataLayer.push？我认为两者的答案都是肯定的。我根本不知道怎么做！在此先感谢您的帮助。

布赖恩

Answer 1

你真的只需要某种标志，一旦你达到你的74％就会被标记。例如：

let flag1 = false;
let flag2 = false;
$(window).on('scroll', function(){
    var s = $(window).scrollTop(),
    d = $(document).height(),
    c = $(window).height();

    var scrollPercent = (s / (d - c)) * 100;

    if (scrollPercent > 74 && !flag1) {
        dataLayer.push({'Project Profile':'75% Scrolled'});
        flag1 = true;
    };

    if (scrollPercent > 49 && !flag2) {
        dataLayer.push({'Project Profile':'50% Scrolled'});
        flag2 = true;
    };
})

你实际上并不需要JQuery。 GTM现在内置了Trigger，可以捕获滚动深度。您可以在此post

Answer 2

也许尝试检测它何时进入该范围并在离开该范围时触发。

    var inRange = false;
    var inRange2 = false;
    $(window).on('scroll', function(){
      var s = $(window).scrollTop(),
      d = $(document).height(),
      c = $(window).height();

      var scrollPercent = Math.round((s / (d - c)) * 100);

      if (scrollPercent > 74 && scrollPercent < 76 && !inRange) {
      inRange = true;
      };

if (scrollPercent < 75 && scrollPercent > 75 && inRange) {
      inRange = false;
      dataLayer.push({'Project Profile':'75% Scrolled'});
      };

      if (scrollPercent > 49 && scrollPercent < 51 && !inRange2) {
      inRange2 = true;
      };

      if (scrollPercent > 50 && scrollPercent < 50 && inRange2) {
      inRange2 = false;
      dataLayer.push({'Project Profile':'50% Scrolled'});
      };
    })

仅在Scroll Percentage上发送一次dataLayer

2 个答案: