Эксперименты

Это руководство посвящено экспериментам со страницами в analytics.js.

Обзор

С помощью экспериментов со страницами вы можете тестировать практически любые изменения в ресурсе, чтобы понять, способствуют ли они достижению вашей цели (например, увеличению числа конверсий или снижению показателя отказов). Это позволит вам понять, какие именно изменения следует внести, чтобы повысить эффективность своего сайта.

Этот документ предназначен для пользователей, которым нужны расширенные настройки, а также для разработчиков, которые хотят интегрировать эксперименты Google Analytics в свою службу, как это описано в Справке по экспериментам.

Стандартная реализация

Если вы только приступаете к экспериментам со страницами, попробуйте стандартную реализацию. Основная настройка проводится в веб-интерфейсе Google Analytics, где вы также получите код JavaScript, который будет работать с библиотекой analytics.js.

В этом случае для показа выбранного варианта страницы используются переадресации на стороне клиента. Чтобы больше узнать об экспериментах и их реализации на сайте, изучите следующие статьи Справочного центра Google Analytics:

Реализация только в браузере

Если вариант страницы выбирается на стороне клиента в браузере, с помощью Content Experiments JavaScript API можно выполнять основную часть работы по выбору показываемого варианта и сохранению экспериментальных значений.

Этот тип реализации часто используется, когда для тестирования изменений вы меняете DOM/CSS страницы с помощью JavaScript. Иными словами, выбор вариантов или изменений для показа пользователю осуществляется целиком на стороне клиента в браузере. Например, вы можете тестировать:

  • варианты изображений на странице;
  • разные цвета кнопки;
  • размер шрифта;
  • содержание страницы.

Чтобы выбрать вариант для показа, необходимо выполнить следующую последовательность действий для каждого пользователя, участвующего в эксперименте:

  1. Загрузить клиент Content Experiments JavaScript API, указав с помощью параметра запроса experiment идентификатор того эксперимента, который проводится на странице.
  2. Вызвать метод chooseVariation.
  3. Оценить значение, возращенное методом chooseVariation, и выполнить необходимые действия (например, изменить цвет кнопки или изображение).
  4. Загрузить библиотеку analytics.js и отправить по меньшей мере одно обращение в Google Analytics (просмотр страницы, событие или другой тип).

Пример

Вот простой пример кода, который выбирает вариант и показывает пользователю соответствующее изображение:

<html>
<head>
<!-- 1. Load the Content Experiments JavaScript Client -->
<script src="//www.google-analytics.com/cx/api.js?experiment=YByMKfprRCStcMvK8zh1yw"></script>

<script>
  var image_variations = [
      'original.png',
      'variation1.png',
      'variation2.png'
  ]

  // 2. Choose the Variation for the User
  var variation = cxApi.chooseVariation();

  window.onload = function(){
    // 3. Evaluate the result and update the image
    exp_image = document.getElementById('hero_image');
    exp_image.src = image_variations[variation];
  }
</script>

<!-- 4. Load analytics.js and send a hit to Google Analytics -->
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview');

</script>
</head>
<body>
  <h1>Welcome</h1>
  <img id="hero_image"/>
  <p>Welcome to my experiment!</p>
</body>
</html>

Реализация на стороне сервера

Этот тип реализации позволяет:

  • Проводить эксперименты на сайтах с динамическим контентом.
  • Тестировать изменения, которые не касаются интерфейса пользователя, но влияют на достижение вашей цели (например, результат, который пользователь получает после запроса в базу данных).
  • Интегрировать эксперименты Google Analytics с вашей службой (например, службой управления контентом).
  • Управлять экспериментами, используя собственную платформу оптимизации.

Вариант для показа выбирается на сервере, но отображается в браузере, и из браузера же библиотека analytics.js отправляет данные в Google Analytics. Поэтому, чтобы информация об эксперименте и участвующих в нем пользователях правильно передавалась в Google Analytics, необходима согласованная работа сервера и браузера.

В Google Analytics передаются следующие значения:

  • experimentId – идентификатор эксперимента, в котором принял участие пользователь.
  • experimentVariant – порядковый номер варианта, показанного пользователю.

Для передачи в Google Analytics информации о варианте, показанном пользователю, вы можете использовать метод set.

Чтобы задать значения эксперимента, необходимо выполнить следующую последовательность действий для каждого пользователя, который в нем участвует:

  1. Загрузить библиотеку analytics.js.
  2. Задать experimentId.
  3. Задать для experimentVariant выбранный вариант.
  4. Отправить в Google Analytics хотя бы одно обращение (просмотр страницы, событие или другой тип).

Используйте серверную логику для динамического создания кода JavaScript, задающего идентификатор эксперимента и номер варианта, соответствующие последней странице, которая была показана пользователю. Таким образом, когда вариант страницы отобразится в браузере пользователя, значения эксперимента будут установлены и затем переданы в Google Analytics вместе с обращением от библиотеки analytics.js.

Пример

Как правило, для каждого пользователя вы определяете на сервере, проводится ли с этой страницей эксперимент и какой вариант следует показать. В приведенном ниже примере на PHP идентификатор эксперимента и номер варианта для простоты задаются в начале страницы.

<?php
// The Id of the experiment running on the page
$experimentId = 'YByMKfprRCStcMvK8zh1yw';

// The variation chosen for the user
$chosenVariation= 2;
?>

Итак, идентификатор эксперимента и номер варианта определены. Следующий шаг – включить серверную логику, динамически записывающую данные об эксперименте в строку JavaScript, которая требуется для установки значений эксперимента:

<html>
<head>
<script>
  // 1. Load analytics.js -->
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXX-Y', 'auto');

  // 2. Set the chosen variation for the User (Dynamically in this case) -->
<?php
<<<HTML
  ga('set', 'expId', '$experimentId');     // The id of the experiment the user has been exposed to.
  ga('set', 'expVar', '$chosenVariation'); // The index of the variation shown to the user.
HTML;
?>

  // 3. Send a pageview hit to Google Analytics.
  ga('send', 'pageview');

</script>
</head>
<!-- Begin body -->

После выполнения этого PHP-скрипта на страницу будут выведены значения эксперимента. Когда строка JavaScript отобразится на странице в браузере, все значения этого эксперимента будут заданы и отправлены вместе с обращением (то есть просмотром страницы) от библиотеки analytics.js.

Эксперименты со страницами: справка по JavaScript API

Content Experiments JavaScript API позволяет:

  • Выбрать вариант для показа пользователю. При реализации на стороне сервера вы можете с легкостью выбрать вариант для показа новому пользователю или получить вариант, который он уже видел.
  • Задать для пользователя выбранный вариант. Эта возможность полезна, если вариант выбирается на сервере и вы хотите передавать в Google Analytics информацию о выбранном варианте из клиента.
  • Получить ранее выбранный для пользователя вариант. Вы можете получить вариант, который был выбран для пользователя в прошлый раз.

Загрузка клиента API

Чтобы загрузить клиент Content Experiments JavaScript API, добавьте на экспериментальную страницу следующий фрагмент кода JavaScript:

<script src="//www.google-analytics.com/cx/api.js"></script>

Или же вы можете задать идентификатор эксперимента и загрузить информацию о нем с помощью параметра запроса experiment.

<script src="//www.google-analytics.com/cx/api.js?experiment=YByMKfprRCStcMvK8zh1yw"></script>

Клиент загружается синхронно и создает глобальный объект cxApi, с помощью которого разработчики выбирают варианты, а также задают и получают значения экспериментов.

Константы объекта cxApi

Для определения большинства вариантов используются три константы:

  • cxApi.ORIGINAL_VARIATION – исходный вариант эксперимента.
  • cxApi.NO_CHOSEN_VARIATION – для пользователя не был выбран ни один из вариантов.
  • cxApi.NOT_PARTICIPATING – пользователь не участвует в эксперименте.

Методы объекта cxApi

chooseVariation

Выбирает вариант для пользователя.

Если пользователь уже участвовал в эксперименте, метод chooseVariation вернет номер показанного ему варианта. Но если эксперимент завершился или этот вариант был отключен, метод вернет константу cxApi.ORIGINAL_VARIATION, обозначающую исходный вариант. Если пользователь ещё не участвовал в эксперименте, метод определит, следует ли его включить, исходя из заданной доли участников. Если пользователь включается в эксперимент, метод случайным образом выберет вариант для показа и запишет это значение в файл cookie.

Использование метода chooseVariation упрощает выбор варианта для показа. Вариант будет возвращен, даже если пользователь не входит в число участников эксперимента (в таком случае метод вернет cxApi.ORIGINAL_VARIATION). В отличие от этого метод getChosenVariation информирует о том, какой вариант был выбран для пользователя ранее, даже если не было выбрано ни одного варианта или этот пользователь не участвует в эксперименте.

cxApi.chooseVariation();

Что будет возвращено

  • Целое число – номер выбранного варианта.

Примеры

Выбор варианта для показа пользователю:

variationNumber = cxApi.chooseVariation();

setChosenVariation

Задает вариант, который был выбран для пользователя, участвующего в эксперименте, и записывает это значение в файл cookie.

cxApi.setChosenVariation(chosenVariation, opt_experimentId);

Параметры

  • Целое число chosenVariation – номер варианта, показанного пользователю, или константа cxApi.NOT_PARTICIPATING.
  • Строка opt_experimentId – идентификатор эксперимента, для которого был выбран вариант. Если идентификатор не предоставлен, используется первый эксперимент, который был указан при загрузке клиента.

Примеры

Указание выбранного для пользователя варианта:

cxApi.setChosenVariation(2, ‘YByMKfprRCStcMvK8zh1yw’);

Указание выбранного для пользователя варианта в случае, если при загрузке клиента был задан идентификатор эксперимента:

cxApi.setChosenVariation(2);

getChosenVariation

Если этот метод доступен, он получает ранее выбранный для пользователя вариант.

cxApi.getChosenVariation(opt_experimentId);

Параметры

  • Строка opt_experimentId – идентификатор эксперимента, для которого следует получить вариант. Если идентификатор не предоставлен, используется первый эксперимент, который был указан при загрузке клиента.

Что будет возвращено

  • Целое число – номер выбранного для пользователя варианта. Если будет возвращено cxApi.NO_CHOSEN_VARIATION, значит это новый пользователь и вам нужно будет решить, что с ним делать (например, выбрать вариант для показа). Если будет возвращено cxApi.NOT_PARTICIPATING, значит это вернувшийся пользователь, который ранее не был включен в эксперимент.

Примеры

Получение выбранного для пользователя варианта:

variationNumber = cxApi.getChosenVariation(‘YByMKfprRCStcMvK8zh1yw’);

Получение выбранного для пользователя варианта в случае, если при загрузке клиента был задан идентификатор эксперимента:

variationNumber = cxApi.getChosenVariation();

Файлы cookie эксперимента

В API имеются некоторые дополнительные вызовы, позволяющие настроить параметры сохранения файлов cookie.

setDomainName

Задает имя домена, которое должно использоваться при записи файлов cookie эксперимента. Задайте то же значение, что и для кода отслеживания analytics.js.

cxApi.setDomainName(domainName);

Параметры

  • String domainName – имя домена, которое следует использовать.

setCookiePath

Задает путь cookie, который следует использовать для записи файлов cookie эксперимента. Задайте то же значение, что и для кода отслеживания analytics.js.

cxApi.setCookiePath(cookiePath);

Параметры

  • Строка cookiePath – путь cookie, который следует использовать.

setAllowHash

Задает хеш-код домена, который следует использовать для записи файлов cookie эксперимента. Задайте то же значение, что и для кода отслеживания analytics.js.

cxApi.setAllowHash(allowHash);

Параметры

  • Логическое выражение allowHash – следует ли разрешить хеширование домена.