JavaScript based A/B testing

Create a component within CloudCannon to manage the A/B test content

In Bookshop, you need to create the two following files:

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:

# 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 and variation_two blocks in the Liquid template:

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!

Learn how to set up A/B Test Analytics Tracking with Google Tag Manager and Google Analytics 4 in this lesson.