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

Question

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

我似乎在文档中找不到任何关于此的信息。可能吗？

Answer 1

编辑：没关系我在下面的基于 cookie 的答案，我找到了更好的解决方案。

只需这样做：

var propertyId = "UA-1234567-33";
var experimentId = Object.keys(gaData[propertyId].experiments)[0];
var variationId = gaData[propertyId].experiments[experimentId];

老答案：

（不要这样做..保留在这里以供参考）

Maximes 的回答是有效的，但并不是我想要的。我希望能够在不通过可视化编辑器添加代码的情况下找到experimentId 和variationId。我终于找到了办法。

这些值实际上存储在_gaexp cookie 中。运行实验时存在 cookie。您可以在 Chrome 中通过打开Developer tools来检查它，转到Application 选项卡并单击左侧窗格中的Cookies。它看起来像这样：

GAX1.2.S1SJOWxJTVO9tM2QKV3NcP.17723.1

实验 id 是第二个数字之后的部分：

S0SJOWxJTVO1tM2QKD2NcQ

变体 id 是最后一个数字：

1

我写了这段代码来从cookie中提取它：

function getCookieValue(cookieName) {
    var result = document.cookie.match('(^|;)\\s*' + cookieName + '\\s*=\\s*([^;]+)');
    return result ? result.pop() : '';
}

function getExperimentId() {
    var cookie = getCookieValue('_gaexp');
    if (cookie == undefined) {
        return undefined;
    } else {
        var fields = cookie.split('.');
        return fields[2];
    }
}

function getVariationId() {
    var cookie = getCookieValue('_gaexp');
    if (cookie == undefined) {
        return undefined;
    } else {
        var fields = cookie.split('.');
        return fields[4];
    }
}

var experimentId = getExperimentId();
var variationId = getVariationId();

警告：从 cookie 中获取实验 ID 和变量 ID 不是一个好主意。有两个原因。

1. 实验完成后，cookie 仍然存在。cookie 是缓存的，所以你会发现一个experimentId 和variationId 不适用，你无法知道实验是否在运行。
2. 如果您停止实验 A，并启动实验 B，A 的旧值仍将是 cookie 的一部分。所以它看起来像这样：

GAX1.2.S1SJOWxJTVO9tM2QKV3NcP.17723.1!vr1mB2L2RX6kSI1ZnUDTzT.18721.0

这与您立即进行实验时的外观相同。很难推断要使用什么实验 ID。

Answer 2

现在还有可用的 Google Optimize javascript API，这是一个更好的选择：

在创建实验后（开始之前），现在可以在优化 UI 中使用实验 ID。

该 API 已在页面中可用，您可以像这样使用它：

google_optimize.get('<experimentId>');

（注意：这仅在加载优化容器脚本后才有效）

您还可以使用以下方法注册回调以随时（甚至在加载优化脚本之前）运行所需的 javascript：

function gtag() {dataLayer.push(arguments)}

function implementExperimentA(value) {
  if (value ==  '0') {
    // Provide code for visitors in the original.
  } else if (value == '1') {
    // Provide code for visitors in first variant.
  }

gtag('event', 'optimize.callback', {
    name: '<experiment_id_A>',
    callback: implementExperimentA
 });

如果您想同时找到实验 ID 和变体，您可以为任何实验注册回调：

function implementManyExperiments(value, name) {
  if (name == '<experiment_id_A>') {
    // Provide implementation for experiment A
    if (value ==  '0') {
      // Provide code for visitors in the original.
    } else if (value == '1') {
      // Provide code for visitors in first variant.
    ...
  } else if (name == '<experiment_id_B>') {
    // Provide implementation for experiment B
    ...
}

gtag('event', 'optimize.callback', {
    callback: implementManyExperiments
 });

更多细节

https://support.google.com/optimize/answer/9059383

Answer 3

Google Optimize 允许您在每个 DOM 元素的基础上运行任意 JS。

此功能旨在修改 DOM 元素，但没有什么能阻止您使用它来调用 JS 函数或定义一些变量。

如何设置脚本

1. 在可视化编辑器中编辑您的实验变体。
2. 单击选择元素图标（左上角的矩形）
3. 在元素选择器字段中，输入body。
4. 单击添加更改按钮并选择Javascript。这将弹出一个对话框，允许您输入将为主体调用的 JS 函数。
5. 把你想在那里运行的代码放进去。

运行什么代码

假设您doSomething()在页面上定义了一个方法，您的 Google Optimized 函数可以如下所示：

doSomething("Experiment #1", "Variant A");

或者，您可以尝试全局定义变量。

// We need to use `windows` here, because if we define a variable 
// with `var`, it will be limited to the scope of the Google Optimize
// function.
window["google_optimize_exp_id"] = "Experiment #1";
window["google_optimize_exp_var_id"] = "Variant A";

如果您使用第二种方法，请记住您需要等到 Google Optimized 功能运行后才能运行您自己的逻辑。

Answer 4

我发现可以通过以下代码获得变体编号：

gaData["UA-XXXXXXXX-X"].experiments['ZYkOuNLKEoeLytt-dLWw3x']

结果应该是原始的“0”，第一个变体的“1”......

您可以通过以下方式进行实验：

gaData["UA-XXXXXXXX-X"].experiments

当然，您必须将 UA-XXXXXXXX-X 替换为 Google Analytics ID，并将 ZYkOuNLKEoeLytt-dLWw3x 替换为您的实验 ID。

Answer 5

有 3 种方法可以做到这一点：

1) 根据您的 Google Analytics 设置，您可以通过 Chrome 控制台访问以下对象并传入您的 GA 属性 ID：

Object.keys(window.gaData["YOUR-GA-PROPERTY ID"].experiments).forEach(function(key, index){

var value = window.gaData["YOUR-GA-PROPERTY ID"].experiments[key];
console.log("Info", key, value, index);

 });

2）正如有人已经指出的那样，您可以访问_gaexp存储您的实验 ID 和变体编号的 cookie。

    //READ THE COOKIE
    function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');

    for(var i=0;i < ca.length;i++) {
       var c = ca[i];
       while (c.charAt(0)==' ') c = c.substring(1,c.length);
       if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
   }
   return null;
   };

   // GET THE COOKIE
   let getCookie = readCookie("_gaexp");
   console.log('getCookie', getCookie);
   // WILL RETURN A STRING IN THIS FORMAT
   // GAX1.2.YOUREXPERIMENTID.18803.0
   // The long number in the middle is your experiment ID
   // The number at the end is your variant number (0)

   // SPLIT THE COOKIE
   let splitCookie = readCookie("_gaexp").split("!");
   // SPLIT THE COOKIE SO YOU CAN ACCESS THE EXPERIMENT ID AND VARIANT NUMBER

3）最后，你可以使用你的dataLayer.
这样做有点笨拙，但在 Optimize 360​​ 中，您可以在每个变体中添加 JavaScript（当您编辑 AB 测试/变体时）。并将您的实验 ID 以及其他信息发送到您的数据层。

例如：

function returnDate() {
  var today = new Date();
  var dd = String(today.getDate()).padStart(2, '0');
  var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
  var yyyy = today.getFullYear();
  
  today = mm + '/' + dd + '/' + yyyy;
  return today;
}

var dateToday = returnDate();

var ABTest = {

      id: 'YOUREXPERIMENTID',
      name: 'Title of your test',
      description:  'Test description',
      date: dateToday, //The launch date of AB Test.
      variant: 1,
      totalVariants: 5
  };

// AND THEN PUSH ALL THAT INFORMATION INTO THE DATALAYER 
dataLayer.Tests.push(ABTest);

然后要访问所有这些信息，您需要做的就是访问该window.dataLayer对象。

现在我如何使用谷歌标签管理器，在dataLayer.Tests. 但是当然你不需要那个，但我只是想组织我的对象:)