Rich-text Reply

track scrolling depth

epicSouldier 06-22-15

track scrolling depth

Hi there,

 

As a new user I implemented the code available in the developers script examples: http://developers.optimizely.com/samples/

 

Everything looks fine to me but the custom tracking does not work. Any ideas why?

 

Thanks for comments and help.

 

 

 

Here's the code from the developers site:

/*
 * Usage
 *    This function fires custom events at different scroll depth milestones.  
 */

  // Variables to prevent continuous firing of custom events

  var scrollTwentyFive = true;
  var scrollFifty = true;
  var scrollSeventyFive = true;
  var scrollOneHundred = true;

  // Create the scrollPercentage

  $(window).bind('scroll', function() {
      window.scrollPercent = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100;

      // Conditional code we'll use to fire events based on scrollPercentage.

      if (window.scrollPercent >= 25 && scrollTwentyFive) {
          window['optimizely'] = window['optimizely'] || [];
          window.optimizely.push(["trackEvent", "scroll25"]);
          scrollTwentyFive = false;
      }

      if (window.scrollPercent >= 50 && scrollFifty) {
          window['optimizely'] = window['optimizely'] || [];
          window.optimizely.push(["trackEvent", "scroll50"]);
          scrollFifty = false;
      }

      if (window.scrollPercent >= 75 && scrollSeventyFive) {
          window['optimizely'] = window['optimizely'] || [];
          window.optimizely.push(["trackEvent", "scroll75"]);
          scrollSeventyFive = false;
      }

      if (window.scrollPercent >= 100 && scrollOneHundred) {
          window['optimizely'] = window['optimizely'] || [];
          window.optimizely.push(["trackEvent", "scroll100"]);
          scrollOneHundred = false;
      }

  });

Re: track scrolling depth

Did you also create the custom event goal? From the page: "Within the goals menu, you'll need to create custom event goals that correspond to the events below (e.g. "scroll25" for scrolling 25% of the way down the page"

Here's more on setting up and tracking custom event goals https://help.optimizely.com/hc/en-us/articles/200039925

Re: track scrolling depth

[ Edited ]

Hey there,

Brian makes a good point. Please make sure the custom event goals are set up correctly. If it's still not working, feel free to share the URL and experiment ID. I'd be happy to have a look!

Best,

Amy Herbertson
Customer Success
samh123 12-01-15
 

Re: track scrolling depth

[ Edited ]

Hi Amy,

 

I am in the process of testing this scroll sample snippet on my site and I can't get it to work either.

The default engagement event is firing fine however there seems to be a confliction in Jquery libraries. I have ensured i have custom event goals set up.

 

  • When I inlcude your jquery in my project I get an "uncaught error" on the .scrollTop() function. If we hard code e.g. window.scrollPercent=25; the event fires. Seems to suggest a confliction of the function.
  • When I just use our jquery and don't include yours (ours is v1.4.2) the event doesn't seem to fire at all Smiley Sad

 

Related issue: https://community.optimizely.com/t5/Developers/Optimizely-s-scroll-depth-tracking-sample-code-not-wo...

 

Thanks

 

Sam

 

Level 2
samh123 12-16-15
 

Re: track scrolling depth

I thought i'd share Allison Rodriguez (Optimizely Support) on this one.

 

I've resolved my issue now hope everyone else struggling with this did too!

 

Hi Sam,

 

Thanks for reaching out to support! I took a look at your site and it looks like there are a couple of things going on here:

 

Firstly, it seems like your jQuery does not use the standard "$" notation. Changing each "$" in the code to "jQuery" instead will solve your console error.

 

Secondly, it appears the scroll event is not triggered correctly on the site for some reason. To test this, I bound a console.log() statement to the scroll event on you site and it was only triggered on the first instance of the event. This is not the case on other sites. Here is the code I used:

 jQuery(window).bind('scroll', function() {      window.scrollPercent = (jQuery(window).scrollTop() / (jQuery(document).height() - jQuery(window).height())) * 100;          console.log('scroll percent: '+scrollPercent);});

 

What we would expect after pasting this code in the console and scrolling down the page is a stream of console logs indicating a percentage - see attached.

 

Best,
Allison

 

Level 2
jameswin79 01-19-16
 

Re: track scrolling depth

[ Edited ]

Thanks Allison! This worked perfectly me as well.