Отправлять dataLayer только один раз в процентах прокрутки

Я ищу какое-то направление в этом фрагменте 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? Я предполагаю, что ответ на оба вопроса - да. Я просто понятия не имею, как! Заранее спасибо за помощь.

Брайан


javascript jquery google-tag-manager google-datalayer
person Brian    schedule 25.04.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

  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;
    };
})

  1. На самом деле вам не нужен JQuery для этого. GTM теперь имеет встроенный триггер, который фиксирует глубину прокрутки. Подробнее читайте в этом сообщении.
person Matus    schedule 25.04.2018
comment
Это помогло мне TON! Это не только показало мне, как написать что-то подобное в jQuery, но также показало мне очень простой способ сделать это в GTM... И я нашел отличный блог, который рассказывает о других трюках GTM! - person Brian; 25.04.2018

arrow_upward
-1
arrow_downward

Возможно, попробуйте определить, когда он входит в этот диапазон, и сработает, когда он выйдет из этого диапазона.

    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'});
      };
    })
person Stephen Flynn    schedule 25.04.2018
comment
Спасибо, что отозвались! Это не сработало для меня по какой-то причине. Но кто-то другой ответил методом, который сработал. Спасибо! - person Brian; 25.04.2018