Проведение экспериментов с AMP-страницами с помощью Оптимизации

Ускоренные мобильные страницы (AMP) используют специальные компоненты, например <amp-analytics> для измерения активности и <amp-experiment> для проведения экспериментов. Если вы проводите эксперименты с документами AMP с помощью <amp-experiment>, можно использовать Google Оптимизацию, чтобы включить в отчеты данные об эффективности ваших вариантов и выбрать лучший с учетом ваших целей.

В этой статье рассказывается, как использовать Google Оптимизацию вместо <amp-pixel>, чтобы проводить эксперименты со страницами AMP и создавать по ним отчеты. После завершения настройки вы сможете использовать цели Google Аналитики, чтобы передавать данные в байесовскую статистическую модель и разрешать Оптимизации выбирать лучший вариант.

Требования

Эксперимент с AMP-страницами

Чтобы создать эксперимент Оптимизации для оценки эффективности компонента <amp-experiment>, выполните следующие действия:

  1. Проверьте наличие компонентов <amp-experiment> и <amp-analytics> в разделе <HEAD> вашего AMP-документа. Пример:
    <script async custom-element="amp-analytics"
            src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <script async custom-element="amp-experiment"
            src="https://cdn.ampproject.org/v0/amp-experiment-0.1.js"></script>
    
  2. Создайте A/B-тестирование в контейнере Оптимизации. Далее указанное вами название эксперимента будет обозначаться как experimentName.
  3. Создайте варианты в своем компоненте <amp-experiment> и задайте их коэффициенты. Создайте соответствующие варианты в Оптимизации и задайте их коэффициенты.

    Кроме того, для создания вариантов можно использовать графический редактор Оптимизации.

  4. Задайте цели эксперимента в Оптимизации. Цели передают данные в статистическую модель, которая используется для выбора лучших вариантов и определения их эффективности в сравнении с исходными версиями.
  5. Создайте правило таргетинга по URL в Оптимизации для AMP-документов, на которые вы хотите настроить таргетинг. Это правило не используется в Оптимизации, но может использоваться для справки.
  6. Начните эксперимент в Оптимизации. На информационной панели эксперимента в Оптимизации можно найти идентификатор эксперимента Аналитики, состоящий из 23 букв и цифр (например, q0AKJL-XRuCmApEIQelcCg). Далее он будет обозначаться как gaExperimentID.
  7. Вставьте правильные компоненты <amp-experiment> и <amp-analytics> в свой AMP-документ.

    Пример 1: <amp-experiment>

    <amp-experiment>
      <script type="application/json">
        {
          "experimentName": {
            "sticky": true,
            "variants": {
              "0": 33.4,
              "1": 33.3,
              "2": 33.3
            }
          }
        }
      </script>
    </amp-experiment>
    

    Пример 2: <amp-analytics>

    <amp-analytics id='analytics1' type='googleanalytics'>
    <script type='application/json'>
    {
      "vars": {
        "account": "gaPropertyID"
      },
      "requests": {
         "experiment": "${pageview}&xid=${xid}&xvar=${xvar}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "experiment",
           "vars": {
             "xid": "gaExperimentID",
             "xvar": "VARIANT(experimentName)"
           }
        }
      }
    }
    </script>
    </amp-analytics>
    

    Замените gaPropertyID, gaExperimentID и experimentName значениями, полученными на предыдущих этапах.

  8. Чтобы убедиться, что AMP-страницы получают экспериментальный трафик, проверьте информацию об активных пользователях на странице контейнера Оптимизации или странице с подробной информацией об эксперименте.

Пример: использование редактора CSS-кода Оптимизации

С помощью редактора CSS-кода Оптимизации можно менять стиль варианта страницы, добавляя соответствующий AMP-префикс к каждому правилу CSS. Например, к следующему коду для "variant 1":

.selector {
  property: value
}

перед селектором необходимо добавить следующий префикс:

body[amp-x-[experimentName]="1"] .selector {
  property: value
}

Замените experimentName значением, полученным на этапе 2 выше.