Используете Google Optimize без визуального редактора?

Мы пытаемся создать структуру A / B-тестирования для нашего сайта. Мы решили использовать инструмент оптимизации Google. но нам не нужен их встроенный визуальный редактор, используйте только их управление экспериментом (процент вариантов, цель, таргетинг, отчетность) и внесите все изменения в наш код 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
}

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


javascript google-optimize ab-testing
person Michael Goldenberg    schedule 08.04.2019    source источник

Ответы (2)


arrow_upward
0
arrow_downward

статья поддержки, из которой вы также взяли первый фрагмент кода , предоставляет полный пример, но оставляет за вами вносить возможные изменения в различных вариантах, представленных 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>
person kgrg    schedule 08.04.2019

arrow_upward
0
arrow_downward

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

person jdorn    schedule 01.07.2021