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
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.
This is our control:
This is the test 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.
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:
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:
Select “Edit HTML” to trigger an input box where you will paste in the HTML for the variation you wish to test:
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.
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:
That code was pasted into a text editor and came out looking like this:
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: