Optimizely

Parse.ly partners with Optimizely to power article headline testing.

Headline testing gives editorial teams the power to try headline variations and understand what resonates with an audience and increases traffic.

The headline tests that you create for an article are regular Optimizely experiments. This means in addition to seeing test results in Parse.ly or Optimizely, you can also leverage any custom goals, audience segments or dimensions already set up in Optimizely.

Getting Started

Headline testing assumes that Optimizely is setup and installed on your website. If you haven't done this yet, sign up for an Optimizely account and follow their integration instructions.

To get started with headline testing, you need to provide Parse.ly with your Optimizely API token, a project ID as well as a JavaScript code template.

You can find or generate your Optimizely API token at the API Tokens screen.

Next, find the Optimizely project that corresponds to the website where you want to run headline tests. View the project and click the Settings tab and copy the Project ID.

Enter both the API token and project ID into the Parse.ly settings screen, next up the JavaScript code template.

URL Conditions

By default, the A/B test is run on all pages. The URL conditions allow to narrow the target pages down to only those preferred, like only index pages or section.

The conditions are specified in form of regular expressions, one expression per line.

For example, the configuration below would limit running of the test to only index pages like http://example.com/ and first level (section) pages like http://example.com/section/.

https?:\/\/[^\/]+\/?$
https?:\/\/[^\/]+\/[^\/]+\/?$

Additionally, it is possible to add the article page itself to the list by ticking the "Automatically add article URL condition" checkbox.

For more details about URL conditions please see Optimizely URL Conditions

JavaScript Conditional Activation

Sometimes URL conditions aren't suitable for your use case, and you'd rather a test only run on conditional activation (for example, this can be useful if you want to run a test only after an element has appeared dynamically that contains the article in question). To do that, you can use Optimizely's "Conditional Activation" to make sure that the element is on the page.

Optimizely's JavaScript conditional activation is continuously polling the page, and it will activate the test when the conditional activation criteria are met.

JavaScript conditional activation can be used in one of two ways:

1) A single-line statement. If that statement evaluates as true, the test will be started. An example might look like this:

$('<a.post-id-@POST_ID').text() == '@TITLE';

This would start a test when that statement evaluated to true on a page- for example, if a div was dynamically loaded that contained the article link.

2) A function that calls the activate() function on certain criteria Sometimes a single-line statement isn't quite enough, and you have multiple conditions that need to be met or multiple combinations that might exist. In this case, you can combine them like so:

function (activate, options) {
    if ($('a.post-id-@POST_ID').text() == '@TITLE') {
        activate();
    }
    else if ($('a[href="@URL"]')) {
        activate();
    }
}

The variables that you can use to represent title, post_id, and so on are the same as the ones that can be used in the JavaScript code template, and can be found here.

For more detailed information on this, you can take a look at their documentation here on Optimizely conditional activation.

Important!

Please note that one of these conditional activation methods MUST be used to ensure accurate A/B testing- failure to use them, or using them incorrectly, can result in inaccurate or ineffective headline tests.

The Parsely team cannot write these conditional templates for you, as each site is unique in the way it is structured, and every test condition is unique as well. The Parsely support team, however, is here for you- if you run into difficulties, please reach out to our support team and we will do our best to help troubleshoot your conditional activation templates!

Goals

By default, all Parse.ly headline tests have a custom page view goal which focuses experiments on answering "what variation increases traffic to the article?".

If you would like to choose another goal to determine the best headline, such as social sharing actions on your site, see Optimizely’s custom event goals guide.

Once you've created your custom goal, you can specify it's name in the Parse.ly settings screen.

JavaScript Code Template

Parse.ly's headline testing requires a way in which to find all references to an article's headline and update them depending on the variation being shown to a user. We do this using a JavaScript code template that you provide.

An article's headline can appear in many places:

  • the article page itself
  • home page and section pages
  • recommended or popular content widgets

Although you can chose to update the headline for only one of these cases, we recommend you create a code template which updates an article's headline irrespective of its placement.

As an example, if we wanted to update article headlines based on an anchor link URL we could use the following code template:

$('a[href="@URL"]').text('@TITLE');

Let's unwrap what we've done here. First, we're using a jQuery selector to target all anchors (<a> tags) that have a href equal to "@URL". For each of those anchors, we update the inner text of the link to @TITLE.

@URL and @TITLE are two variables that will be replaced with data from the article, when the variation is created. When Optimizely executes this variation it will actually run something like:

$('a[href="http://example.com/article12345"]').text('Is there water on Ceres? NASA hopes for answers as spacecraft nears dwarf planet');

The full list of variables you can use in templates are:

Name Description Sample Value
@URL The canonical URL of the article that was crawled by Parse.ly. http://example.com/article12345
@RELATIVE_URL The path portion of the canonical URL of the article that was crawled by Parse.ly. /article12345
@POST_ID The ID of the article when crawled by Parse.ly 12345
@TITLE The article headline for a specific variation. Is there water on Ceres? NASA hopes for answers as spacecraft nears dwarf planet

Note

If there's a variable you need that isn't listed above reach out to support@parsely.com and let us know.

You're not limited to one statement, you can provide as many JavaScript statements as you'd like:

$('#headline a[href="@URL"]').text('@TITLE');
$('a.related[href="@URL"]').text('@TITLE');

Different Settings For Different Tests

The activation and code templates described above are unique to each experiment- once a test has been run, changing the template will not retroactively change conditional activation or JavaScript code templates for already running tests. This is useful for creating one-off conditions for different tests if necessary, but this is also why it's important for the templates to be as clean and thorough as possible to ensure that starting a new headline test that works is as easy as clicking the button in a post detail page!

Dealing with Jitter/Flicker

A common problem with headline testing is a situation where the original headline is visible for a moment and is then swapped out with the variation leading to a less than ideal user experience. This experience is commonly referred to as "flickering".

Fixing flickering involves an understanding of how Optimizely's experimentation and jQuery's selector code works.

Use Optimizely's synchronous JavaScript and place it high

Optimizely works best when their JavaScript code is placed as the first element within the <head> tag of your page and is executed synchronously. This ensures Optimizely can appropriately poll the Document Object Model (DOM) as it is built up. If you place Optimizely's code toward say the closing </body> tag, it is highly likely that some flickering will occur.

Use non-blocking selectors

Optimizely executes jQuery selectors one at a time and each selector blocks the ones after until: the element the selector specifies is found in the DOM or the DOM is ready. This has some important consequences.

As an example, say a site has a jQuery selector for their mobile and desktop site:

$('div.desktop h1 a.post-@POST_ID').text('@TITLE');
$('div.mobile h1 a.post-@POST_ID').text('@TITLE');

If a mobile page is loaded where a <div class="mobile"> never exists, the desktop selector will "block" running of the mobile selector until the DOM is ready. Depending on the rest of the site's HTML, this could be seconds before the mobile variation is executed.

The solution here is instead of separate selectors for desktop and mobile, use a single selector for each:

$('h1 a.post-@POST-ID').text('@TITLE');

This element should appear on both desktop and mobile version of the page so we have no blocking and we also have a faster CSS selector.

Blocking selectors is also a reason why DOM elements that are placed very low on a page can also introduce flicker. Since these elements occur very close to a DOM ready event.

Use simple ID and class-based selectors

The last point is an important one, certain jQuery selectors are faster than others. Although we use the href attribute selector in the examples above, this is a notoriously slow selector and can lead to flicker. Where possible, we recommend using class or ID-based selectors like:

$('a.post-@POST_ID').text('@TITLE');

This finds all anchor tags that have a post-@POST_ID class assigned to them which is much faster than href based searching.

Do you have an urgent support question?