Optimizely Experimentation Assistant Chrome extension

  • Updated
  • Optimizely Web Experimentation

Current Chrome Extension version: Manifest V3

The Optimizely Assistant Chrome extension for experimentation gives you insight into the nature of any Optimizely Experimentation activity occurring on your site. It also provides access to a suite of easy-to-use debugging tools. 

The Optimizely Assistant extension is a suite of utilities and tools with a comprehensive console log page. You can assess several important factors:

  • Whether Optimizely Experimentation is installed on the page.
  • What experiments and campaigns are currently active.
  • Which variations you are bucketed into.
  • Which Optimizely Experimentation pages are currently active.

You should use this tool in conjunction with other testing tools and techniques to test and vet your experiments in Optimizely Experimentation before you launch them.

Install the Optimizely Assistant

Download Optimizely Experimentation Assistant Chrome extension

Make sure you are using a Chrome browser. Go to the extension page in the Chrome webstore and click Add to Chrome. In the prompt, click Add extension. You can see your extensions by going to chrome://extensions in your Chrome browser.

chrome_fWFf8tUvi2.png

Ensure to continue enabling mixed content in your browser, even when using the Optimizely Chrome extension. See the Compatibility mode warning and mixed content in the editor. Is your page not loading correctly in Optimizely Experimentation for another reason? See Pages not loading in the editor. 

Enable the extension

Installing and enabling the extension turns it on. You should see an Optimizely Experimentation icon in your extensions bar to the right of your URL bar. If you click it, you can log in to use the extension.

Inject the snippet

You must enable developer mode to inject snippets. Go to chrome://extensions/ and toggle on Developer Mode in the top right corner.

EnableDeveloperMode.png

If your snippet is not on the page yet, but you want to start creating experiments, this extension injects a helper JavaScript snippet called innie.js that is normally included with the snippet. This enables communication between the editor and your site. The editor detects when you are hovering a cursor over different elements of your site. When you click an element, the editor displays the blue border and context menu. Ensure that you implement the one-line snippet for Optimizely Experimentation on your page when possible. When you do, you can then run the experiments you created with the helper.

The editor might also have problems finding your snippet if it is in the <body>. If that is the case, you can use the extension to help load your page in the editor, but make sure to add the snippet to the top of your site’s <head> tag to ensure optimal performance.

One-click debugging tools

After installing the Optimizely Assistant, you can use the debugging tools:

Optimizely-assistant

  • Add test cookie – Create or remove a test cookie so you can target an audience to it. This sets your experiment live in a way that ensures you are the only one seeing it.
  • Use Instant Snippet – Decrease the time between saving and testing your changes when building experiments and campaigns using the Amazon S3 version of the Optimizely snippet, which usually updates immediately and before Optimizely's distributed CDN. This only changes the version for your local Chrome environment, so your users continue to be served experiences from Optimizely's Content Delivery Network.
  • Swap snippet – Test a different snippet if the webpage already has an Optimizely Experimentation snippet. For instance, you can use it to swap the production Optimizely Experimentation snippet into your site and test experiments in your own test environment. To swap it, you must have access to the account to which the snippet belongs.
  • Inject snippet – Add a snippet if a webpage does not have it. You must have access to the account to which the snippet belongs and enable Developer Mode in Chrome Extensions.
  • Always use a non-cached snippet – Enable to immediately view changes you made in Optimizely Experimentation in your browser. 
    • It typically takes a few minutes for a change to propagate from your experiment in Optimizely Experimentation to Amazon’s servers and out to the CDN.
    • Custom snippets let you configure a longer TTL (time to live) for a snippet. The default setting is two minutes, but you can select a longer TTL to match your users' session duration. Longer TTLs mean end users have to fetch the Optimizely Experimentation snippet from the CDN less frequently, but Optimizely users have to wait longer to see changes to experiments.
  • Strip X-Frame-Options header – Removes any X-Frame-Options headers from your site, letting them load in the Optimizely Experimentation Editor.
  • Disable console logging – Prevent logs from printing in your console.
  • Disable Optimizely Experimentation – Determine which changes are influenced by Optimizely Experimentation and which are not.

Keyboard shortcuts

Save time by setting and using feature keyboard shortcuts. These can be set on the chrome://extensions/shortcuts page.

Optimizely-assistant-3.png

Debugging the Optimizely Assitant Chrome extension

Disable the editor from loading your page through a proxy server

The Optimizely Experimentation editor tries to load your page through HTTP or HTTPS first, but if they timeout, it tries to load your page through a proxy. Loading through a proxy means that Optimizely Experimentation loads your page on Optimizely's proxy server, injecting a placeholder snippet temporarily for editor loading purposes. This will then show in the editor.

If Optimizely Experimentation loads your page through, it loses all session data for your page in the editor, so this might be why you might see an authentication error, even though you logged in or loaded your page in an adjacent tab. Your page might also have security measures against being loaded through a proxy which might cause you to see something like a 500 Internal Server error.

If the snippet is on the page and it is still loading through the proxy, you can disable proxy loading by adding the optimizely_disable_proxy=true parameter to the experiment URL in the URL bar. This forces the Optimizely Experimentation editor to try loading your page through HTTP or HTTPS and also increases the timeout before failing. The extension automatically adds this query parameter to the URL each time you load an Optimizely Experimentation experiment.

Remove the X-Frame-Options header

Some sites will not load in the editor due to a security setting called an X-Frame-Options header, which disallows other domains from loading in an iFrame (for example, example.com can only be loaded in an iFrame on example.com, not on optimizely.com). The Optimizely Experimentation Chrome extension bypasses this security setting and lets those sites be iFramed on other domains, but only for users who have Optimizely Experimentation Assistant turned on for their browser.

How to find out if your site has an X-Frame-Options header set

Try opening your page in the Optimizely Experimentation editor in the Chrome browser. Open the Developer Tools, and click Console. Then click the filter icon in the left top part of the developer tools. Within the filter options, click Errors. Search for a line that says, "Refused to display '<URL>' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN' or 'DENY'." If you see that, your site likely has an X-Frame-Options header that prevents Optimizely Experimentation from loading inside an iFrame.

Content Security Policies

The X-Frame-Options header is a deprecated security feature that is replaced by Content Security Policies (CSP) that allow for fine-grained control over which pages can iFrame yours, among many other features. So, if you replace your X-Frame-Options header with Content Security Policies, you are able to allow-list app.optimizely.com. See Update your site's Content Security Policies (CSP).

If you are not using Content Security Policies for anything else yet, ask your developers to remove the X-Frame-Options header and replace it with the following CSP header:

Content-Security-Policy: default-src * 'unsafe-inline' 'unsafe-eval'; frame-ancestors 'self' app.optimizely.com;

This mirrors the security X-Frame-Options provided by you.

If you are already using Content Security Policies for other purposes, you must merge your existing rules with the one above.

  • To load your pages in the Optimizely Experimentation Editor, add the frame-ancestors directive for app.optimizely.com.
  • To make sure all of Optimizely Experimentation's functionality for your visitors works correctly, make sure to allow unsafe-inline and unsafe-eval. In the meantime, the Optimizely Experimentation Assistant extension can help you load your page in the editor.
  1. Go to the Optimizely Assistant Chrome extension page.
  2. Click Add to Chrome to add the extension to your browser.
  3. Click the extension's Optimizely logo to enable the extension. 
  4. Follow the prompts to log in to your Optimizely Experimentation account and fetch the list of projects and snippets you have permission to view.
  5. Go to the site where you are using Optimizely Experimentation and open the Chrome JavaScript console to view messages:
    • On Windows and Linux, press Control-Shift-J.
    • On Mac, press Command-Option-J.
Log in to the Optimizely Experimentation Assistant extension to authorize using the extension for the projects related to your last-used account. If you believe the extension is warning you in error about not having the correct permissions, try the following:
  1. In a regular Chrome tab, using the user you will log in with the Optimizely Assistant, log in to Optimizely Experimentation.
  2. Switch accounts in Optimizely Experimentation to the account you want to use the extension with.
  3. Authorize the account in the Optimizely Experimentation Assistant.
    • If you have never logged in, click Open Login Pop-up.
    • If you have already logged in, click Settings and Log Out.
  4. Log in to Optimizely Experimentation again with the user from step 1.

This should authenticate you with the most recent account. If you continue to experience trouble, contact Optimizely Support.