This is part 2 in our CRO Best Practice series, focused on setting up the Optimizely platform snippet. For instructions on setting up Google Optimise, see here.
Getting Optimizely up and running on your website couldn’t be easier. However, there a few important considerations, and potential pitfalls to bear in mind.
The Basic Set Up
In order to begin experimenting across your website you first need to add a single line of code to all your pages. This snippet contains your unique Project ID and allows Optimizely to run experiments on your site.
This snippet can be found under the setting section of your Optimizely Project.
- Navigate to Settings > Implementation.
- Click the clipboard icon for your snippet.
- Paste the snippet as high as possible in the <head> tag of all pages where you’d like to test, track goals or tag information. For simplicity's sake, you should add the snippet sitewide.
Here is what the Optimizely snippet on a page might look like.
Considerations
Does the snippet really need to be at the top of my <head> section?
It is incredibly important to make sure your snippet executes as quickly as possible to ensure that there is no delay in your webpages loading. Optimizely experiments work by making changes to your webpages as they load. By adding the snippet to the top of the page it will ensure any changes to the page will load in first. Adding the snippet further down the page will still allow experiments to run, but users may see the original version of the page before Optimizely is able to load in your experiment changes. This is referred to as “page flicker” or “page flashing” in the industry and is strongly discouraged against.
My dev team don’t have the capacity to implement the snippet onto the site, can’t we just implement via a Tag Manager?
Both Optimizely, and the Merkle CRO team, would strongly recommend hard coding the snippet on site. Loading Optimizely via a tag manager often results in page flicker. This is because many tag management systems, like GTM, don’t support synchronous loading.
Where in the <head> tag should I place the snippet?
In brief, you should place the snippet as high as possible in the head, generally after your <html> tag, charset declarations, and possibly other meta tags. I have included the best practice snippet placement guide from Optimizely below:
Place these before the snippet:
- Charset declarations and other meta tags, like <meta charset='utf-8'>
- jQuery, if you're using your own version and not Optimizely's version (see jQuery Settings)
Place these after the snippet:
- All other elements on your page
- Any analytics or heatmapping code
- Other content in a tag manager
Snippet Performance Best Practices
To ensure that your webpage loads as quickly as possible there are some important best practices we would recommend when implementing your Optimizely snippet.
Prioritise the Snippet Download Time
You can ensure that the download of the snippet is prioritised over other assets by adding a preload tag to your Optimizely snippet. The preload tag tells the browser to download and cache the Optimizely snippet as soon as possible. An example Optimizely snippets with preload tags can be found below:
<script rel="preload" src="https://cdn.optimizely.com/js/1234567.js"></script>
Manage the Size of Your Project
As your Optimizely project grows, so does the size of your snippet. Make sure that you are archiving any experiments, pages, events and tags that aren’t being used. If you are really looking to slim down your project size, consider creating multiple projects for different parts of your site.
Minimize jQuery
By default, Optimizely X doesn’t use jQuery. However, if you require jQuery for your experiments it can be added to your project code.
it is important to remember this jQuery inclusion will slow down the time needed to load the Optimizely snippet. In addition, you may already have jQuery on your site. As a result, you should always check with your site’s dev team that you aren’t doubling up on jQuery unnecessarily.
Increase the Snippet Cache Expiration
By default, Optimizely will cache the snippet in your visitor’s browser for 2 minutes. This results in experiments loading faster, as the snippet is loaded from the cache on subsequent page loads, rather than from Optimizely’s CDN. Increasing this cache expiration will increase the period where the snippet can load faster. However, it is important to remember that any updates that you make to your Optimizely project won’t be seen by your visitors until the cache expires.
These are just a few of the ways you can optimise the setup of Optimizely X snippet. Look out for upcoming blogs on the other options to maximise site performance.
