Rich-text Reply

JavaScript/JQuery Error

x2adrew 08-08-16

JavaScript/JQuery Error

Trying to test a signup gate for users. The idea is after the 6th interaction on the page, I want to serve a modal window prompting users to register. However, I'm seeing a lot of console errors - seems optimizely might be having trouble with a script on our website? Here's the code snippet I'm trying to run in a variation:

 

$(window).load(function() {
  counter = 0;

  $(document).click(function() {
    console.log("Count: " + counter)
    if(counter == 5) { // Detect on 6th click
      $.fancybox.open("#signup-gate", {
        padding: 0,
        closeBtn: false
      });
    }
    counter++;
  });
});.

The errors I'm seeing in the console are preventing the window from finishing its load cycle. These are the errors I'm seeing in the console, even before adding my code snippet:

Uncaught TypeError: Cannot read property 'replace' of undefined
j.template @ underscore-min.js.pagespeed.jm.SI_yesLRhc.js:1
template @ VM13990:5
afterRequest @ VM13990:4
handleResponse @ VM13976:8
handler @ VM13978:2
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
y @ jquery.min.js:4
c @ jquery.min.js:4

Any idea what's happening? These errors don't show up on the site directly, only when viewed through Optimizely.

Level 2

inigam 08-09-16
 

Re: JavaScript/JQuery Error

[ Edited ]

Hey

try this one.

 

  var counter = 0; // you can do window.counter to create global but try this first.

$(document).click(function() {
    console.log("Count: " + counter);
counter++; // this should be here to get the first click else you will launch the box on 6th click. if(counter == 5) { // Detect on 6th click $.fancybox.open("#signup-gate", { padding: 0, closeBtn: false }); } });

Hope that will work

 

cheers

IN

Regards,
IN


Level 6
x2adrew 08-09-16
 

Re: JavaScript/JQuery Error

Using that, I get:

 

Uncaught TypeError: Cannot read property 'open' of undefined

This was one of the reasons it's encapsulated in a $(window).load(), to ensure that fancybox has already loaded.

Level 2
robertchan 08-09-16
 

Re: JavaScript/JQuery Error

Try scoping the fancybox to window level with forced evaluation (https://help.optimizely.com/Build_Experiments/Force_variation_code_or_Experiment_JavaScript_to_execu...). If you're getting errors without even running your code, consider using jQuery's noConflict.
Robert Chan

Experimentation Hero
x2adrew 08-09-16
 

Re: JavaScript/JQuery Error

Thanks for the info! Unfortunately, it still doesn't work. JS in the Optimizely variation doesn't seem to recognize fancybox as a function. $.fancybox seems to return undefined within the scope of the variation, though it exists on the page itself. Any idea how to deal with that?
Level 2
robertchan 08-10-16
 

Re: JavaScript/JQuery Error

Try changing $ to jQuery so instead of having $.fancybox, you would write jQuery.fancybox. Another thing to do is check whether you had jQuery on your site prior to implementing Optimizely. If you did, then you might have a conflict of jQuery libraries. Also, your version of fancybox should be 2.1.4 or above otherwise it will break with jQuery 1.9.0 or above.
Robert Chan

Experimentation Hero