This article will help you:
  • Set up the Optimizely plugin on a Wordpress site 
  • Add the Optimizely Snippet directly to the theme’s header
  • Test headlines outside of Optimizely using the API

The Optimizely Wordpress plugin allows you to harness the power of A/B testing for your Wordpress website. After installing the plugin, your Optimizely Snippet will be automatically placed in the most optimal position on your page. The plugin will also allow you to create headline variations, compare their performance, and launch winners, all without leaving Wordpress.

Option #1 (recommended): Configure the Optimizely Plugin

The easiest way to integrate with WordPress is through our Optimizely plugin, which can be installed through the WordPress Dashboard or downloaded from their plugin directory at
https://wordpress.org/plugins/optimizely. This option ensures that your Optimizely Snippet is inserted as high as possible in the <head> tag and does not require reinstallation if you change themes.

  1. In the Wordpress admin panel, go to Plugins and click Add New.


     
  2. Enter "Optimizely" in the search field and click Search Plugins. The Optimizely plugin should be at or near the top of the results. Click Install Now.



     
  3. Once you have begun installing the plugin, the program will notify you if the installation succeeded. In some cases, you will be prompted to enter your site's FTP credentials, which your hosting company or site administrator should be able to provide. Once the installation is complete, click Activate Plugin.


     
  4. You should now be redirected to the list of plugins you have installed. Before you can begin, though, you must first configure the settings by clicking Settings in the plugin listing, or by selecting the shortcut to the Optimizely plugin in your left menu bar.


     
  5. Once on the plugin page, click Configuration to go to the plugin settings page.


     
  6. Generate an API token from Optimizely to use the plugin. To view your API tokens and to create new ones, go to https://app.optimizely.com/tokens. Once you have entered your API token, click Connect Optimizely.


     
  7. After you connect Optimizely, you’ll be able to choose an Optimizely Project associated with your API token. Please choose the project you would like to use for this site. This will ensure that the snippet is inserted as high as possible in the <head> tag and does not require reinstallation if you change themes.

If you plan to use the Optimizely Wordpress plugin for headline testing, make one small change to optimize its performance. Because headlines are often located in multiple places on your site (for example, the Home page, category landing pages, related links, etc.), there may be multiple CSS selectors involved. For anywhere your headlines appear, there must be a unique identifier on the page so that Optimizely can make changes to that headline.

The best way to do this is to use the Wordpress Post ID, which is always guaranteed to be unique. Simply add the following class to your HTML on any page that your headline is displayed:

optimizely-12345 (where 12345 is the Wordpress Post ID)

So your links will go from this:

<a href="http://blog.optimizely.com/using-optimizely-on-wordpress">Using Optimizely on Wordpress</a>

To this:

<a href=”http://blog.optimizely.com/using-optimizely-on-wordpress” class="optimizely-12345">Using Optimizely on Wordpress</a>

Or if you already have class names, just add the class like this:

<a href=”http://blog.optimizely.com/using-optimizely-on-wordpress” class="headline optimizely-12345">Using Optimizely on Wordpress</a>

Also, make sure you adjust the HTML on the post detail page, since that headline is usually not linked:

<h1 class="optimizely-12345">Using Optimizely on Wordpress</a>

This way, there is always only one headline with this class name on the page at any given time. This allows you to only write one line of code in the variation code settings (see below) to make changes to the headline.

Option #2: Add the Optimizely snippet to the header template

As an alternative to using the Wordpress plugin, you can integrate Optimizely by adding the snippet directly to the theme’s header template file. This option gives you more control over the snippet’s placement, especially if you want to use the site’s version of jQuery. Please note, the header.php file is unique to each theme, so if you change themes, you’ll need to update this file each time.

  1. In the Wordress Dashboard, go to Appearance > Editor and choose the Header template (header.php) file from the list of templates on the right.


     
  2. Get your Optimizely snippet and paste it, including the <script> tags, as high as possible in the head tag, then click Update File.
 
Note:

Note: Do not use this method if you have already installed, or plan to install, the Optimizely Wordpress plugin, as doing so will cause you to have two snippets on your site, rendering your experiments ineffective.

Sites hosted on wordpress.com

If your site is hosted on Wordpress.com and the above options are not available, you can still integrate Optimizely by manually pasting the snippet into the body of your page or blog post.

  1. In the Wordpress Dashboard, go to Pages, find the individual page you’d like to test, and click Edit.


     
  2. In the page editor, click the Text tab in the upper right corner and paste the Optimizely snippet on the first line, then click Update.

Headline testing through the Optimizely Wordpress plugin

Setup

Through Optimizely's Wordpress plugin, you can test Wordpress headlines programmatically. This lets you write alternate headlines for a blog post and test them directly from the Wordpress Editor, instead of Optimizely. This is done through our REST API, which helps you seamlessly integrate Optimizely with other platforms.

After you have installed the Optimizely Wordpress plugin, there are a few extra steps that you must take in order to start testing headlines:

  1. The default type of content on themes and setups for Wordpress are called “Posts.” However, many plugins and themes use custom post types that allow you to configure different types of posts. Here, you can select the “Post Types” you would like to conduct headline testing on.


     
  2. By default, the variation code created by the plugin is based on the class name we mentioned above. If you made the changes we recommended by adding class names to all of your post links and headlines, then you can skip this step. However, if you did not, you will need someone who knows jQuery to write some code based on the example below.


     
  3. If you are unable to edit your HTML, you can still conduct headline testing: it will just take a little more preparation in the Variation Code box. Optimizely uses jQuery to make changes to your webpage. In particular, we are using the .text() function to make the change. When writing your jQuery code, please use the following format:

    $(‘css selector’).text(“$NEW_TITLE”);

    A CSS selector is the part of a CSS rule set that actually selects the content you want to style. If you are unsure what a CSS selector is, you might need to involve someone that understands CSS to make sure the code is setup correctly.

    You also have three dynamic variables you can use when writing your code:

    $POST_ID -> This will be replaced with the Wordpress ID of the post that is being tested.
    $OLD_TITLE -> This will be replaced with the Original Title of the post you are testing.
    $NEW_TITLE -> Depending on which variation of the headline the user will see, this will be replaced with the variation of the title you are testing.

    Since a single headline can be found in multiple places, it’s important that you add all possible CSS selectors where the headline can be viewed. Just add each possible combination on separate lines, like the screenshot below.
     
     
    Important:

    Your CSS Selector MUST include a unique element. Many themes use the Wordpress post ID somewhere in the HTML to make it unique. If your theme does not add a unique ID of some kind to each post, you MUST use the method above and have your web developer add a class of optimizely-$POST_ID to the places your headlines are displayed.


     
  4. Next, configure the Activation Mode. You want to change the headline everywhere it is shown on the website. In order to do this, however, you need to run the experiment on all pages of your site (since the headline is usually shown in multiple places). That’s great for making sure everyone see’s the proper headline, but if you run the experiment across your entire site, there is a chance that people will be included in the experiment who never saw the headline, skewing your results.

    That’s where the Conditional Activation mode helps. Selecting this option ensures that only visitors who actually saw the headline will be included in the experiment. The default JavaScript for conditional activation is based on the method above by creating a class name on all of your posts: .optimizely-$POSTID. However, you can change the code to fit your particular theme. If you are unable to make the changes to your class names, we suggest using “immediate” activation so all headlines are changed. For more information on activation modes and how conditional activation works, see our article on Activation Modes.

  5. Next, choose the maximum number of variations you’ll allow your authors to add (they can always add fewer, if they choose). Please note that the more variations you create, the longer it will take to get to statistical significance. To get an idea of how many visitors you will need to reach statistical significance, please use our Sample Size Calculator.

Create new posts

Now that you have configured Optimizely with Wordpress, you can start your first headline test. Editors will be able to add different variations of their headlines directly into their posts so that their experiments integrate seamlessly with their workflow.

  1. Start a new post and add a headline like you normally would. However, in the right column you should now see a module called A/B Test Headlines. Here, you can place as many different variations of the headline as you have allowed in the settings. It is totally acceptable to leave some of these blank. Remember, the more headlines you test, the longer it will take to get to statistical significance.


     
  2. Once you are ready to publish your post, simply click Publish like you normally would.


     
  3. After you have published the post, you will notice a Create Experiment button that appears below your headline variations. By clicking it, you will create the experiment in Optimizely (but not yet start it).


     
  4. Once you have created the experiment, we recommend you click View on Optimizely to QA your experiment, making sure everything was set up correctly. Then, when you’re ready, just click Start Experiment.


     
  5. Now that your experiment is running, it should be live to the world! If you need to pause your experiment for any reason, you can do so by clicking Pause Experiment.

View and interpret results

Now that you have an experiment running, you can click View Results, which will take you directly to the Results page. Depending on the amount of traffic your site gets, you should start seeing visitors within a few minutes. If you do not see any visitors after 5 minutes, and you can guarantee that your site is getting traffic, you might want to check a few things:

  1. Make sure the experiment has started. You can do this by logging in to your Optimizely Home page and navigating to the project you are using for this experiment. It should say “Running” in green on the homepage next to the experiment name. Please note that experiment names are based on the original headline.
  2. Check to make sure the URL Targeting was created correctly.
  3. If both of these are set up correctly, please submit a support ticket on the plugin page located here: https://wordpress.org/support/plugin/optimizely.
The results page gives you valuable information about the experiment:
  • Goals: By default, we include two goals that you can select between:
    • Views to Page: This will measure the total number of unique visitors that saw the headline and ended up viewing the post’s detail page.
    • Engagement: Think of this as the inverse of bounce rate. Of the people that were included in the experiment, this measure the amount of people that clicked somewhere on the page.

      If you want to create your own custom goals, you can add them in Optimizely and they will appear in the Goals dropdown menu for you to select.
  • Pause / Start Experiment: Depending on the status of the experiment, you can click this button to pause or start the experiment. 
  • Edit: This will take you directly to the experiment on Optimizely in case you need to make any edits to the code.
  • Full Results: This button will take you directly to the results page of the experiment on Optimizely.
  • Archive: This will archive the experiment. Please note that this will stop the experiment from running. 
  • Variation: This is the name/variation of the headline being tested. Clicking it will take you to the post detail page using a force parameter so that you can see the different variations on your live site.
  • Visitors: This is the total number of unique visitors that were included in each variation of your experiment. 
  • Conversions: This is the total number of visitors that converted on the selected goal.
  • Rate: This is the percentage of visitors that saw the headline and that converted on the selected goal.
  • Improvement: This is the relative improvement in conversion rate over the baseline (usually your original headline).
  • Confidence: The level of confidence that the Optimizely Stats Engine defines as the probability the variation is a winner or loser.
  • Visitors Remaining: The estimated number of visitors this variation needs to become statistically significant.
  • Launch: This replaces your original headline with your variation headline on your live site, and archives the experiment.

At Optimizely, we use a sophisticated algorithm to determine whether the experiment has reached statistical significance so you don’t have to guess. We will place these experiments into one of two categories:

  • Ready for Review: This means that the Optimizely Stats Engine has declared at least one winner and it is up to you whether you want to launch that winner by using the Launch button.
  • Not Ready Yet: This means the experiment needs more visitors to accurately determine a winner. You can look at the Visitors Remaining column to see how many visitors we estimate you will need per variation to become statistically significant.

Common Questions

Q: If I am on Wordpress VIP, can I still use this plugin?

A: Yes. Our plugin has been approved for use by Wordpress VIP. We are currently working on getting the plugin into the official store. However, for now you can download the plugin from our normal page, add it to your site, and have it approved as you would any other change to your site. If it does not get approved for any reason, please file a support ticket here: https://wordpress.org/support/plugin/optimizely

Q: Can I A/B test images or summaries, as well as headlines?

A: The current version of the plugin does not allow for A/B testing images or summaries. However, we are working on adding this functionality in a future version.

Q: Can I test my headlines on social media sites, like Facebook and Twitter?

A: Unfortunately, you can only have one headline per link on social services. If the post is not time-sensitive, we recommend you test the headline on your site first, then share the winning headline on your social channels.

Q: I want to add more goals than just engagement and views to page. Is that possible?

A: Once you’ve created an experiment, you can go to Optimizely and add additional goals to your experiment. They will then be available to select in the dropdown menu on the results page. You can learn more about setting goals here.

Q: Can I limit the amount of visitors that are included in the experiment using traffic allocation?

A: Currently, the experiment will include 100% of your visitors and, depending on how many variations were created, they will be distributed evenly among the variations. If you want to adjust this, you must open your experiment in Optimizely and adjust it. You can learn more about allocating traffic here.

Q: How many headline experiments can I test at once?

A: We have not seen a limit to the number of experiments you can run at once. However, each experiment you create adds to the size of the Optimizely Snippet, so be mindful of this if you begin to see headlines flash, or if you experience slower-than-normal page load times.

Q: How long should I run my test?

A: It depends. The most important thing to consider is the number of MUV (monthly unique visitors) for your account. The last thing you want to do is use up all of your MUV on one test trying to hit statistical significance. Most experiments will not return conclusive results; what we are looking for here are the big wins. We generally recommend that if you have not hit statistical significance within 10,000 visitors per variation, and the estimated “visitors remaining” is still over 2,000, it might be time to archive the experiment and move on to the next one.

It’s also important to consider how long it takes for your site to get to 10,000 visitors per headline variation. Some sites can do it in a few minutes, while others may take weeks. Estimating how much traffic you expect to your site will help you determine how many headline variations you should test. Remember, the more variations you test, the longer it will take to reach statistical significance.

Q: I launched the winning headline, but my URL still has the old title. Why?

A: Most Wordpress themes use the title of the post to add an SEO friendly URL. We do not change this URL when you launch the winner so that you don’t have broken links, or require redirects (both can hurt SEO).

Q: Can I create experiments that don’t involve headlines?

A: Yes, you can! However, the plugin was built exclusively for headline testing. If you want to create other types of A/B tests for your site, you can simply go to Optimizely and set up an experiment like normal. You can learn more about setting up an experiment here.

Q: Why do I only see results for my headline tests, and not for all of my other experiments?

A: Currently, the plugin only adds the results for headline testing experiments that were created through the plugin. We plan to add results for other experiments in the near future.

Q: I don’t use Wordpress. Can I still test headlines using Optimizely?

A: Yes! The plugin makes headline testing easy for Wordpress users. If you’re not using Wordpress, however, you can create your own headline tests following these steps. For developers, we have created resources for building your own tools.

 
Tip:

Are you a Wordpress developer? Do you have an idea for a feature, or did you find a bug? The Optimizely Wordpress plugin is an open-source project and we would love your help in making this the best A/B testing plugin on the Wordpress store. You can find the code here. Simply make a pull request and we will contact you about adding it to the project!