Использование Google Optimize без визуального редактора? - PullRequest
1 голос
/ 08 апреля 2019

Мы пытаемся создать среду 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 Optimize для этой цели? (Тестирование AB только в коде без редактора)

1 Ответ

0 голосов
/ 08 апреля 2019

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