Knowledgebase text change - Implementing the snippet - Charset issue and white screen flash

Status: Done
by SoleBatura ‎12-02-2014 December 2, 2014 - edited ‎12-02-2014 December 2, 2014

Hello,

 

we recently had an issue when implementing Optimizely with a website that makes extensive use of Modernizr, too.

 

An article in the knowledge base sais the snippet should be implemented in the top of the head tag.

 

So, maybe it should be “but after the charset declaration” for modern web pages, just to be sure (untested: could this also be helpful if the script contains text with special chars like umlauts?). I found that if you are using Modernizr and thus many HTML tags filled with classes and stuff, it nearly reaches the 1024 characters limit for charset definition. (if charset is not defined, POST of a form will destroy characters like umlauts)

 

It clearly is not an issue of Optimizely at all, but I think this info could nevertheless help prevent form errors.

 

 

Also, there is another benefit of implementing the snippet a little deeper in the DOM - after meta tags and maybe the basic stylesheets (Optimizely overrides them anyways).: The white screen flash when loading the script before any other content disappears. We had a clearly visible delay, which disappeard since we fixed the issue.

 

 

Just a suggestion -

 

Best regards,

Christian

 

 

 

Image example of the issue:

https://drive.google.com/file/d/0B48vZt1PCqbXcWtRc2FwbTh4R1E/view?usp=sharing

 

 

 

 

Status: Done
Level 2

Comments
by Optimizely
‎12-02-2014 December 2, 2014

Hi @SoleBatura , thanks so much for your suggestion! I work on our Knowledge Base, and I'd like to thank you for your thorough write-up and screenshots. I've updated our Snippet document here to reflect this best practice. Please take a look and let me know what you think -- thanks!

Optimizely
by SoleBatura
‎12-03-2014 December 3, 2014

Hello @AdamA,

 

thank you, and wow; this was a really fast reply. I like the article update but there is a little issue with the HTML code being displayed. The meta charset tag must be written within the head tag like this:

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <script src="//cdn.optimizely.com/js/12345678.js"></script>
    </head>
    <body>

 

... or another and more detailed version, which is the one we use in our website now that fixed the page flashing issue (but read the text below about this ...):

 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <!-- Add other meta information here -->
        <!-- Add stylesheets here -->
        <script src="//cdn.optimizely.com/js/12345678.js"></script>
        <!-- Add scripts and other content here -->
    </head>
    <body>

 

But: I am not sure if the last version - with the stylesheets above the Optimizely Snippet is suited for all of your customers. I think its no harm, but it just might do nothing in some cases. What do your developers think about it? Maybe the second code part I wrote above is more suited to be applied into these articles and declared as a last and optional way of doing it, if there still appears any page flashing issue:

 

 

--

 

About the page flash

 

Hmmm, as I read through these articles too, I see we have different definitions of the "page flash" that appeared: We did not experience a page flash that showed any of the other variations content before any change. Our page flash just showed a blank white screen without anything for, lets say 100-250ms.

 

Also I have to admit that I have no idea why it works now, when the meta information and CSS is above the Optimizely snippet (we did not change anything within our experiments at this time, so the code was the same all the time).

 

I will try to find out more soon. If I do, I will update this post.

 

--

 

Conclusion

 

But, to reduce the confusion of my many statements a little bit: The article you updated is correct. It is always helpful and a good idea to define the charset before any other page content.

 

--

 

Hope you will find this helpful in any way,

 

Kind regards,

Christian

Level 2
by Optimizely
‎01-07-2015 January 7, 2015
Status changed to: New
 
Optimizely
by Optimizely
‎03-07-2016 March 7, 2016

Hey @SoleBatura,

 

We recently audited the Product Ideas and liked your detailed example of the HTML code. So we decided to incorporate it into the article!

 

 

May all our pages be forever flash-free.

Optimizely
by Optimizely
‎01-04-2017 January 4, 2017
Status changed to: Done
 
Optimizely
by Optimizely
‎01-04-2017 January 4, 2017
Status changed to: Done
 
Optimizely