Headed to INBOUND '16? We'd love to connect with you!  Meet With New Breed

New Breed Blog

Get Blog Updates

How to Implement Optimizely and HubSpot for A/B Split Testing

Patrick Murphy
Aug 11, 2015 9:00:00 AM  |  Patrick Murphy

a/b-split-testing

Quantitative data speaks for itself. In a world where conversion rates are king, the ability to test hypotheses and strive for continuous improvement is an invaluable tool. However, finding the right technology stack to run these tests can often present its challenges. For example, HubSpot's A/B testing is exclusive to their Enterprise level portals–in some cases we’ll help customers use Optimizely to implement experiments instead.

In today’s post, we’re going to take a deep dive into the implementation of an Optimizely test on a HubSpot COS website.

Laying the foundation with Optimizely and HubSpot for A/B split testing

Our example:

To walk you through how to effectively conduct a split test, we'll use an example of how we used this technique on our own website. We wanted to swap out a panel of CTAs at the bottom of our homepage with an interactive form for potential leads to complete.

When dealing with vanilla HTML and CSS, setting up a basic A/B test with Optimizely is fairly straightforward. However, because the content we wanted to test relied on a HubSpot Form embed code utilizing Javascript, implementation became more challenging due to the fact that Optimizely uses its own JS to swap out A/B variations and doesn’t work well with scripts placed inside test variations. Working around this problem became the crux of our implementation, as we detail below.

This is our control:

optimizely-control

This is the test variation:

optimizely-variation

Creating your experiment in Optimizely

First, you set up your experiment, including the URL of the page you wish to target. Once complete, the experiment editor will load, which is where the bulk of your work will occur. The editor main panel offers the ability to start and stop an experiment, add and save variations, and view a preview of what a variation will look like in comparison to the original page content.

optimizely-editor

To target the portion of content you are interested in testing, simply hover your mouse over the content area until the right space is selected. As you hover over sections of the page, Optimizely simply adds a visible border to whatever element of the HTML DOM you have hovered over.

Selecting our test area was as easy as this:

optimizely-select

Once the proper element is selected, a number of options appear in a pop-up menu to the right of the screen. Clicking on “Edit Element,” a smaller menu will appear:

optimizely-menu

Select “Edit HTML” to trigger an input box where you will paste in the HTML for the variation you wish to test:

optimizely-html

Now, if the code you were going to enter was for, say, a hardcoded form, you would simply cut-and-paste everything in between your “<form>…</form>” tags, and call it a day. But, if your form or content is dynamically generated with Javascript—like ours was—you will need to employ a bit of a work-around to get the job done.

Leveraging HubSpot content in experiment

Let’s take a sideways step in the development process for a moment and go to the creation of the content you’ll be testing.

Regardless of whether you’re working in the HubSpot COS (like we are), utilizing another CMS, or even raw HTML/CSS/JS, you will obviously need to create the HTML content and styling for your live page before you can start testing it in Optimizely.

What we did was create a form module in the COS and place it on the page template in the Design Manager, and then set its display property to “none” in the CSS. This allowed us to develop out the target content on the live site through the browser’s element inspector by simply changing the display to “block,” and without disrupting the experience of visitors to the site.

In the Design Manager, open up the target page template and place the form or module either above or below the content you want to replace.

template-editor-optimizely

In the case of the HubSpot COS, to get the HTML for input into Optimizely, we were able to copy over the whole DOM tree from the generated HubSpot form into a text editor and make any needed revisions before uploading to Optimizely. We did this by selecting the correct div in the inspector DOM tree, right-clicking and selecting copy:

code-editor

That code was pasted into a text editor and came out looking like this:

raw-html

Included in the generated code was some JavaScript wrapped up in “<script>...</script>” tags, which is a no-go for Optimizely, since Optimizely works by wrapping the submitted HTML in JavaScript of its own.

However, the script was essential for running the form on our site. The solution was to strip the script out of the HTML before putting it in Optimizely, place it in its own file, and attach that file to the head of our target page, like so:

footer

Once our CSS had been set, the JavaScript stripped from the HTML and placed in its own file, and the HTML replaced in the selected content area in Optimizely, starting the experiment was as easy as clicking “Start Experiment” in the upper-right corner of the Optimizely editor. Voila, let the A/B testing begin!

new-breed-marketing-website-redesign

HubSpot COS
Software

Comments

Comments

Patrick Murphy

This post was written by Patrick Murphy

Patrick is a Junior Web Designer responsible for comps and building out website front-ends in HubSpot and Wordpress.

    Inbound-Marketing-Guide