AMP (Accelerated Mobile Pages) – платформа, с помощью которой можно создавать веб-страницы для статического контента с ускоренной загрузкой. Действия пользователей на AMP-страницах отслеживаются при помощи элемента <amp-analytics>
, у которого есть встроенная поддержка Google Аналитики.
Как настроить отслеживание просмотров страниц
Чтобы добавить стандартный тег Google Аналитики на свою AMP-страницу, скопируйте фрагмент кода ниже и замените <GA_MEASUREMENT_ID>
на идентификатор нужного ресурса. О том, как найти свой идентификатор Google Аналитики, читайте в этой статье.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
Описание
Элемент <amp-analytics>
– это расширенный компонент AMP, который можно использовать как custom-element
в теге script.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
Блок элементов <amp-analytics>
настроен так, чтобы поддерживать решения Google для отслеживания. Задайте для атрибута type
в <amp-analytics>
значение "gtag", чтобы обеспечить работу gtag.js support, а для атрибута data-credentials
– значение "include", чтобы включить файлы cookie.
<amp-analytics type="gtag" data-credentials="include">
...
</amp-analytics>
AMP не поддерживает JavaScript, за исключением собственных одобренных библиотек. Поэтому конфигурация выполняется с помощью JSON. Свойство gtag_id
с действительным <GA_MEASUREMENT_ID>
добавляется в блок vars
, а затем идет ресурс config со значением <GA_MEASUREMENT_ID>: {}
.
Отслеживание событий
Чтобы отслеживать события на страницах AMP, задайте нужные значения в разделе triggers
. В конфигурации триггера используются следующие свойства:
selector
– CSS-селектор, позволяющий задать целевой элемент;on
– элемент, определяющий тип события;vars
– элемент, определяющий тип события вevent_name
и добавляющий новые параметры при необходимости.
В примере ниже показано, как настроить простое событие Google Аналитики. Создайте триггер с названием "button", который будет активироваться при нажатии элемента с идентификатором "the-button". Этот триггер будет отправлять в Google Аналитику значение event_name
, то есть "login", и значение method
, то есть "Google".
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars": { "gtag_id": "<GA_MEASUREMENT_ID>", "config": { "<GA_MEASUREMENT_ID>": { "groups": "default" } } }, "triggers": { "button": { "selector": "#the-button", "on": "click", "vars": { "event_name": "login", "method": "Google" } } } } </script> </amp-analytics>
События Google Аналитики используются только в этом сервисе и часто применяются при создании отчетов о кампаниях. Значения для них можно задать через блок vars с помощью параметров event_category
, event_label
и value
.
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars": { "gtag_id": "<GA_MEASUREMENT_ID>", "config": { "<GA_MEASUREMENT_ID>": { "groups": "default" } } }, "triggers": { "button": { "selector": "#login", "on": "click", "vars": { "event_name": "login", "method": "Google" } } } } </script> </amp-analytics>
Дополнительную информацию о настройке триггеров вы можете найти в документации о amp-analytics
.
Изменение параметров
Чтобы переопределить параметры Google Аналитики по умолчанию или дополнить код новыми параметрами, добавьте нужные значения в раздел parameter
блока config
. Следующий пример кода переопределяет значения page_title
и page_location
по умолчанию для просмотра страницы и события.
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "page_title": "Beethoven symphonies", "page_location": "https://www.example.com/beethoven.html" } } } } </script> </amp-analytics>
Связывание доменов
Вы можете связать несколько сайтов в разных доменах и отслеживать их как один домен. Выберите домены, которые нужно связать с ресурсом "linker": { "domains": [...] }
.
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "linker": { "domains": ["example.com", "example2.com"] } } } } } </script> </amp-analytics>
Возможность установления связи с вашим каноническим доменом из кеша AMP включена по умолчанию, если на AMP-страницах настроена поддержка Google Аналитики. Чтобы отключить ее, добавьте "linker": "false"
в параметры конфигурации.
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "linker": "false" } } } } </script> </amp-analytics>
Скорость загрузки сайта
Google Аналитика автоматически собирает данные о скорости загрузки, анализируя лишь небольшую часть трафика вашего сайта. Измените частоту выборки, если вы хотите собирать больше данных (или меньше). Чтобы задать частоте выборки значение 100%, добавьте в свою конфигурацию следующий код:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "site_speed_sample_rate": 100 } } } } </script> </amp-analytics>
Чтобы остановить сбор данных о скорости загрузки, используйте следующий код:
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "site_speed_sample_rate": 0 } } } } </script> </amp-analytics>
Трафик на страницах AMP и обычных веб-страницах
Для AMP по умолчанию используются другие идентификаторы клиентов, чем для обычных веб-ресурсов. AMP-страницы загружаются быстрее обычных и им свойственна другая структура трафика. Поэтому показатели для них могут отличаться.
Используя отдельный ресурс для AMP, вы сможете получать более точные данные о трафике на этих страницах. Если вы работаете с одним ресурсом, обозначьте тип страниц параметром ds или иным специальным параметром.
По умолчанию Google Аналитика будет передавать с параметром источника данных значение "AMP", которое вы можете использовать для сегментации, фильтрации или иных операций с данными по AMP и обычным страницам в рамках одного представления.
Отладка конфигурации
Узнать, соответствует ли веб-страница спецификации AMP HTML, поможет инструмент AMP Validator. Чтобы его включить, добавьте в URL страницы компонент #development=1
.
Провести отладку конфигурации и устранить неполадки поможет расширение amp-analytics
, которое выводит предупреждения и сообщения об ошибках. Чтобы включить расширение и просматривать информацию в консоли браузера, добавьте в URL страницы компонент #log=1
.
Полный пример
Это пример целой AMP-страницы с одной кнопкой. Конфигурация будет отправлять в Google Аналитику стандартные данные о просмотре страницы и событиях "button-click".
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<title>AMP gtag demo</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="self.html" />
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- Load AMP -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Load amp-analytics -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<!-- Configure analytics to use gtag -->
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config": {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
<h1>Make it so.</h1>
<div>
<button type="button" id="the-button">Engage!</button>
</div>
</body>
</html>
Ресурсы по теме
- Проект AMP
- Что такое AMP?
- amp-analytics
- Использование gtag.js для AMP
- Справочный центр Google Аналитики: AMP-страницы