我正在尝试通过以下方式在 JavaScript 中获取 Google Optimize 实验数据这些说明 https://support.google.com/optimize/answer/9059383。但我没有得到回调,也看不到调试器中发生的任何事情。
链接的指令使用gtag方式配置GA,所以我根据以下内容设置了gtaghttps://developers.google.com/gtagjs/devguide/snippet https://developers.google.com/gtagjs/devguide/snippet,并根据配置优化https://support.google.com/optimize/answer/7513085?hl=en https://support.google.com/optimize/answer/7513085?hl=en with 方法 1:使用全局网站标记 (gtag.js) 安装 Optimize.
我想展示我正在使用的确切代码,但由于我是在 React 中使用 Next.js 服务器端渲染来实现的,因此与纯 HTML+JS 相比,原始代码有一些额外的内容。来源看起来像这样:
require("dotenv").config()
import React from "react"
import Document, { Head, Main, NextScript } from "next/document"
export default class extends Document {
render() {
return (
<html>
<Head>
<script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GA_TRACKING_ID}`}/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){ dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', '${process.env.GA_TRACKING_ID}', { optimize_id: '${process.env.OPTIMIZE_ID}'});
console.log('GA setup done: ${process.env.GA_TRACKING_ID} + ${process.env.OPTIMIZE_ID}');
gtag('event', 'optimize.callback', {
name: '${process.env.EXPERIMENT_ID}',
callback: o => console.log(o)
});
`
}}
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}
此代码生成一个结果页面,该页面启动 Analytics 并跟踪 pageView,就像它应该的那样,当我在 Google Optimize 控制台中执行“运行诊断”时,它会打开该页面,检查 JavaScript 并报告:
优化已正确安装
在此页面上验证优化安装时未检测到重大问题。
我还安装了 Google Chrome Tag Assistant 插件,它报告 Google Optimize 标签已正确安装。
我可以在网络日志中看到以下调用:
https://www.googletagmanager.com/gtag/js?id=UA-xxxxxx
https://www.google-analytics.com/analytics.js
https://www.google-analytics.com/gtm/js?id=GTM-xxxxxx&t=gtag_UA_xxxx&cid=nnn.nnn
我还验证了google_optimize
全局变量被创建,并且它有一个.get()
方法。如果我(在调试器网络面板中)查看 http 响应https://www.google-analytics.com/gtm/js?...
请求我实际上可以看到 Google Optimize 实验数据,并且代码中嵌入了正确的实验。
所以一切看起来都不错,除了以下事实:optimize.callback
事件似乎完全没有操作。它根本不做任何事情。我不知道如何访问调试器中 http 响应中看到的实验数据。