Cloudflare Worker-based A/B testing
For those looking for a more robust solution, the Cloudflare Worker-based approach offers advanced features and performance benefits. Below are the steps for setting up A/B testing using Cloudflare Worker.

Access and set up Cloudflare Workers for split testing
- Access the public repo required here: https://github.com/CloudCannon/static-ab-worker.
- Clone the repo to your local machine using git.
- Review the README provided in the repository to understand the functionality of the Cloudflare Worker, its requirements, and how to customise it for your specific needs.
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 YAML configuration and Liquid template including the script to push events to Google Analytics. (See this lesson for more information on setting up Google Analytics.)
ab.bookshop.yml
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 data-ab-define="{{ reference }}" data-ab-ratio="{{ ratio }}">
{% if active_variation == "One" %}<div>{% else %}template{% endif %} data-ab-reference="{{ reference }}" data-ab-variation="0">
{% for component in variation_one.blocks %}
{% bookshop "{{component._bookshop_name}}" bind: component %}
{% endfor %}
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(["event", "ab_test_pageview", { "ab_test_name": "{{ reference }} v0" }]);
</script>
</{% if active_variation == "One" %}div{% else %}template{% endif %}>
{% if active_variation == "Two" %}<div>{% else %}template{% endif %} data-ab-reference="{{ reference }}" data-ab-variation="1">
{% for component in variation_two.blocks %}
{% bookshop "{{component._bookshop_name}}" bind: component %}
{% endfor %}
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(["event", "ab_test_pageview", { "ab_test_name": "{{ reference }} v1" }]);
</script>
</{% if active_variation == "Two" %}div{% else %}template{% endif %}>
</div>
Implementation in index.html
index.html
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
Integrate the component with the Cloudflare Worker using API calls or hooks to trigger and track A/B tests.
Go live with your test!
Lessons in this Tutorial
A/B Testing for Static Websites
- A/B testing for static sites
- JavaScript based A/B testing
- Cloudflare Worker-based A/B testing
- Analytics for A/B test performance
- Discuss implementation with our team