Блог

Мы пытаемся создать платформу A / B тестирования для нашего сайта. Мы решили использовать инструмент Google optimize. но нам не нужен их встроенный визуальный редактор, мы используем только их управление экспериментами (процент вариантов, цель, таргетинг, отчетность) и вносим все изменения в наш код javascript (написанный с помощью AngularJS framework).

Итак, из моих исследований до сих пор я видел это:

 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 amp;amp;  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
}
  

каков правильный способ сделать то, что я ищу.
и должен ли я использовать Google optimize для этой цели? (Тестирование AB только в коде без редактора)

Статья поддержки, из которой вы также взяли первый фрагмент кода, предоставляет полный пример, хотя оставляет за вами возможность внести изменения в различные варианты, представленные value .

На самом деле, нет необходимости читать вариант, поскольку вы пытаетесь достичь этого во втором коде, поскольку это предусмотрено в функции обратного вызова, и даже название эксперимента можно прочитать.

Пожалуйста, посмотрите этот полный пример и не стесняйтесь пробовать и улучшать его. Все, что вам нужно сделать, это настроить A / B-тест, в котором вы можете соответствовать правилам таргетинга (чтобы режим предварительного просмотра работал должным образом), и вы можете пропустить редактор для этого эксперимента. Вам нужно будет указать идентификатор эксперимента из вашего собственного эксперимента.

 <!-- 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>
  

Основная причина использования 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