Question

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

链接的说明使用gtag方式配置GA，因此我已根据https://developers.google.com/gtagjs/devguide/snippet设置了gtag，并使用方法根据https://support.google.com/optimize/answer/7513085?hl=en配置了Optimize方法1：使用全局方法安装Optimize网站代码（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 Optimize控制台中执行“ RUN DIAGNOSTICS”时，它将打开该页面，检查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()方法。如果在调试器网络面板中查看https://www.google-analytics.com/gtm/js?...请求的http响应，我实际上可以看到Google Optimize实验数据，其中嵌入了正确的Experiment。

因此，所有事情看起来都不错，除了optimize.callback事件似乎是一个完全无操作的事实。它根本不做任何事情。而且我不知道该如何访问调试器在http响应中看到的实验数据。

Answer 1

所以我终于弄清楚了导致我挣扎的原因：我是从本地NodeJS服务器运行的，通常使用http://localhost:3000网址。事实证明，Google Optimize不会从不触发对http://localhost/...网址的实验。该代码希望可以根据hostname方案来解析网址的host.domain部分。

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

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

在localhost

优化已正确安装

1 个答案: