标签: google-optimize

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

我使用Google Optimize创建了A/B测试.现在我想在Javascript中阅读当前的ExperimentId和variationId.我的目标是根据给定的变体运行不同的javascript.

我似乎无法在文档中找到任何相关信息.可能吗?

javascript google-analytics-api google-optimize

24
推荐指数
3
解决办法
6940
查看次数

React / Next.js 中 Google Optimize 的一般问题

标题可能看起来有点含糊,但这是因为我目前在将 Google Optimize 集成到我们的 React / Next.js 项目中时遇到了多个问题。我将尝试尽可能详细地解释我的问题和行动。但是,如果有不清楚的地方,请告诉我。

问题:

  1. 虽然头顶添加了谷歌优化,但我们总是会遇到页面闪退。这意味着用户首先看到我们的页面,然后什么都没有(异步隐藏功能启动),然后页面再次发生变化。
  2. 我创建了一个实验,可以重新排序导航链接、删除一个导航链接并更改我们的 CTA 文本。出于测试目的,我已将变体设置为 100%。会发生什么(与问题 1 相关),是我们首先看到我们的原始网页,然后是更改,然后又是我们删除了一个导航链接的原始网页。这意味着它添加了变体,但删除了一些更改。
  3. 在动态页面上添加实验时,无法应用更改。当我运行实验时,没有任何变化,当我重新打开可视化编辑器时,它说更改存在问题。即使更改只是简单的文本更改。

我试过的:

  1. 默认情况下在 html 上添加“异步隐藏”类名。这会将网页默认设置为隐藏。如果我使用 Google Optimize 同步,这很好用。但是,如果我将其设置为异步,则需要 1 到 2 秒才能显示页面,这不是很好的性能。
  2. 我按照谷歌在这里提到的确切步骤在谷歌标签管理器中添加了谷歌优化。是的,我确实将异步隐藏函数中的 Google Optimize 容器 ID 更改为 GTM 容器 ID。
  3. 我取消了上面的第 2 部分并像这样手动添加了 Google Optimize。
<Html lang="en" className="async-hide">
<Head>
  {/* 
    Google Optimize Ant-Flicker Snippet
    https://support.google.com/optimize/answer/9692472?ref_topic=6197443
  */}
  <style
    dangerouslySetInnerHTML={{
      __html: `.async-hide { opacity: 0 !important}`,
    }}
  />
  <script
    dangerouslySetInnerHTML={{
      __html: `
      (function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
      h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
      (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
      })(window,document.documentElement,'async-hide','dataLayer',4000,
      {'OPT-OPTIMIZE_ID':true});
    `,
    }}
  /> …
Run Code Online (Sandbox Code Playgroud)

google-tag-manager reactjs next.js google-optimize

17
推荐指数
1
解决办法
3482
查看次数

如何在Google Optimize中的Document Ready上运行Javascript?

如何在Google Optimize广告系列中运行窗口加载或文档准备好的javascript?看起来它允许我选择DOM元素一直到Body,但我需要在文档就绪上运行js.

google-optimize

9
推荐指数
1
解决办法
7400
查看次数

谷歌标签管理器和优化服务器端实验发送变体

我正在使用 Google 标签管理器容器来管理脚本。我正在尝试执行服务器端优化/分析实验。出于性能原因,我需要服务器端。我已经对 GTM/Optimize 容器进行了很好的客户端实验。

这是我的 GTM 代码:

window.dataLayer = window.dataLayer || [];
....    
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXXX');</script>
<!-- End Google Tag Manager -->
Run Code Online (Sandbox Code Playgroud)

我尝试了以下不同的方法来触发要触发的变化。

// These fn get called only once GA exists via setTimeout. They get called correctly.
// I've setup the experimentTrigger via GTM container and it triggers correctly to Analytics.
function setGAExperiment1(_expIdvId){
    // Matches ga('set', 'exp', '$experimentId.$variationId');
    //   https://developers.google.com/optimize/devguides/experiments
    ga('set', 'exp', _expIdvId);
    dataLayer.push({'event': 'experimentTrigger', 'exp': _expIdvId }); // …
Run Code Online (Sandbox Code Playgroud)

javascript google-analytics google-tag-manager google-optimize

8
推荐指数
2
解决办法
5835
查看次数

使用 Google Optimize 和 GTM 进行的多个服务器端实验

我想知道是否可以使用 Google Optimize 和 Google Tag Manager 设置多个服务器端实验。我们关注了/sf/answers/3651048621/,它似乎对从数据层发送的值工作得很好,但考虑到 Analytics 变量名称(expId 和 expVar),感觉我们只能这样做在任何给定时间进行一次实验。

google-analytics google-tag-manager google-optimize

7
推荐指数
1
解决办法
869
查看次数

有没有人成功在SPA React App中实现Google优化?

我是Google Analytics Suite的新手,目前正在尝试将Google Optimize for A / B测试集成到react应用中。

我已经了解到变体更改将显示在所需的网页上,但仅在“预览”模式下显示,并且对如何继续在实时网站上查看变体更改​​感到困惑。

至今:

  • 谷歌优化脚本安装在应用程序中

    <style>.async-hide { opacity: 0 !important} </style> <script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'GTM-XXXXXXX':true});</script>

  • 使用ReactGA设置ga跟踪

  • GTM已设置且正在触发要跟踪的代码
  • 触发Google对自定义激活事件进行优化实验,并使用dataLayer推送新事件

    const initializeReactGa = () => { console.log('called to initialize react ga'); ReactGA.initialize(config.gaTag) ReactGA.ga('require', config.optimizeTag); ReactGA.pageview(window.location.pathname + window.location.search); }

    const googleOptimizeLoader = () => { console.log('called google optimize loader'); if(window.dataLayer) { window.dataLayer.push({'event': 'optimize.activate'}) } }

问题

  • 无法查看实时站点中的变体更改(没有运行预览)

任何帮助表示赞赏。

TIA

纳耶尔

[解决了]

能够确定问题与安装无关。问题是,谷歌优化的cookie管理无法设置过期所需的cookie localhost:3000,而是指向的自定义域localhost,类似于XXXX.local:3000

google-analytics reactjs google-optimize react-ga

6
推荐指数
1
解决办法
1534
查看次数

在 NextJS/ReactJS 上设置 Google Optimize 防闪烁脚本

在一个NextJS/ReactJS项目中,我尝试设置 Google Optimize 进行一些实验。不过,我想避免的是优化在每次实验中更改视觉元素时所产生的闪烁效果。

为此,我使用了谷歌建议的抗闪烁脚本。现在,虽然这在初始加载时有效,实际上“隐藏”整个页面一段时间以便 Optimize 应用更改,但这对我的客户端路由情况不起作用,因为页面的完全重新加载会起作用在这种情况下不会发生。

因此,我“避免”在初始页面加载时闪烁,但我没有设法使其在客户端路由方面工作,因为初始脚本不会再次执行 - 即使它执行了,结果也不会理想。

请注意,隐藏和重新显示页面不是一个选项(例如通过历史更改事件重新启动脚本),因为这会破坏客户端路由提供的连续性。另外,暂时隐藏闪烁的组件并不容易,因为我不确定应该在路由过程的哪一步隐藏它,并且我没有设法使其以有效的方式显示。想法?

预先非常感谢您。

javascript routes reactjs next.js google-optimize

6
推荐指数
1
解决办法
3580
查看次数

使用跟踪代码管理器部署Google Analytics时运行Google Optimize会导致错误

更新:

A/B测试工作正常.
重定向测试正在运行但未报告.


我在Google 使用 Google跟踪代码管理器部署Google Analytics时遵循了Google的文章如何使用优化,但我在Google Optimize上遇到错误:

似乎有些不对劲.您的实验正在运行但未接受访问.

我使用了Analytics调试器,一切似乎都很好,所以我在寻求你的帮助.
这是我的设置:

<meta charset="utf-8">
<script>dataLayer = [...]</script>

//Page hiding snippet
<style>.async-hide {
  opacity: 0 !important
} </style>
<script>(function (a, s, y, n, c, h, i, d, e) {
  s.className += ' ' + y;
  h.start = 1 * new Date;
  h.end = i = function () {
    s.className = s.className.replace(RegExp(' ?' + y), '')
  };
  (a[n] = a[n] || []).hide = h;
  setTimeout(function () {
    i();
    h.end …
Run Code Online (Sandbox Code Playgroud)

google-analytics google-tag-manager universal-analytics google-optimize

5
推荐指数
1
解决办法
1609
查看次数

我可以手动覆盖谷歌优化重定向,并避免外部重定向吗?

我正在使用 Google 优化运行 A/B 重定向测试,在 React、Redux 平台上使用 SPA。

我正在尝试解决的一个问题是 - 重定向到新页面会导致整个页面重新加载,我想避免这种情况,而是更喜欢手动进行,因此它对用户来说是无缝的,而且速度要快得多。

有没有办法做到这一点?

redirect single-page-application reactjs react-redux google-optimize

5
推荐指数
1
解决办法
507
查看次数

如何使用 Google Tag Manager 从服务器设置 Analytics 变量?

我正在使用 Google Optimize 来创建 A/B 测试。我在服务器端模式下使用它,如本指南所示:https : //developers.google.com/optimize/devguides/experiments

该指南展示了一种简单的方法,通过在服务器上呈现设置实验 ID 和变体 ID 的 JS 代码来设置哪个实验与哪个变体一起运行:

  // 2. Create a tracker.
  ga('create', 'UA-XXXXX-Y', 'auto');

<?php
<<<HTML
  // 3. Set the experiment ID and variation ID.
  ga('set', 'exp', '$experimentId.$variationId');
HTML;
?>
  // 4. Send a pageview hit to Google Analytics.
  ga('send', 'pageview');
Run Code Online (Sandbox Code Playgroud)

但是,我正在使用 Google 标签管理器,到目前为止还没有找到任何说明如何使用它从服务器设置变量的指南。ga是一个未定义的变量,所以上面的方法不起作用。

google-analytics google-tag-manager google-optimize

3
推荐指数
1
解决办法
1165
查看次数

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

我正在按照以下说明尝试通过JavaScript获取Google Optimize实验数据。但是我没有回调,也看不到调试器中发生的任何事情。

链接的说明使用了配置Google Analytics(分析)的gtag方式,因此我已根据https://developers.google.com/gtagjs/devguide/snippet设置了gtag ,并根据https://support.google.com/配置了Optimize 使用方法1 优化/ answer / 7513085?hl = zh-CN :使用全局站点标签(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}'); …
Run Code Online (Sandbox Code Playgroud)

google-analytics next.js google-optimize

3
推荐指数
1
解决办法
581
查看次数

将 Google Optimize 容器链接到 Google Analytics 4 属性

我正在尝试设置一个 Google Optimize 容器用于 A/B 测试+其他。我遇到的问题是我肯定需要链接到 Google Analytics 才能衡量结果。当我尝试链接到 Google Analytics(分析)媒体资源时,只会显示我拥有的 Universal Analytics 媒体资源(我实际上并未使用),但不会显示我实际使用的 Google Analytics(分析)4 媒体资源。难道我做错了什么?Google 还没有真正实现这种连接吗?

TL;DR:Google Analytics 4 属性在 Google Optimize 容器中未显示为可链接。

google-analytics google-optimize

3
推荐指数
2
解决办法
6470
查看次数

Gtag.js optmize server_side 实现不起作用

我需要一些关于使用 gtag.js(来自 Google 的新全局标签)优化的服务器端实现的帮助。

使用analytics.js,就像ga('set', 'exp', 'experimentid.0');可以在这里找到手册一样简单

设置 gtag.js 后应该像这样工作: gtag('set', {'exp': 'experimentid.0'});,但 Google Optimize/Analytics 不会获取这些值。我尝试将它放在 config 标签之前和 config 标签中作为附加配置信息。gtag('config', '<target_ID>', {<additional_config_info>});

此外,我还尝试更改 expId 中的 exp(如本页上的示例)但无济于事。

有人有可用的 server_side 优化代码或可以帮助我吗?

server-side google-optimize gtag.js

2
推荐指数
1
解决办法
573
查看次数