Gatsby 实战：用 Google Analytics 与 Netlify Split Testing 搭建 A/B 测试（含分支变体方案）

Gatsby 实战用 Google Analytics 与 Netlify Split Testing 搭建 A/B 测试含分支变体方案【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址: https://gitcode.com/gh_mirrors/ga/gatsby这篇技术指南将带你从零搭建一套完整的 A/B 测试Netlify 官方术语叫 Split Test方案先用 Git 分支维护站点的多个页面变体借助 Netlify 的分支部署能力发布不同版本再通过 Google Analytics 自定义维度Custom Dimension按分支名记录访问数据最终在 GA 报表中对比不同版本的用户行为。读完本文你将掌握分支驱动的 A/B 测试工作流、GA 自定义维度与{{ BRANCH }}注入变量的搭配用法以及如何在 Netlify Post Processing 中注入跟踪脚本。什么是 A/B 测试以及它在本方案中的形态A/B 测试也叫分桶测试 / split test是比较一个网页上不同改动效果的常用方法让一部分用户看到版本 A另一部分用户看到版本 B然后通过埋点数据判断哪个版本表现更好。本文的方案遵循「分支即版本」的思路在 Git 仓库中用不同分支存放站点的不同变体例如master与heading-variation在 Netlify 上创建 Split Test让流量按比例分流到不同分支的部署在页面加载时把当前分支名Netlify 提供的{{ BRANCH }}变量作为自定义维度上报给 Google Analytics在 GA 报表中按自定义维度分组对比不同分支的访问表现。仓库文档 ab-testing-with-google-analytics-and-netlify.md 以「Twitter 上说蓝色页头能提升用户停留时长」为例展开你有一个猜想把页头改成蓝色能提升页面参与度但需要用数据来验证于是把页头从默认配色改成蓝色作为实验变体跑一轮 A/B 测试来取证。下面我们就按这个案例完整走一遍。第一步创建第一个变体master 分支修改默认 Starter 的页头组件先从一个使用 Gatsby 默认 Starter 的站点开始。默认 Starter 的页头组件位于仓库的 starters/default/src/components/header.js该文件导出一个渲染站点标题与 Logo 的Header组件。我们把它内部的背景色改成一个紫色#5B3284header style{{ background: #5B3284, // highlight-line marginBottom: 1.45rem, }} 如果你的 Starter 版本较新组件代码结构可能略有不同例如使用了var(--space-4)、var(--size-gutter)等 CSS 变量布局但改动逻辑一致找到header元素设置background样式即可。A/B 测试的改动可以是任何 CSS 属性、文案、图片甚至是某个 React 组件的渲染逻辑。提交并推送 master 分支完成第一个变体后把改动提交到master分支。如果还没有远程仓库先在 GitHub 上创建一个新仓库然后执行git add src/components/header.js git commit -m Change header background color git remote add origin [your remote repo URL] git push -u origin master如果你不熟悉 Git 分支可以先去查阅 Git 入门资料理解分支branch与提交commit的概念是本方案的基础。第二步创建第二个变体heading-variation 分支第二个变体与第一个变体共用绝大多数代码只改动页头颜色因此非常适合用新分支来表达「差异」。git checkout -b heading-variation切到新分支后再次修改header.js把背景色换成蓝色#1f618dheader style{{ background: #1f618d, // highlight-line marginBottom: 1.45rem, }} 同样提交并推送该分支git commit -am Change header background color to blue git push -u origin heading-variation到这里仓库里就有了两个「几乎相同、仅页头颜色不同」的分支master紫色与heading-variation蓝色。这正是 Netlify 分支型 Split Test 所需的最小变体集合。第三步部署站点并启动 Netlify Split Test两个变体就绪后先把站点部署到 Netlify。完整的部署流程可参考仓库中的 Deploying to Netlify 指南把 GitHub/GitLab/Bitbucket 仓库链接到 Netlify 项目后Netlify 会自动识别 Gatsby 框架、安装 Essential Gatsby build 插件并给出推荐构建配置同时持续部署仓库的各个分支。部署完成后在 Netlify 上配置 Split Test进入项目首页Overview向下滚动到Active Split Test区域点击Start a Split Test在下一页选择要参与实验的分支本例为master与heading-variation设置流量分配比例后启动测试。Split Test 启动后访问者会被按比例路由到不同分支对应的部署版本同时 Netlify 会在响应中标记当前分支信息供后续埋点脚本使用。第四步在 Google Analytics 中创建自定义维度自定义维度Custom Dimension用于采集和衡量用户行为中标准维度未覆盖的信息——在这里我们要记录「用户看到的是哪个分支的版本」。打开 analytics.google.com 并登录未注册则先注册账号进入左下角导航栏的Admin管理管理页有三列Account账号、Property媒体资源、View数据视图在Property列下选择Custom Dimension自定义维度在子菜单中再次选择Custom Dimension点击 New Custom Dimension新建自定义维度创建一条新维度。创建完成后GA 会为该维度分配一个索引号index。例如第一个自定义维度是dimension1第二个是dimension2。这个索引号在下文的脚本注入中至关重要。第五步通过 Netlify Post Processing 注入 GA 脚本自定义维度创建好之后把 Google Analytics 脚本注入站点。这一步在 Netlify 的Post Processing后处理中完成无需修改仓库代码进入站点的Site Settings站点设置选择Build Deploy构建与部署向下滚动到Post Processing把 Google Analytics Admin 中提供的 GA 脚本粘贴到 Post Processing 的注入区域。Netlify 的 Post Processing 会在 HTML 输出阶段把脚本注入到每个响应页面中因此所有访问者无论落到哪个分支都会加载该脚本。这比在源码中手动埋点更适用于多分支变体场景——脚本只需维护一份。关键在脚本中加入自定义维度与 {{ BRANCH }} 变量粘贴脚本时务必把自定义维度设置为当前分支名。Netlify 提供{{ BRANCH }}模板变量在 Post Processing 注入时会被替换为实际部署的分支名ga(send, pageview, { dimension2: {{ BRANCH }}, }){{ BRANCH }}就是参与 Split Test 的两个分支名。在本例中它会被替换为master或heading-variation。注意变量名是dimension2而不是Gatsby自定义维度的引用必须使用它在 GA 中的索引号如dimension2而不是维度名称本身。比如你在 GA 中创建了多条自定义维度其中第二条想用来标记分支那么上报时就写dimension2。最终注入到 Post Processing 的完整脚本应该类似如下把UA-XXXXXXXXX-X换成你自己的跟踪 IDscript (function(i,s,o,g,r,a,m){i[GoogleAnalyticsObject]r;i[r]i[r]||function(){ (i[r].qi[r].q||[]).push(arguments)},i[r].l1*new Date();as.createElement(o), ms.getElementsByTagName(o)[0];a.async1;a.srcg;m.parentNode.insertBefore(a,m) })(window,document,script,https://www.google-analytics.com/analytics.js,ga); ga(create, UA-XXXXXXXXX-X, auto); ga(send, pageview, { dimension2: {{ BRANCH }} }); /script这份脚本本身就是一个标准的analytics.js异步加载器与 Gatsby 官方插件gatsby-plugin-google-analytics在 gatsby-ssr.js 中生成的加载器结构一致——都是创建ga函数、ga(create, ...)创建跟踪器、再ga(send, pageview, ...)发送页面浏览。区别在于Post Processing 注入发生在 Netlify 构建产物上而插件方案是在 Gatsby SSR 阶段直接生成到 HTML 中。第六步在 Google Analytics 中查看实验结果GA 需要一段时间才能完成数据记录建议等待约半天后再查看。登录 Google Analytics进入左侧导航栏的Behavior行为选择Site Content网站内容下的All Pages所有页面在「所有页面」图表下方的左侧找到Secondary dimension次要维度按钮点击后选择Custom Dimensions自定义维度再选择你之前创建的那条维度。此时表格中就会出现你在 Netlify 上创建的各分支名称。在本例中master与heading-variation两个分支会作为独立行展示你可以据此对比两个版本的浏览量、停留时长、跳出率等指标验证「蓝色页头是否真的提升参与度」。源码级补充Gatsby 官方 GA 插件与自定义维度的其他玩法上面是「零代码」的 Post Processing 方案。如果你希望把埋点能力内聚到 Gatsby 项目中仓库还提供了官方插件gatsby-plugin-google-analytics其实现位于 packages/gatsby-plugin-google-analytics/src可作为理解 GA 集成的参考。插件在 SSR 阶段如何生成脚本在 gatsby-ssr.js 的onRenderBody中仅当process.env.NODE_ENV production且配置了trackingId时才注入脚本因此gatsby develop开发模式下不会上报数据默认向head注入preconnect与dns-prefetch到https://www.google-analytics.com优化首屏加载通过head选项决定脚本放在headtrue还是bodyfalse通过defer选项控制a.defer1还是a.async1anonymize开启时会追加ga(set, anonymizeIp, true)满足德国等地区对 IP 匿名化的合规要求respectDNT开启时脚本会用navigator.doNotTrack等信号判断尊重用户的「请勿跟踪」偏好直接不加载 GAexclude选项会用minimatch把路径模式编译为正则注入window.excludeGAPaths在客户端路由更新时跳过这些路径的 pageview还支持optimizeIdGoogle Optimize 容器、experimentId/variationId服务端实验等这些配置最终都会转成对应的ga(require, ...)/ga(set, ...)命令。这套配置体系意味着如果你需要做更复杂的实验比如用 Google Optimize 做服务端实验而不是靠 Netlify 分支分流插件已经预留了完整的钩子。插件的完整配置项与使用方式见 packages/gatsby-plugin-google-analytics/README.md。插件的局限与本方案的取舍需要注意插件文档明确标注了弃用提示它基于 Google 的analytics.jsGoogle 官方推荐升级到gtag.js仓库因此同时提供了gatsby-plugin-google-gtag插件。如果你在全新项目中集成 GA建议优先评估 gtag 方案而本文的 Post Processing 注入方式与分支 Split Test 天然解耦——脚本在 Netlify 层维护Gatsby 源码里完全不感知 A/B 测试的存在这也是「多分支部署 服务端注入」组合的实用之处。其他资源ab-testing-with-google-analytics-and-netlify.md本文对应的原始文档deploying-to-netlify.mdGatsby 部署到 Netlify 的完整指南含 SSR/DSG/Image CDN 在 Netlify 上的限制说明starters/default/src/components/header.js默认 Starter 的页头组件源码packages/gatsby-plugin-google-analytics/src/gatsby-ssr.js 与 packages/gatsby-plugin-google-analytics/README.md官方 GA 插件的实现与配置参考【免费下载链接】gatsbyReact-based framework with performance, scalability, and security built in.项目地址: https://gitcode.com/gh_mirrors/ga/gatsby创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考