Javascript для отслеживания длины прокрутки для события пикселей - PullRequest
Новая
       24

Javascript для отслеживания длины прокрутки для события пикселей

0 голосов
/ 14 июня 2019

Я хочу отслеживать поведение пользователя, настраивая пользовательские события для глубины прокрутки. Мне действительно нравятся настройки, которые есть у comradsocks.com, и я попытался использовать их в качестве модели, используя документацию Facebook для длины прокрутки здесь. https://developers.facebook.com/docs/facebook-pixel/advanced/

Вот ошибка, которую я получаю. 

Uncaught TypeError: Cannot read property 'scrollHeight' of null
    at getDocumentLength ((index):60)
    at getScrollableLength ((index):72)
    at executeWhenReachedPagePercentage ((index):79)
    at (index):117

Вот код, который я использую. 

 var executeWhenReachedPagePercentage = function(percentage, callback) {
  if (typeof percentage !== 'number') {
    console.error(
      'First parameter must be a number, got',
      typeof percentage,
      'instead',
    );
  }

  if (typeof callback !== 'function') {
    console.error(
      'Second parameter must be a function, got',
      typeof callback,
      'instead',
    );
  }

  function getDocumentLength() {
    var D = document;
    return Math.max(
        D.body.scrollHeight, D.documentElement.scrollHeight,
        D.body.offsetHeight, D.documentElement.offsetHeight,
        D.body.clientHeight, D.documentElement.clientHeight
    )
  }

  function getWindowLength() {
    return window.innerHeight || 
      (document.documentElement || document.body).clientHeight;
  }

  function getScrollableLength() {
    if (getDocumentLength() > getWindowLength()) {
      return getDocumentLength() - getWindowLength();
    } else {
      return 0;
    }
  }

  var scrollableLength = getScrollableLength();

  window.addEventListener("resize", function(){
    scrollableLength = getScrollableLength();
  }, false)

  function getCurrentScrolledLengthPosition() {
   return window.pageYOffset || 
     (document.documentElement || document.body.parentNode || document.body).scrollTop;
  }

  function getPercentageScrolled() {
    if (scrollableLength == 0) {
      return 100;
    } else {
      return getCurrentScrolledLengthPosition() / scrollableLength * 100;
    }
  }

  var executeCallback = (function() {
    var wasExecuted = false;
    return function() {
      if (!wasExecuted && getPercentageScrolled() > percentage) {
        wasExecuted = true;
        callback();
      }
    };
  })();

  if (getDocumentLength() == 0 ||
    (getWindowLength()/getDocumentLength() * 100 >= percentage)) {
    callback();
  } else {
    window.addEventListener('scroll', executeCallback, false);
  }
};

    //scroll 50%
executeWhenReachedPagePercentage(50, function() {
  fbq('track', 'SL-ScrollDepth-55');
});

    //scroll 75%
executeWhenReachedPagePercentage(75, function() {
  fbq('track', 'SL-ScrollDepth-75');
});

  //scroll 100%
executeWhenReachedPagePercentage(95, function() {
  fbq('track', 'SL-ScrollDepth-95');
});  




  ///  
</script>

<!-- End Facebook -->

Когда я прокручиваю, пиксель должен запускать события, но вместо этого я просто получаю эту ошибку.

...