GrowthBook与Rudderstack和Next.js的A/B测试集成指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00802/article/details/148466102

GrowthBook与Rudderstack和Next.js的A/B测试集成指南

growthbook growthbook/growthbook: GrowthBook 是一个开源的A/B测试和多变量测试平台，它提供了灵活且可扩展的框架，帮助数据驱动的产品团队进行实验管理、用户细分和数据统计分析，以优化产品性能并推动业务增长。项目地址: https://gitcode.com/gh_mirrors/gr/growthbook

前言

在现代Web应用开发中，A/B测试是优化用户体验和提升转化率的重要手段。本文将详细介绍如何将GrowthBook这一开源特性管理和A/B测试平台，与Rudderstack数据分析平台以及Next.js框架进行集成，构建一个完整的实验分析体系。

准备工作

1. 创建GrowthBook账户

首先需要准备GrowthBook环境，可以选择：

使用官方提供的云服务
自行搭建本地环境（需要准备数据库和服务器资源）

2. 配置Rudderstack数据源

在Rudderstack控制台中完成以下配置：

创建新的JavaScript数据源，命名为"GrowthBook JS"或其他有意义的名称
将该数据源连接到BigQuery数据仓库（或其他支持的数据目的地）
记录下数据源的写入密钥(Write Key)和数据平面URL(Data Plane URL)

核心集成步骤

3. 在Next.js中集成Rudderstack

安装依赖

yarn add rudder-sdk-js
# 或
npm install --save rudder-sdk-js

创建Rudderstack加载器

在项目中创建rudder.js文件，实现Rudderstack的异步加载和初始化：

let rudder;

async function getInstance() {
  if (!rudder) {
    rudder = await import("rudder-sdk-js");
    rudder.load(
      process.env.NEXT_PUBLIC_RUDDERSTACK_KEY,
      process.env.NEXT_PUBLIC_RUDDERSTACK_HOST,
      { integrations: { All: true } }
    );
    await new Promise((resolve) => rudder.ready(resolve));
  }
  return rudder;
}

const rudderObj = {
  init: getInstance,
  track: (...args) => getInstance().then((r) => r.track(...args)),
  getAnonymousId: async () => getInstance().then((r) => r.getAnonymousId()),
};

export default rudderObj;

配置环境变量

在.env.local文件中添加：

NEXT_PUBLIC_RUDDERSTACK_KEY=<你的写入密钥>
NEXT_PUBLIC_RUDDERSTACK_HOST=https://<你的数据平面URL>

4. 集成GrowthBook React SDK

安装依赖

yarn add @growthbook/growthbook-react

配置GrowthBook环境变量

NEXT_PUBLIC_GROWTHBOOK_FEATURES_URL=<GrowthBook API地址>

修改_app.js核心逻辑

import { GrowthBook, GrowthBookProvider } from "@growthbook/growthbook-react";
import { useEffect } from "react";
import rudder from "./rudder";

const growthbook = new GrowthBook({
  trackingCallback: (experiment, result) => {
    rudder.track("Experiment Viewed", {
      experimentId: experiment.key,
      variationId: result.variationId,
    });
  },
});

export default function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // 加载特性定义
    fetch(process.env.NEXT_PUBLIC_GROWTHBOOK_FEATURES_URL)
      .then((res) => res.json())
      .then((json) => {
        growthbook.setFeatures(json.features);
      });

    // 设置目标属性
    growthbook.setAttributes({
      company: "example",
      browser: "chrome",
      url: window.location.href,
    });

    // 添加Rudderstack匿名ID
    rudder.getAnonymousId().then((id) => {
      growthbook.setAttributes({ ...growthbook.getAttributes(), id });
    });
  }, []);

  return (
    <GrowthBookProvider growthbook={growthbook}>
      <Component {...pageProps} />
    </GrowthBookProvider>
  );
}