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

Question

我们正在尝试为我们的网站创建 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 测试)

Answer 1

support article ，您还从中获取了第一个代码片段，它提供了一个完整的示例，尽管您需要填写不同变体中的可能更改，由 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>