google-analytics - 在本地主机上运行时,Google Optimize不触发

标签 google-analytics next.js google-optimize

我想通过遵循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:使用全局站点标签(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控制台中执行“RUN DIAGNOSTICS”时打开该页面,检查JavaScript并报告:

Optimize is correctly installed

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


我还安装了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()方法。如果在Debugt网络面板中查看https://www.google-analytics.com/gtm/js?...请求的http响应,我实际上可以看到Google Optimize实验数据,其中嵌入了正确的Experiment。
因此,除了optimize.callback事件似乎是一个完全的无操作事件之外,其他一切看起来都不错。它根本不做任何事情。而且我不知道如何访问调试器中http响应中看到的实验数据。

最佳答案

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

换句话说,必须在主机名中的处是一个点,Optimize才能触发实验。

对于本地测试,可以通过创建主机名别名(例如localhost.domain127.0.0.1)并使用该别名访问网页来解决此问题。

关于google-analytics - 在本地主机上运行时,Google Optimize不触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56591733/

相关文章:

javascript - 为什么 Google 优化 javascript 不在页面刷新时执行?

iframe - 谷歌分析 : Tracking certain clicks coming from an Iframe Widget

ios - ld : file not found:/Pods/GoogleUtilities/Libraries/libGTM_NSData+zlib. 修复问题

google-chrome - 如何在 Chrome 扩展中进行 A/B 测试

google-analytics - 分析 API/查询资源管理器和界面之间的巨大差异

reactjs - 使用 NextJS 和 next-routes,如何处理来自 server.js 和客户端的 404

reactjs - 如何在 Next.js 静态站点生成上获取 URL 查询字符串?

javascript - Next.js 中的 getInitialProps 没有从服务器获取数据

javascript - 在没有可视化编辑器的情况下使用 Google Optimize?

javascript - 是否可以使用 Google Optimize 读取 Javascript 中的 ExperimentId 和 VariationId?