Google 优化运行在本地主机上时不触发

Question

我正在尝试通过关注 these instructions 在 JavaScript 中获取 Google 优化实验数据。但是我没有得到回调，也看不到调试器中发生的任何事情。

链接的说明使用了配置GA的gtag方式，所以我根据https://developers.google.com/gtagjs/devguide/snippet, and configured Optimize according to https://support.google.com/optimize/answer/7513085?hl=en和设置了gtag方法1：使用全局站点标签安装优化（gtag.js).

我想展示我正在使用的确切代码，但由于我是在 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 优化控制台中执行“运行 DIAGNOSTICS”时，它会打开页面，检查JavaScript 和报告：

Optimize is correctly installed

No major issues were detected while verifying the Optimize installation on this page.

我也安装了 Google Chrome Tag Assistant 插件，它报告 Google 优化标签已正确安装。

我可以在网络日志中看到以下调用：

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() 方法。如果我（在调试器网络面板中）查看 https://www.google-analytics.com/gtm/js?... 请求的 http 响应，我实际上可以看到 Google 使用代码中嵌入的正确实验优化实验数据。

所以一切看起来都很好，除了 optimize.callback 事件似乎是一个完全没有操作的事实。它根本不做任何事情。而且我不知道还有什么方法可以访问我在调试器的 http 响应中看到的实验数据。

Answer 1

所以我终于弄清楚是什么导致了我的挣扎：我是运行来自本地 NodeJS 服务器，在通常的 http://localhost:3000 url 上。原来 Google 优化将 永远不会 在 http://localhost/... url 上触发实验。该代码需要 url 的 hostname 部分，可以根据 host.domain 方案进行解析。

换句话说，必须主机名中有一个点，Optimize 才能触发实验。

对于本地测试，可以通过为 127.0.0.1 创建主机名别名（例如 localhost.domain）并使用此别名访问网页来解决此问题。

Google 优化运行在本地主机上时不触发

Google Optimize not triggering when running on localhost

google-analytics

next.js

google-optimize

Optimize is correctly installed

Google 优化 运行 在本地主机上时不触发

Google Optimize not triggering when running on localhost

google-analytics

next.js

google-optimize

Optimize is correctly installed

Google 优化运行在本地主机上时不触发