JavaScript based A/B testing
This option uses JavaScript to handle the A/B testing directly within your websites frontend. Please note while this approach is more accessible, it may affect performance due to client-side rendering.
![](https://cc-dam.imgix.net/blog/uploads/cc-logo-1000-padded.png?auto=compress&auto=format&w=96&dpr=1&crop=faces&fit=crop&height=96)
Create a component within CloudCannon to manage the A/B test content
In Bookshop, you need to create the two following files:
copied
ab/
├─ ab.bookshop.yml
└─ ab.eleventy.liquid
Below are code snippets for the YAML configuration and Liquid template, with optional example code to push events to Google Analytics. (See this lesson for more information on setting up Google Analytics.)
ab.bookshop.yml:
ab.bookshop.yml
copied
# Metadata about this component, to be used in CloudCannon
spec:
structures:
- content_blocks
label: "AB Test"
description: "Used to show different variants of content to end users, as a means to test which is more effective."
icon:
tags: ["containers"]
# Defines the structure of this component, as well as the default values
blueprint:
reference: "Name of the test"
ratio: "50:50"
active_variation: One
variation_one:
blocks: []
variation_two:
blocks: []
# Overrides any fields in the blueprint when viewing this component in the component browser
preview:
# Any extra CloudCannon inputs configuration to apply to the blueprint
_inputs:
active_variation:
type: select
options:
values:
- One
- Two
ab.eleventy.liquid:
<div class="c-ab" data-ab-define="{{ reference }}" data-ab-ratio="{{ ratio }}">
<div data-ab-reference="{{ reference }}" data-ab-variation="0">
{% for component in variation_one.blocks %}
{% bookshop "{{component._bookshop_name}}" bind: component %}
{% endfor %}
</div>
<template>
<div data-ab-reference="{{ reference }}" data-ab-variation="1">
{% for component in variation_two.blocks %}
{% bookshop "{{component._bookshop_name}}" bind: component %}
{% endfor %}
</div>
</template>
</div>
<script>
{
let ab_component = document.querySelector(".c-ab[data-ab-define='{{ reference }}']");
let ab_obj;
let ref = ab_component.getAttribute("data-ab-define")
let currURL = window.location.href;
let ab = localStorage.getItem("cc-ab") ? JSON.parse(localStorage.getItem("cc-ab")) : []
let ab_filtered = ab.filter(x => x.url === currURL && x.component_ref === ref)
if(ab_filtered.length > 0)
ab_obj = ab_filtered[0]
else
{
let ratio = ab_component.getAttribute("data-ab-ratio")
ratio = ratio.split(":")
let random = Math.floor(Math.random() * (100 - 0) + 0);
let variation = random < ratio[0] ? "0" : "1";
ab_obj = { "url": currURL, "variation": variation, "component_ref": ref }
ab.push(ab_obj)
localStorage.setItem("cc-ab", JSON.stringify(ab))
}
if(ab_obj.variation == "1"){
ab_component.querySelector(`div[data-ab-variation='0'`)?.remove();
let temp = ab_component.getElementsByTagName("template")[0]
ab_component.appendChild(temp.content.cloneNode(true))
}
// Optional Google Analytics example
window.dataLayer = window.dataLayer || [];
dataLayer.push(["event", "ab_test_pageview", { "ab_test_name": `${ref} v${ab_obj.variation}` }]);
}
</script>
Add your components and content
- Insert the A/B test component into your page.
- Add your components and content within the
variation_one
andvariation_two
blocks in the Liquid template:
copied
content_blocks:
- _bookshop_name: ab
reference: Sample AB Test
ratio: '50:50'
active_variation: One
variation_one:
blocks:
# Add components and content for Variation One
variation_two:
blocks:
# Add components and content for Variation Two
Go live with your test!
Lessons in this Tutorial
A/B Testing for Static Websites