没有可视化编辑器使用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>