README

为Laravel提供的非常简单的Web A/B测试包

安装

您可以使用Composer轻松安装此包

$ composer require tixelrocks/abtest

配置

在config/ab.php文件中配置您的A/B实验（默认不提供）。假设我们在网站上某个地方有一个按钮，我们想看看哪个行动号召更好——“继续”还是“完成”

<?php
// config/ab.php

return [
    [
        // A/B testing a piece of text
        'control' => 'Continue',
        'treatment' => 'Finish',
        'name' => 'Purchase Button Test'
    ],
    [
        // A/B testing two view templates
        // We will try to use common.welcome-control and common.welcome-treatment templates
        'view' => 'common.welcome',
        'name' => 'Purchase Button Test'
    ]
];

选择变体

一些用户将看到“继续”（版本A或“控制”版本），一些用户将看到“完成”（版本B或“处理”版本），这将在每个用户的基础上决定，大致以1:1的比例基于第一次访问时由Tixel\AbTest\SetAbTestCookie中间件设置的cookie，您可以将该中间件添加到任何路由或所有路由

<?php
    // somewhere in app\Http\Kernel.php
    protected $middlewareGroups = [
        'web' => [
            SetAbTestCookie::class,
            ...
    ]

为了方便本地故障排除，您还可以在任何时候使用查询参数

$ curl http://localhost:8000/?abTest=treatment

在模板中的使用

在Blade模板中定位按钮，并将按钮文本替换为我们提供的辅助函数或Blade指令，传递从配置文件中获取的A/B实验名称

    <button>
        {{ abTest('Purchase Button Test') }}
    </button>

    <button>
        @abTest('Purchase Button Test')
    </button>

    @include(abTest('Purchase Confirmation Page'))

太好了！文本现在将根据用户和浏览器中的cookie显示为变体A和变体B，但我们需要跟踪结果。此包目前附带Google Analytics和Segment组件，但很容易添加其他组件。

假设我们想向Google Analytics发送一个事件

   <button
    data-ga="event"
    data-event-category="{{ abTest('Purchase Button Test')->id() }}"
    data-event-action="Clicked"
    data-event-label="{{ abTest('Purchase Button Test')->description() }}"
   >
     @abTest('Purchase Button Test')
   </button>

当然，这可以是两个独立的DOM元素

   <h3>
    @abTest('Purchase Button Headline')
   </h3>
   
   <button
    data-ga="event"
    data-event-category="{{ abTest('Purchase Button Headline')->id() }}"
    data-event-action="Clicked"
    data-event-label="{{ abTest('Purchase Button Headline')->description() }}"
   >
    Buy
   </button>

我们可以添加一个全局点击处理程序，将其发送到GA，从任何页面上的任何按钮

document.addEventListener('click', function (event) {
    var element = event.target.closest('[data-ga]');
    if (! element) return;
    if (element.getAttribute('data-ga') != 'event') return;
    var action = element.getAttribute('data-ga-action') || 'click';

    gtag('event', action, {
        'event_category': element.getAttribute('data-ga-category'),
        'event_label': element.getAttribute('data-ga-label'),
        'transport_type': 'beacon',
    });
}, false);

好了，现在我们有关于有多少用户点击了每个变体（A或B）的数据，但要准确计算转化率，我们还想看到有多少用户看到了变体A和B，所以让我们也发送页面视图数据

// Somewhere in our Blade template
<x-abtest-ga-event
    category="{{ abTest('Purchase Button Test')->id() }}"
    action="Opened"
    label="{{ abTest('Purchase Button Test')->description() }}"
></x-abtest-ga-event>

结果

现在很容易看到有多少用户正在查看每个版本，以及有多少用户正在点击。几周后，您可以决定保留哪个选项，以及哪个选项要删除 :)

管理测试

要查看当前正在进行的测试，您可以使用此包附带的控制台命令查找模板中所有abTest()函数的使用情况

$ php artisan abtest:find-files
Discovered a total of 23 view templates in /Users/user/resources/views
+---------------------------------------------+--------------------+----------------------+
| File                                        | A/B Test Name      | Lines                |
+---------------------------------------------+--------------------+----------------------+
| /resources/views/purchase/buy.blade.php     | Purchase Button Te | 52, 61, 63, 135, 137 |
+---------------------------------------------+--------------------+----------------------+

您也可以将其公开为路由

Route::get('/ab', function () {
    Artisan::call('abtest:find-files');

    return '<pre>'. Artisan::output() . '</pre>';
});

要禁用测试，要么用纯文本或注释替换abTest()函数或@abTest指令，要么在配置文件中注释掉选项之一。