Landing Page Testing

Introduction

Testing landing pages for an eCommerce site is crucial for maximizing conversion rates & ROAS, as well as enhancing user experience. A few examples may include:

• Testing different layouts or calls to action for your landing pages from Google ads

• Sending your Facebook traffic to a landing page versus directly to a collection page or your homepage

• Experimenting with different offers for ad traffic, such as 10% vs 20% off their first order

You can use Intelligems to test landing pages in a few different ways. Here, we'll explore testing landing pages using Split URL tests and Onsite Edit tests. Before getting started, make sure you've added the Intelligems script to your Shopify theme.

Setting the Test Up

Option 1: Split URL Test

Two example landing pages that we'd like to test against each other

Split URL tests let you test pages against each other using redirects. When a visitor lands on the control page, they are randomized into a test group, and, if they're not in the control group, they'll be redirected to the corresponding page for their group.

This test type is a great option if you want to get your test up and running quickly, especially if you're using a page builder or making large changes to the page you're testing.

To set up a Split URL landing page test:

1. Create the versions of the page you want to test. Create the pages you want to test, for example, with a page builder or with the Shopify theme editor, and make sure they're accessible on your store through a URL. Note down the URLs of the pages you're testing.

2. Create a new Intelligems Split URL test by clicking "Create a Test" on the Intelligems homepage, then choosing "Content Test" and then "Split URL"

3. Create a test group for each variation you'd like to test. In my example, I'll be testing the existing control page against one variant, so I'll have two test groups total: Control and Test.

4. Enter the URLs of the two landing pages in the test setup. A "Simple" redirect should work for our purposes, since we just want to split between two known URLs. "Advanced" redirects are for when you'd like to match or replace wildcard text. Choose "Redirect Every Time" if a visitor who's assigned to test page should be redirected sent to it any time they reach the Control. Choose "Redirect One Time" if they should be redirected only the first time. In our case, since we're testing fully replacing the control page with the test page, we'll choose "Redirect Every Time."

   
5. Save and preview your experiment. You can refer to our QA guide for tips on what to look for when testing.

6. Launch!

If you use a page builder like PageFly, Replo or GemPages, be sure to add Intelligems JavaScript to their theme files as outlined here! If this step is missed, Intelligems will not be able to track the data for those pages.

Option 2: Onsite Edit Test

Another option is an Onsite Edit test. In an Onsite Edit test, you can use Intelligems' visual editor, injected Javascript, or CSS to insert, hide, and re-arrange elements on a page.

This test type is a good fit if you're making a smaller adjustment to a page (e.g., adding or removing a section, etc.), or if you'd like to avoid redirecting any users for performance or other reasons, and you're comfortable with basic HTML and CSS.

To set up an Onsite Edit landing page test:

1. Decide on a strategy for switching content. For example, if you're testing a new section, it's often easiest to add this section to the page, hidden by default with CSS, and then use CSS injection to un-hide it for the test group. Another option would be to use Intelligems' visual editor to add the section for the test group. We'll go through both techniques below.

2. Create a new Intelligems Onsite Edit test by clicking "Create a Test" on the Intelligems homepage, then choosing "Content Test" and then "Onsite Edit"

3. Create a test group for each variation you'd like to test. Here, we're testing the existing control page against one variant with an added section, so we'll have two test groups total: Control and Test

4. Use Page Targeting to target the test on the landing page. We want the onsite edits to execute only on the landing page, and we want to make sure only visitors to the landing page enter the test and factor into analytics. We can do this by targeting the test on the landing page by URL. For example:

   
5. Set up the onsite edit.

   1. Injected CSS: one way to test a new section of a page is to put the section in the page, but hidden by default, and then inject CSS to unhide it for the test group. For example, you could add a CSS class to your theme: .hidden-section { display: none; } And add this class to new page section in the theme editor or page builder (if you're unable to edit the section's classes you could also write a different selector rather than adding a new class, and add this CSS to your theme's code or with injection for the control group). Then, for the test group, inject some CSS to override this and un-hide the section: .hidden-section { display: block !important; }

      
   2. Insert the section: another way to test a new section is to insert it using Intelligems' onsite editor. For example, to insert a testimonials section above the featured collection on this page, first open the Intelligems onsite editor, then choose the featured collection section and choose "Edit HTML / CSS":

      

      In the dialog, choose "Prepend Outside" in the dropdown in the bottom left. This tells Intelligems to inject the HTML you enter before the section you selected, instead of replacing it.

      

      Next, enter the HTML for the new section in the text editor, and click "Apply." You'll now see the new section appear above the one we selected:

      
6. Save and preview your experiment. You can refer to our QA guide for tips on what to look for when testing.

7. Launch!