Cloudflare Worker-based A/B testing

Access and set up Cloudflare Workers for split testing

1. Access the public repo required here: https://github.com/CloudCannon/static-ab-worker.
2. Clone the repo to your local machine using git.
3. 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

# 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

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!

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