Wagtail A/B 测试

Wagtail A/B 测试是一个为Wagtail设计的A/B测试包，允许用户通过Wagtail管理员创建和管理页面上的A/B测试。

主要功能

• 在Wagtail内部创建任何页面的A/B测试
• 使用页面修订进行测试（无需为变体创建单独的页面）
• 测试进行时阻止用户编辑页面
• 使用皮尔逊卡方检验计算置信度

变更日志

用法

Wagtail A/B 测试在Django 3.2+、Wagtail 5.2+和Python 3.9+环境中运行。

创建A/B测试

任何具有“创建A/B测试”权限的用户都可以通过从页面操作菜单中点击“保存并创建A/B测试”来创建A/B测试。

第一个页面会显示最新草稿的内容与页面的实时版本之间的差异。这允许他们检查页面上将要测试哪些更改。

确认之后，用户将被带到表单，用于输入测试名称/假设、选择目标以及样本大小。

监控测试进度

测试进行时，页面的编辑视图会被一个显示当前测试进度的仪表板所取代。用户必须在测试完成或取消之前才能编辑页面。

任何具有发布页面权限的用户都可以启动、暂停、恢复或结束该页面的A/B测试。

完成测试

当参与者的数量达到样本大小时，测试会自动停止。根据显示的结果，用户必须决定是发布新更改还是恢复页面的旧版本。

选择之后，页面编辑视图将恢复正常。此A/B测试的结果可在A/B测试选项卡或从A/B测试报告中访问。

安装

首先，从PyPI安装wagtail-ab-testing包

pip install wagtail-ab-testing

然后将其添加到INSTALLED_APPS

INSTALLED_APPS = [
    # ...
    'wagtail_ab_testing',
    # ...
]

然后向您的URLconf添加以下内容

from wagtail_ab_testing import urls as ab_testing_urls

urlpatterns = [
    ...

    path('abtesting/', include(ab_testing_urls)),
]

最后，将跟踪脚本添加到您的基本HTML模板中

{# Insert this at the top of the template #}
{% load wagtail_ab_testing_tags %}

...

{# Insert this where you would normally insert a <script> tag #}
{% wagtail_ab_testing_script %}

实现自定义目标事件类型

开箱即用，Wagtail A/B 测试提供了一个“访问页面”的目标事件类型，您可以使用它来跟踪用户何时访问目标页面。它还支持自定义目标类型，可用于跟踪其他事件，例如完成购买、提交表单或点击链接。

要实现自定义目标事件类型，首先使用register_ab_testing_event_types钩子注册您的类型，这将把您的目标类型添加到用户创建A/B测试时显示的选项列表中

# myapp/wagtail_hooks.py

from wagtail import hooks
from wagtail_ab_testing.events import BaseEvent


class CustomEvent(BaseEvent):
    name = "Name of the event type"
    requires_page = True  # Set to False to create a "Global" event type that could be reached on any page

    def get_page_types(self):
        return [
            # Return a list of page models that can be used as destination pages for this event type
            # For example, if this 'event type' is for a 'call to action' button that only appears on
            # the homepage, put your `HomePage` model here.
        ]


@hooks.register('register_ab_testing_event_types')
def register_submit_form_event_type():
    return {
        'slug-of-the-event-type': CustomEvent,
    }

接下来，您需要告诉Wagtail A/B 测试用户何时触发目标。这可以通过在浏览器中调用wagtailAbTesting.triggerEvent()来完成

if (window.wagtailAbTesting) {
    wagtailAbTesting.triggerEvent('slug-of-the-event-type');
}

JavaScript库使用localStorage跟踪A/B测试，因此只有在用户参与具有提供的目标类型且当前页面为目标页面时，才会调用服务器。

示例：添加“提交表单”事件类型

在这个例子中，我们将为ContactUsFormPage页面类型添加“提交表单”事件类型。

首先，我们需要注册事件类型。为此，在您的应用程序中实现register_ab_testing_event_types钩子的处理器

# myapp/wagtail_hooks.py

from wagtail import hooks
from wagtail_ab_testing.events import BaseEvent

from .models import ContactUsFormPage


class SubmitFormPageEvent(BaseEvent):
    name = "Submit form page"

    def get_page_types(self):
        # Only allow this event type to be used if he user has
        # selected an instance of `ContactUsFormPage` as the goal
        return [
            ContactUsFormPage,
        ]


@hooks.register('register_ab_testing_event_types')
def register_submit_form_event_type():
    return {
        'submit-contact-us-form': SubmitFormPageEvent,
    }

接下来，我们需要添加一些代码到前端，以便在用户提交表单时触发此事件

# templates/forms/contact_us_form_page.html

<form id="form">
    ...
</form>

<script>
    if (window.wagtailAbTesting) {
        document.getElementById('form').addEventListener('submit', function() {
            wagtailAbTesting.triggerEvent('submit-contact-us-form');
        });
    }
</script>

在使用Cloudflare缓存的网站上运行A/B测试

要在使用Cloudflare的网站上运行Wagtail A/B 测试，首先生成一个安全的随机字符串用作令牌，并在您的Django设置文件中配置该令牌

WAGTAIL_AB_TESTING_WORKER_TOKEN = '<token here>'

然后根据以下JavaScript设置Cloudflare Worker

// Set to false if Cloudflare shouldn't automatically redirect requests to use HTTPS
const ENFORCE_HTTPS = true;

export default {
    async fetch(request, env, ctx) {
        const url = new URL(request.url);

        // Set this to the domain name of your backend server
        const WAGTAIL_DOMAIN = env.WAGTAIL_DOMAIN;

        // This should match the token on your Django settings
        const WAGTAIL_AB_TESTING_WORKER_TOKEN =
            env.WAGTAIL_AB_TESTING_WORKER_TOKEN;

        if (url.protocol == 'http:' && ENFORCE_HTTPS) {
            url.protocol = 'https:';
            return Response.redirect(url, 301);
        }

        if (request.method === 'GET') {
            const newRequest = new Request(request, {
                headers: {
                    ...request.headers,
                    Authorization: 'Token ' + WAGTAIL_AB_TESTING_WORKER_TOKEN,
                    'X-Requested-With': 'WagtailAbTestingWorker',
                },
            });

            url.hostname = WAGTAIL_DOMAIN;
            response = await fetch(url.toString(), newRequest);

            // If there is a test running at the URL, the worker would return
            // a JSON response containing both versions of the page. Also, it
            // returns the test ID in the X-WagtailAbTesting-Test header.
            const testId = response.headers.get('X-WagtailAbTesting-Test');
            if (testId) {
                // Participants of a test would have a cookie that tells us which
                // version of the page being tested on that they should see
                // If they don't have this cookie, serve a random version
                const versionCookieName = `abtesting-${testId}-version`;
                const cookie = request.headers.get('cookie');
                let version;
                if (cookie && cookie.includes(`${versionCookieName}=control`)) {
                    version = 'control';
                } else if (
                    cookie &&
                    cookie.includes(`${versionCookieName}=variant`)
                ) {
                    version = 'variant';
                } else if (Math.random() < 0.5) {
                    version = 'control';
                } else {
                    version = 'variant';
                }

                return response.json().then((json) => {
                    return new Response(json[version], {
                        headers: {
                            ...response.headers,
                            'Content-Type': 'text/html',
                        },
                    });
                });
            }

            return response;
        } else {
            return await fetch(url.toString(), request);
        }
    },
};

您可以使用CloudFlare的wrangler设置Worker。在空目录中安装wrangler

npm install wrangler --save-dev

然后初始化一个新的Wrangler项目

npx wrangler init

遵循CLI提示，直到为您生成项目，然后将上面的JS脚本添加到src/index.js。

将一个名为WAGTAIL_AB_TESTING_WORKER_TOKEN的变量添加到Worker中，并赋予它之前生成的相同的令牌值。同时，确保设置一个名为WAGTAIL_DOMAIN的变量，其值为您网站所在域名（例如："www.mysite.com"）。

最后，在Cloudflare中添加一个路由，以便所有流量都通过此Worker。

贡献

安装

要修改此项目，首先将此仓库fork并克隆到您的本地系统

git clone link-to-your-forked-repo
cd wagtail-ab-testing

使用您首选的虚拟环境激活后，安装测试依赖项

python -m pip install -e .[testing]

如何运行测试

python testmanage.py test

格式化和代码风格检查

我们使用pre-commit来确保在提交之前所有代码都经过格式化和代码风格检查。要安装pre-commit钩子，运行

pre-commit install

pre-commit钩子将在每次提交之前自动运行。或者，您也可以手动运行它们

pre-commit run --all-files

致谢

wagtail-ab-testing最初由Karl Hobley创建