Как использовать Google Analytics для AMP-страниц

Ускоренные мобильные страницы (AMP) создаются для статического контента и отличаются от обычных высокой скоростью загрузки. Действия пользователей на AMP-страницах отслеживаются при помощи элемента amp-analytics, у которого есть встроенная поддержка Google Analytics.

Подробнее об анализе действий на AMP-страницах читайте в руководстве по элементу amp-analytics. О том, что такое ускоренные мобильные страницы, читайте в статье What Is AMP? на сайте Accelerated Mobile Pages Project (на английском языке).

О требованиях для настройки и возможностях отслеживания AMP-страниц с помощью Google Analytics читайте в этой статье Справочного центра.

Какие действия пользователей на AMP-страницах можно отслеживать с помощью Google Analytics

amp-analytics – это дополнительный компонент. Его нельзя использовать, пока он не будет явным образом включен в документ в качестве пользовательского элемента. Чтобы функции Google Analytics работали на AMP-страницах, разместите между тегами <head> (перед библиотекой AMP JS) следующий скрипт:

<script async custom-element="amp-analytics"
    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Добавьте элемент amp-analytics в тело страницы. Чтобы включить встроенную поддержку Google Analytics, задайте для атрибута type элемента amp-analytics значение googleanalytics. Также рекомендуется добавить атрибут id, чтобы распознать, для чего используется тот или иной элемент amp-analytics (например, для отладки или другой операции).

<amp-analytics type="googleanalytics">
  ...
</amp-analytics>

При настройке Google Analytics в атрибуте триггера request можно использовать следующие значения:

  • pageview для отслеживания страниц;
  • event для отслеживания событий;
  • social для отслеживания активности в социальных сетях.

Отслеживание страниц

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

Для передачи просмотров страниц в атрибуте триггера request нужно установить значение pageview.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

В атрибуте триггера vars можно установить пары "ключ–значение" для следующих полей просмотров страниц:

Значение Тип Обязательно? Описание
title string Нет Заголовок страницы (например, "главная страница"). Значение по умолчанию – title.
documentLocation string Нет URL отслеживаемой страницы (например, https://www.ampproject.org/). По умолчанию sourceUrl.

Следующий пример кода переопределяет значения по умолчанию для title и documentLocation.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustomUrl": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "My page",
        "documentLocation": "https://www.examplepetstore.com/pets.html"
      }
    }
  }
}
</script>
</amp-analytics>

Отслеживание событий

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

Для отправки событий в атрибуте триггера request нужно установить значение event, а также задать категорию событий и поля действий.

В примере ниже с помощью атрибута триггера selector событие отправляется при нажатии на определенный элемент:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackClickOnHeader" : {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      }
    }
  }
}
</script>
</amp-analytics>

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

Значение Тип Обязательно? Описание
eventCategory string Да Обычно – объект, с которым произошло взаимодействие (например, "Видео").
eventAction string Да Тип взаимодействия (например, "Воспроизведение").
eventLabel string Нет Поле, в котором можно указывать категорию события (например, "Осенняя кампания").
eventValue string Нет Численное значение, связанное с событием (например, 42). Значение по умолчанию – 0.

Отслеживание активности в социальных сетях

С помощью этой функции можно узнать, сколько раз пользователи выполняли действия, связанные с социальными сетями, – например, отслеживать число нажатий на ссылку "Отправить твит" в Twitter.

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

Для отправки взаимодействий в атрибуте триггера request необходимо задать значение social, а также указать социальную сеть, действие и цель в одноименных полях.

В следующем примере с помощью атрибута триггера selector событие отправляется при нажатии на определенную кнопку социальной сети.

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackClickOnTwitterLink" : {
      "on": "click",
      "selector": "#tweet-link",
      "request": "social",
      "vars": {
          "socialNetwork": "twitter",
          "socialAction": "tweet",
          "socialTarget": "https://www.examplepetstore.com"
      }
    }
  }
}
</script>
</amp-analytics>

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

Значение Тип Обязательно? Описание
socialNetwork string Да Сеть, в которой произошло взаимодействие. Примеры: Facebook, Twitter.
socialAction string Да Тип взаимодействия. Примеры: "Нравится", "Отправить", "Отправить твит".
socialTarget string Да Цель взаимодействия в социальных сетях. Значением обычно является URL, но может быть любой текст. Пример: http://mycoolpage.com.

Расширение функции googleanalytics

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

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

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "extraUrlParams": {
    "cd3": "AMP"
  },
  "triggers": {
    "trackPageviewWithCustomData": {
      "on": "visible",
      "request": "pageview"
    },
    "trackEvent" : {
      "on": "visible",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      },
      "extraUrlParams": {
        "ni": "1"
      }
    }
  }
}
</script>
</amp-analytics>

Выборка

Элемент AMP-analytics позволяет производить выборку для запросов с AMP-страниц. Чтобы настроить выборку 1% данных для одного или нескольких запросов, отправляемых с такой страницы, можно использовать следующую конфигурацию:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustom" : {
      "on": "visible",
      "request": "pageview",
      "sampleSpec": {
        "sampleOn": "${clientId}",
        "threshold": 1
      }
    }
  }
}
</script>
</amp-analytics>

Вы можете реализовать отслеживание исходящих ссылок на AMP-странице, если пометите эти ссылки и настроите триггер так, чтобы он срабатывал при нажатии на них. Ниже описано, как сделать это.

Добавление триггера для отслеживания кликов по ссылкам

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "outboundLinks": {
        "on": "click",
        "selector": "a",
        "request": "event",
        "vars": {
          "eventCategory": "outbound",
          "eventAction": "click",
          "eventValue": "${outboundLink}"
        }
      }
  }
}
</script>
</amp-analytics>

Пометка ссылок

<a href="http://example.com/page" data-vars-outbound-link="http://example.com/page">Some link</a>

Трафик на страницах AMP и обычных веб-страницах

В силу технических ограничений для AMP используются идентификаторы клиентов, отличные от идентификаторов для обычных веб-ресурсов. Кроме того, AMP-страницы быстрее загружаются, а также им свойственна другая структура трафика. Поэтому для сбора данных AMP-страниц следует настроить отдельный ресурс. Если же вы работаете с одним ресурсом, обозначьте тип страниц параметром ds или иным специальным параметром. Никакого дополнительного кода при этом не потребуется. По умолчанию Google Analytics будет передавать с параметром источника данных значение "AMP", которое вы можете использовать для сегментации, фильтрации или иных аналитических операций, требующих сравнения данных по AMP и обычным страницам в рамках одного представления. Подробнее о настройке специальных параметров читайте здесь.

Пример кода AMP-страницы

Вот как выглядит код AMP-страницы, на которой настроено отслеживание просмотров и событий с помощью Google Analytics.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMP Analytics</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script async custom-element="amp-analytics"
        src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>

  <amp-analytics type="googleanalytics">
  <script type="application/json">
  {
    "vars": {
      "account": "UA-XXXXX-Y"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      },
      "trackEvent": {
        "selector": "#event-test",
        "on": "click",
        "request": "event",
        "vars": {
          "eventCategory": "ui-components",
          "eventAction": "click"
        }
      }
    }
  }
  </script>
  </amp-analytics>

  <h1 id="header">AMP Page</h1>

  <span id="event-test" class="box">
    Click here to generate an event
  </span>

  </body>
</html>

Отладка

Узнать, соответствует ли веб-страница спецификации AMP HTML, поможет инструмент AMP Validator. Чтобы включить его, добавьте в URL страницы компонент #development=1.

Провести отладку конфигурации и устранить неполадки также поможет расширение amp-analytics, которое выводит предупреждения и сообщения об ошибках. Эти сообщения сохраняются в консоли браузера. Чтобы включить расширение, добавьте в URL страницы компонент #log=1.

Пользовательская настройка

Благодаря встроенной поддержке Google Analytics расширение amp-analytics позволяет легко отслеживать действия пользователей на AMP-страницах. Вы также можете создать свою конфигурацию, чтобы отправлять дополнительные поля и типы обращений из Measurement Protocol.

О том, как настроить пользовательскую конфигурацию, читайте здесь: