Rich-text Reply

Loading variation code before and after page + JS loads

alanho 10-20-15
Accepted Solution

Loading variation code before and after page + JS loads

Hi, I am running into a complex scenario here whereby I need part of Optimizely variation code to run before the page load and another part of the code to run after the page finish loading w/ some JS.

 

Here's my scenario...

 

  • In my original control, I have a customized image element with an associated <input> element that is hidden.
  • In my variation, I would want to hide this image prior to page load (to prevent any flicker) -- this is the easy part where I simply remove the DOM object from the view.

 

Here's where it gets complex.

 

  1. I have a JavaScript that loads after Optimizely (since I've put Optimizely at the top of the <head> section)
  2. This script detects browsers geolocation and sets the <input> element value to true or false accordingly based on a whitelist.
  3. In my variation, I need to set this <input> element value to True always, but this value may be overriden by this script.

 

(Sorry if it's a newbie question but) is there a way to work this out?

 

- Alan Ho
Level 3

JDahlinANF 10-20-15
 

Re: Loading variation code before and after page + JS loads

@alanho,

To hide the image, I recommend using jQuery to insert a <style> tag to make the element hidden using "display:none !important;"  That way, this can run right away and the even though the browser will load the image, it will be invisible.

 

For the second part... I've run into this as well...

In the script that changes the input you are looking for... look for anything that that script may be creating.  Like, does it create a DOM object, or a function, or an HTML element.  If not, can you modify the script so that it does?  As a last resort, is there a trigger that fires when the script is done processing?

 

Once you find something to latch on, you can run code such as the following.  This example listens for the creation of an object/element/function:

/* _optimizely_evaluate=force */
function waitForDelayedContent(selector, experiment, timeout, keepAlive) {
    var intervalTime = 25;
    var timeout = timeout || 3000;
    var keepAlive = keepAlive || false;
    var maxAttempts = timeout / intervalTime;
    var attempts = 0;
    var interval = setInterval(function() {
        var selectorVal = (function(){
            try {
                return eval(selector);
            } catch(e) {
                return undefined;
            }
        })();
        if (typeof selectorVal !== 'undefined') {
            if (!keepAlive) {
                clearInterval(interval);
            }
            experiment();
        } else  if (attempts > maxAttempts) {
            clearInterval(interval);
        }
        attempts ++;
    }, intervalTime);
}

waitForDelayedContent("$('#some.item_that_gets_created_by_the_script')", function(){
  window.$('input[name=something]').val('true');
});

The downside of listening for a trigger though, is that there may be race conditions where the trigger may run before you are set up to listen for it.  But, if you must go this route...

/* _optimizely_evaluate=force */
$(window).on('someTriggerName',function(){
    window.$('input[name=something]').val('true');
});

 

 

alanho 11-01-15
 

Re: Loading variation code before and after page + JS loads

Thank you @nap0leon,

 

I eventually went for a trigger listener due to some technical limitations.

- Alan Ho
Level 3