如何使用 GraphQL 进行 A/B 测试

什么是 A/B 测试？

A/B 测试是一种通过比较两个不同版本的网站或应用页面来确定哪个版本更有效的测试方法。通常，A/B 测试涉及将随机分组的用户显示两个不同版本的页面，然后测量哪个版本引起了更多的用户行为，例如点击按钮或注册。

GraphQL 简介

GraphQL 是一种新型的数据查询语言和 API 规范，它的宗旨是减少前端和后端之间的沟通成本。GraphQL 查询语言可以让前端精准地描述其数据需求，供后端开发者实现和提供相应的数据。GraphQL 确保了数据请求和响应之间的规范和一致性，使得前后端之间可以更好地协作。

A/B 测试与 GraphQL

使用 GraphQL 进行 A/B 测试时，需要将测试版本的数据集成到 GraphQL API 中。这样，前端可以从服务器请求两个不同版本的数据，并根据用户的随机分组将数据分配给相应的用户。以下是使用 GraphQL 实现 A/B 测试的步骤：

  • 在 GraphQL API 中添加一个用于查询测试版本数据的查询字段
  • 使用 GraphQL mutations 创建实验，并将需要的数据写入数据库
  • 在前端应用程序中根据随机数分配用户到不同的实验组
  • 从 GraphQL API 中获取数据，并根据用户所在的实验组显示正确的版本

在 GraphQL 中查询测试版本数据

首先，我们需要在 GraphQL API 中添加一个新的查询字段来查询测试版本数据。我们将使用下面的 GraphQL schema，该 schema 包括一个查询字段和一个测试版本组数据类型：

---- ----- -
  - --- ------
  ---------------------------- ----- -------------
-

---- --------- -
  --- ---
  -------- -------
-

testVariations 是查询测试版本数据的字段。它需要一个 experimentId 参数来指定测试的是哪个实验。Variation 类型表示实验组中的一个版本，它包括该版本的 ID 和内容。

下面是一个基于 Express.js 的 GraphQL 实现例子：

----- ------- - ------------------
----- - ------------- --- - - --------------------------------

----- --------- - -
  - --- ---- -------- -------- -- --
  - --- ---- -------- -------- -- --
-

----- ----------- - -
  - --- -------------- ----------- ----- ---- --
-

----- -------- - ----
  ---- ----- -
    ---------------------------- ----- -------------
  -

  ---- --------- -
    --- ---
    -------- -------
  -
-

----- --------- - -
  ------ -
    --------------- --- - ------------ -- -- -
      ----- ---------- - ------------------ -- ---- --- -------------
      -- ------------- ----- --- -------------- ------------
      ------ ----------------------------- -- ---------------- -- ---- --- -----
    --
  --
-

----- ------ - --- -------------- --------- --------- --

----- --- - ---------
------------------------ --- --

----- ---- - ---------------- -- ----
---------------- -- -- -
  ------------------- -- ------- -- ---- ---------
--

这会创建一个 Apollo 服务器，并在 /graphql 端点暴露了 GraphQL API。testVariations 的 resolver 会读取 experimentId 参数，然后从 experiments 数组中查找对应实验的测试版本 ID，最后利用 varations 数组查找相应的版本内容。

创建实验和向数据库写入测试版本数据

为了创建实验和向数据库写入测试版本数据，我们可以使用 GraphQL mutations 以及一个名为 Prisma 的 ORM（对象关系映射）框架。

在服务器端，我们需要安装 Prisma CLI，然后运行 prisma init 命令以初始化项目。开发环境下，Prisma 可以使用 sqlite 数据库。

我们在创建实验时，需要记录实验的名称，用户组（如果有）、变体和变体控制内容。

以下是一个示例 Experiment 模型：

----- ---------- -
  --        ------      --- ----------------
  ----      ------      -------
  --------- -----------
-

----- --------- -
  --           ------   --- ----------------
  ------------ ------
  ----------   ---------- ----------------- --------------- ----------- -----
  -------      ------
  ---------    -------
  ------       ---
-

在 Variation 模型中，experimentId 是对应实验的 ID。content 是变体内容，isControl 表示是否为控制变体。weight 表示分配给该变体的权重。

然后，我们可以使用 GraphQL mutations 来创建和更新实验和变体。这里是一个用于创建变体的 createVariation mutations 的例子：

-------- --------------- -
  ----------------
    ----- -
      ------------- -------------
      -------- -------- --
      ---------- -----
      ------- -
    -
  - -
    --
    -------
    ---------
  -
-

这个 mutations 首先需要一个变体的数据参数，包括对应实验的 ID、变体内容、是否为控制变体以及权重。然后，它会返回新创建的变体 ID、内容和是否为控制变体。

由于我们使用 Prisma 管理数据库，我们需要定义一个 mutations resolver，并使用 Prisma 将数据写入数据库。下面是一个例子：

----- --------- - -
  -- --- -- --------
  --------- -
    ----- --------------- --- - ---- -- -
      ----- ---------- - ----- ------------------------------
        ------ - --- ----------------- --
      --

      -- ------------- ----- --- -------------- ------------

      ------ ------------------------- ----- -
        --------
        ----------- - -------- - --- ----------------- - --
      - --
    --
  --
-

这里的 Mutations resolver 使用 prisma 来读取实验，并通过 variation.create 创建新的变体。

其他步骤

在创建实验和数据后，我们需要在前端应用中分配用户到不同实验的随机分组中。分组的方法可以是基于用户 ID 的哈希运算或利用统一随机分布的随机数生成器。可以使用 JavaScript 的 Math.random() API 来生成均匀分布的随机数。

最后，我们需要在前端应用中查询测试版本数据，并根据实验组的划分来显示正确版本的内容。

以下是一个基于 React.js 实现的例子：

------ - -------- - ---- ----------------

----- ---------- - ----
  ----- ------------------------ ---- -
    ---------------------------- -------------- -
      --
      -------
    -
  -
-

-------- -------- -- ------ -- -
  ----- - -------- ------ ---- - - -------------------- -
    ---------- - ------------- ------------- --
  --

  ----- --------- - ---------------- -- -
    -- -------- -- ------ ------ ----
    ----- --------- -------------- - -------------------
    ----- ----- - ------- - --- - -----------------
    ------ ----------------- -- -------
  -- -------- ------

  -- --------- ------ ------------
  -- ------- ------ ------- -----------------

  ------ ------------------------------
-

这里的 useQuery() 是 Apollo 客户端的 hook，它会返回一个 data 对象，该对象中包含由 GraphQL 查询返回的数据。我们还在组件中使用了 React.memo() 来保证性能。

结论

使用 GraphQL 进行 A/B 测试，我们可以更好地管理和使用测试数据。与传统 A/B 测试方法相比，它提供了更好的灵活性和可扩展性，以及更好的前后端协作体验。同时，在实践中，我们还需要考虑诸如测试大小、分组比例等问题，以确保 A/B 测试的有效性和可靠性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671af4f19babaf620fa6afb2

阅读全文

精选内容

相关推荐

    暂无