在没有可视化编辑器的情况下使用 Google Optimize？答案

【问题标题】：Using Google Optimize without visual editor?在没有可视化编辑器的情况下使用 Google Optimize？
【发布时间】：2019-04-08 13:46:32
【问题描述】：

我们正在尝试为我们的网站创建 A/B 测试框架。我们决定使用谷歌优化工具。但我们不需要他们内置的可视化编辑器，只需要使用他们的实验管理（变量百分比、目标、目标、报告）并在我们的 javascript 代码中进行所有更改（使用 AngularJS 框架编写）。

所以从我目前的研究来看，我已经看到了：

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.
  } else if (value == '2') {
    // Provide code for visitors in section variant.
  }
  ...
}

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

我使用这种方式来获取变体

google_optimize &&  google_optimize.get('<experiment_id_A>');

for example 
var variantId = google_optimize.get('someTest');

if (variantId == '0'){
   // blue button
}
else if (variantId == '1'){
   // red button
}

什么是做我正在寻找的正确方法。我应该为此目的使用谷歌优化吗？（仅在没有编辑器的代码中进行 AB 测试）

【问题讨论】：

标签： javascript ab-testing google-optimize

【解决方案1】：

support article 提供了一个完整的示例，您也从中获取了第一个代码 sn-p，尽管由您来填充不同变体中可能发生的变化，由value 表示。

实际上，没有必要读取变体，因为您尝试在第二个代码中实现它，因为它是在回调函数中提供的，甚至可以读取实验名称。

请查看此完整示例，并随时尝试和增强它。您需要做的就是设置一个 A/B 测试，您可以在其中匹配定位规则（因此预览模式将正常工作），并且您可以跳过编辑器进行此实验。您需要提供您自己的实验中的实验 ID。

<!-- Just some static welcome text -->
<p id="main">This is a test page for Google Optimize JS API</p> 

<!-- Some text, that will change based on the experiment variant -->
<p id="placeholder">Eagerly waiting for an AB-test to start</p>

<!-- Main script  -->
<script>
    //mandatory call based on the support article
    function gtag() {dataLayer.push(arguments)};

    //callback function, containing actual changes
    function implementExperimentA(value, name) {
        var newText = 'Something has gone wrong. No variant found for';    

        //go through variants, and apply change for specific variants, identified by their index
        //note, the same index is present in Google Analyitcs, in the Variant dimension 
        if (value ==  '0') {    
            newText = "Bummer, you've ended up in the control group in";  
        } else if (value == '1') {  
            newText = "You've made it! You are in test group of";  
        }     

        //apply selected text to placeholder paragraph
        var el = document.getElementById('placeholder');  
        el.innerText = newText + ' experiment ' + name;  
    }   

    //mandatory call based on the support article
    //assign your experiment's ID to callback function
    gtag('event', 'optimize.callback', {    
        name: 'EXPERIMENT_ID_FROM_OPTIMIZE',    
        callback: implementExperimentA 
    });
</script>

【讨论】：

【解决方案2】：

使用 Google Optimize 的主要原因是可视化编辑器。如果您想改为编写代码，最好自己运行实验而不向您的网站添加巨大的阻止脚本标记。

将用户分配给一个变体非常容易 - Google 并没有在这方面做任何神奇的事情。这是一个简单的概念验证：

// Simple hash function
function hashFnv32a(str: string): number {
  let hval = 0x811c9dc5;
  const l = str.length;
  for (let i = 0; i < l; i++) {
    hval ^= str.charCodeAt(i);
    hval +=
      (hval << 1) + (hval << 4) + (hval << 7) + (hval << 8) + (hval << 24);
  }
  return hval >>> 0;
}

// Persistent user id stored in localStorage
let id = localStorage.get("anonId")
if(!id) {
  id = Math.random()
  localStorage.set("anonId", id)
}

// Hash the user id with the experiment name
const n = hashFnv32a(id + "someTest")%1000/1000;

// Show the chosen variation to the user
if(n < 0.34) {
  // Original
}
else if(n < 0.67) {
  // First variant
}
else {
  // Second variant
}

我为此创建了一个开源库，如果您想查看它，它添加了一些不错的定位功能，可以更好地投入生产 - https://github.com/growthbook/growthbook-js

【讨论】：