Посылать 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

25.04.2018 16:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

385

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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'});
      };
    })

Спасибо за участие! По какой-то причине это не сработало для меня. Но кто-то другой ответил сработавшим методом. Спасибо!

— 25.04.2018 22:07

25.04.2018 17:08

Ответ принят как подходящий

Вам действительно нужен только какой-то флаг, который будет отмечен, когда вы достигнете 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 теперь есть встроенный триггер, который фиксирует глубину прокрутки. Вы можете прочитать больше в этом Почта

Это мне очень помогло! Он не только показал мне, как написать что-то подобное в jQuery, но и показал мне очень простой способ сделать это в GTM ... И я нашел отличный блог, в котором есть другие трюки с GTM!

— 25.04.2018 22:06

25.04.2018 19:01