Как настроить базовую аналитику для AMP-страниц
Для интеграции сайтов с платформами аналитики обычно используются встраиваемые фрагменты кода JavaScript и вызовы функций, которые отправляют в систему аналитики данные о происходящих событиях. AMP позволяет воспроизвести это поведение при работе с определенными партнерами по аналитике и предоставляет гибкий, основанный на JSON синтаксис конфигурации для его настройки.
amp-analytics. Для контекста: аналитика на традиционных (не-AMP) страницах
Ниже приведен пример традиционной JavaScript-реализации отслеживания с помощью Google Analytics. Мы перепишем его в формате JSON для amp-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',
'//www.google-analytics.com/analytics.js',
'ga'
);
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
Представленный код JavaScript очень прост: он отправляет уведомление для регистрации события pageview.
Шаг 1: включение скрипта amp-analytics
Чтобы воспроизвести эту функциональность в AMP, необходимо сначала включить библиотеку компонента amp-analytics в тег <head> нашего документа:
<script
async
custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
></script>
Шаг 2: добавление кода конфигурации
Затем давайте добавим компонент amp-analytics в конец тега body:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-YYYY-Y"
},
"triggers": {
"default pageview": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "Name of the Article"
}
}
}
}
</script>
</amp-analytics>
Подобно коду JavaScript в первом примере, данный фрагмент кода amp-analytics отправит в Google Analytics уведомление о просмотре страницы.
Чтобы реализовать это, мы установили атрибуту type значение googleanalytics, а затем при помощи JSON создали триггер под названием «default pageview». Триггер будет срабатывать, как только страница становится видимой (благодаря параметру "on": "visible"), и при его срабатывании в Google Analytics будет отправляться запрос pageview с переменными, указанными в vars.
Код JSON, используемый для настройки компонента amp-analytics, имеет очень гибкий формат и позволяет описывать типы отправляемых аналитических данных и условия их отправки. Полное описание формата см. в документации к компоненту amp-analytics.
Шаг 3: добавление других триггеров
Теперь дополним пример выше, добавив другой триггер под названием "click on #header trigger":
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-YYYY-Y"
},
"triggers": {
"default pageview": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "Name of the Article"
}
},
"click on #header trigger": {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "examples",
"eventAction": "clicked-header"
}
}
}
}
</script>
</amp-analytics>
Как вы можете догадаться по названию нового триггера, он будет срабатывать при нажатии на элемент с идентификатором "header" (это поведение задано свойствами "on": "click" и "selector": "#header"). При срабатывании этого триггера мы отправляем провайдеру аналитики запрос event, указав в нем пару необходимых переменных.
Если вы хотите настроить интеграцию со своей собственной платформой отслеживания, вы также можете использовать компонент amp-analytics, указав индивидуальные URL-адреса конечных точек для отправки данных отслеживания. Подробнее см. в документации к компоненту amp-analytics.
“UA-YYYY-Y” — это образец идентификатора аккаунта Google Analytics; если вы будете встраивать программный код, приведенный выше, на свой сайт, необходимо использовать реальный идентификатор отслеживания, присвоенный вашему сайту в Google Analytics.
amp-pixel. amp-pixel — это облегченное по сравнению с amp-analytics решение и подойдет тем, кому нужно просто отслеживать просмотры страниц, так как оно предназначено лишь для решения задач, традиционно выполняемых отслеживающим пикселем. Дополнительные сведения см. в руководстве Аналитика: основы.