在本地主机上运行时 Google Optimize 不会触发

2024-03-25

我正在尝试通过以下方式在 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 响应中看到的实验数据。


所以我终于弄清楚是什么导致了我的挣扎:我是从本地 NodeJS 服务器运行的,通常是这样的http://localhost:3000网址。事实证明谷歌优化会never触发实验http://localhost/...网址。该代码想要一个hostname可以根据 a 解析的 url 的一部分host.domain方案。

换句话说,有must是主机名中的一个点,以便 Optimize 触发实验。

对于本地测试,可以通过创建主机名别名来修复此问题,例如localhost.domain for 127.0.0.1,并使用此别名访问网页。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在本地主机上运行时 Google Optimize 不会触发 的相关文章

随机推荐