Rich-text Reply

Is my Optimizely code pasted in the correct location on my website?

Grandev 03-23-16

Is my Optimizely code pasted in the correct location on my website?

Hi all,

 

Hoping someone can help me....

 

The Optimizely site suggests that the code snippet should be pasted directly after the <head> tag on every page on my website..... My developers have said that the location (<head> tag is row 3, and Optimizely tag is row 31 in the code pasted below) is the earliest they can paste it so they say to me. Is this okay? Will Optimizely still work?

 

Any urgent help would be appreciate - due to launch this new site tomorrow!

 

Many thanks,

Geet 

 

---START----

 

<!doctype html>

<html lang="en-GB">

    <head >

        <script>

    var require = {

        "baseUrl": "http://infruition2.codingmice.com/pub/static/frontend/Codingmice/Infruition/en_GB"

    };

</script>

        <meta charset="utf-8"/>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<meta name="description" content="Whether you're a fitness fanatic, health concious - or simply love drinking water - There is an Infruition 'Fruit Infuser' Water Botttle for everyone. Free delivery for orders over £20"/>

<meta name="keywords" content="Magento, Varien, E-commerce"/>

<meta name="robots" content="INDEX,FOLLOW"/>

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<title>Fruit Infuser Water Bottle, Sports Bottles, &amp; Detox Bottles by INFRUITION - Official Site</title>

<link  rel="stylesheet" type="text/css"  media="all" href="http://infruition2.codingmice.com/pub/static/frontend/Codingmice/Infruition/en_GB/mage/calendar.css" />

<link  rel="stylesheet" type="text/css"  media="all" href="http://infruition2.codingmice.com/pub/static/frontend/Codingmice/Infruition/en_GB/css/styles-m.css" />

<link  rel="stylesheet" type="text/css"  media="all" href="http://infruition2.codingmice.com/pub/static/frontend/Codingmice/Infruition/en_GB/css/custom-styles.... />

<link  rel="stylesheet" type="text/css"  media="all" href="http://infruition2.codingmice.com/pub/static/frontend/Codingmice/Infruition/en_GB/carousel/owl_carou... />

<link  rel="stylesheet" type="text/css"  media="all" href="http://infruition2.codingmice.com/pub/static/frontend/Codingmice/Infruition/en_GB/Aheadworks_Blog/cs... />

<link  rel="stylesheet" type="text/css"  media="screen and (min-width: 768px)" href="http://infruition2.codingmice.com/pub/static/frontend/Codingmice/Infruition/en_GB/css/styles-l.css" />

<link  rel="stylesheet" type="text/css"  media="print" href="http://infruition2.codingmice.com/pub/static/frontend/Codingmice/Infruition/en_GB/css/print.css" />

<link  rel="icon" type="image/x-icon" href="http://infruition2.codingmice.com/pub/static/frontend/Codingmice/Infruition/en_GB/Magento_Theme/favi... />

<link  rel="shortcut icon" type="image/x-icon" href="http://infruition2.codingmice.com/pub/static/frontend/Codingmice/Infruition/en_GB/Magento_Theme/favi... />

<script  type="text/javascript"  src="http://infruition2.codingmice.com/pub/static/frontend/Codingmice/Infruition/en_GB/requirejs/require....

<script  type="text/javascript"  src="http://infruition2.codingmice.com/pub/static/frontend/Codingmice/Infruition/en_GB/mage/requirejs/mix...

<script  type="text/javascript"  src="http://infruition2.codingmice.com/pub/static/_requirejs/frontend/Codingmice/Infruition/en_GB/require...

<script  type="text/javascript"  src="http://infruition2.codingmice.com/pub/static/frontend/Codingmice/Infruition/en_GB/carousel/owl.carou...

<script  type="text/javascript"  src="http://infruition2.codingmice.com/pub/static/frontend/Codingmice/Infruition/en_GB/js/myscript.js"></...

<script src="//cdn.optimizely.com/js/3065240631.js"></script>

----END----

Level 2

JDahlinANF 03-23-16
 

Re: Is my Optimizely code pasted in the correct location on my website?

@Grandev - Yes, it will work, however...

 

The further from the top it is, the more "flashing" you will get when you run a test.

 

Consider these scenarios:

1- A Redirect Experiment

In an experiment where users will be sent to an alternate URL, they cannot be redirected until after the Optimizely code runs.  Since your pages have several stylesheets and 5 JavaScript files loading before Optimizely, those files will need to load (and start processing) before the Optimizely snippet can load and evaluate whether user to perform the redirect.  With this setup, you can expect that there will be about a half-second delay before the user is redirected.  This is a less than ideal user experience which could negatively impact the test condition.

 

2- Alternate Content / Design on the page

In an experiment where you are altering the content on the page, the content "rearrangement" cannot happen until after the Optimizely code runs.  Since your pages have several stylesheets and 5 JavaScript files loading before Optimizely, those files will need to load (and start processing) before the Optimizely snippet can load and evaluate what changes to make to the page.  With this setup, you can expect an increased amount of "flashing" that will be visible to the user.  This may take the form of the user seeing content which then disappears or seeing content which is then replaced.  This is a less than ideal user experience which could negatively impact the test condition.

 

So... will it work?  Yes.  But by being lower on the page than it ought to be, you may find that there are certain types of experiments that you will not want to run due to user experience issues stemming from the delay in the code's execution.