Summary: This walkthrough will show you how to take advantage of LiftIgniter's A/B Testing Feature by using the "Pages" and "Rec Units" sections within the console.
High-Level Overview
Summary: To run an A/B Test in the console, the first step is to create a new Recommendation Unit for each configuration that you want to test. Afterwards, create a Page Group to specify which pages (by URL) to run the A/B test on and allocate traffic between different testing slices.
Rec Units Tab (Recommendation Units): Here, you can create different Recommendation Units to test within each placement. For each Recommendation Unit, you can configure the following:
- Recommendation Count - how many items to recommend
- Mode - The stage of the Recommendation Unit
- Default Boost - which Boost logic to use
- Default Filter - which Filter logic to use
- Overwrite Existing Items - toggle: on/off
- Item Template - The HTML code for each recommended item
Pages Tab: Here, you can create individual page groups to specify which URLs you want to load recommendations on. Within each page group, you can configure the following under the Placements section:
- Placement Location - Where the Recommendation Unit should be placed on the page
- Activation Mode - Which event should trigger the Recommendation Unit to render
- Mode - The stage of the placement (i.e. draft, preview, live)
- % of traffic you want to direct to each Recommendation Unit.
IMPORTANT! - To access the full-menu for either the Pages or Rec Unit section, click on the "Hamburger" button on the top-right corner of your screen.
Step 1: Rec Units Section - Create Recommendation Unit(s)
General: In this section, you can create a recommendation unit for each specific area within your page that you want recommendations sent to.
Recommendation Count: select the number of recommendations you want to render within the Rec Unit.
- Default Boost: Select the specific boost for this Rec Unit.
- Default Filter: Select the specific filter for this Rec Unit.
Under “Mode" (like in Step 1), select from the following options:
- Disabled: A/B test is disabled.
- Draft: A/B test will only show up under preview mode.
- Preview: A/B test will only show up on URLs that contain a special parameter.
- Live: A/B test is live on all sites that fall within the page group.
Overwrite Existing Items (toggle on/off):
If enabled, any pre-existing items within the container will be overwritten by our recommendations.
If disabled*, you will see the following options appear: Insertion Type, Container Selector, Container Template.
Container Selector*: Enter the Rec Unit (container) CSS selector.
Container Template*: Include the HTML code for the container element that holds the recommendation items.
Insertion Type*:
- Before: Insert the recommendation item before the specified container – as its sibling.
- Beginning: Insert the recommendation item inside of the specified container- as its first child.
- End: Insert the recommendation item inside of the specified container – as its last child.
- After: Insert the recommendation item after the specified container – as its sibling.
- Replace: Insert the recommendation item as a replacement for the current item that is specified under the “Item Selector” section.
Item Template:
Copy and paste HTML code for a specific item within the specified container – using mustache bars for any content that you want to source from returned recommendations.
In this example, we are passing in the following content:
- {{ section }}
- {{ url }}
- {{ article_title }}
Important Note: To verify that you are using the correct parameter names inside of your “Item Template,” check the Catalog Tab.
Include CSS: In this section, you can add CSS code to style the container. The CSS syntax should be the same as if it were in a separate .css file.
Include Script: In this section, you can add additional JS to run on the page that is rendering the Recommendation Unit.
API Parameters: This section is for advanced users. In this section, you can add additional API parameters that will be sent to the Model-Server once the page loads.
Once you’re finished configuring your Recommendation Unit:
- Preview: View your current configuration in “Preview Mode”.
- Save: Save your configuration changes.
- Publish: Push your current configuration to go “live”.
Step 2: Pages Section - Configure a Page Group
Summary: Create a page group to filter pages by URL where you want to recommendations to render.
Page Details (top)
Filter Pages by URL - Include Pages that Match
In the Include Pages that Match entry field, you can add static URL parameter(s).
or dynamic URL parameter(s) that starts with a colon “:”
For each dynamic URL parameter, you can filter by either character set or a specific key word - see example below:
Url Tester - click "Test URL Match"
After you configure your URL parameter settings, you can test different URLs to make sure your settings are correct.
Placements (below Page Details)
General: Create a placement for each Recommendation Unit you want to A/B Test.
Under “Placement Location”, enter the CSS selector of your Recommendation Unit (container).
Under “Mode,” select from the following options:
- Disabled: A/B test is disabled.
- Draft: A/B test will only show up under preview mode.
- Preview: A/B test will only show up on URLs that contain a special parameter.
- Live: A/B test is live on all sites that fall within the page group.
Under “Activation Mode,” you can specify which event causes the Recommendation Unit(s) to render on your page.
- When the page loads: Recommendation Unit(s) will render when the page loads.
- When an element is clicked: Recommendation Unit(s) will only render when a specified element is clicked.
- When an element is visible: Recommendation Unit(s) will only render when a specified element becomes visible in the viewport.
Allocating Traffic Between Rec Units
Use the slider (circle) to allocate traffic between different Recommendation Units.
Once Finished configuring the Page Group:
- Preview: View your current configuration in “Preview Mode”.
- Save: Save your configuration changes.
- Publish: Push your current configuration to go “live”.