Аналитика: основы
Это руководство описывает основы применения функций аналитики в рамках платформы AMP.
Что использовать: amp-pixel или amp-analytics?
AMP предлагает два компонента для реализации функций аналитики и измерения показателей: amp-pixel и amp-analytics. Оба компонента отправляют аналитические данные в определенную конечную точку.
Если вам нужна функциональность, сравнимая с простым отслеживающим пикселем, компонент amp-pixel обеспечит базовые возможности отслеживания количества просмотров страницы; данные о просмотрах страницы будут отправляться на заданный URL-адрес. Этот компонент может потребоваться для интеграции с некоторыми поставщиками услуг аналитики, и в этих случаях поставщик сообщает конкретный URL конечной точки для данного компонента.
В большинстве аналитических решений следует использовать amp-analytics. В amp-analytics также есть возможность отслеживать количество просмотров страницы, однако вы также сможете отслеживать взаимодействие пользователей с любыми видами контента страницы, включая переходы по ссылкам и нажатия кнопок. Вы также можете фиксировать, далеко ли пользователь пролистал историю и взаимодействовал ли он с интерактивными элементами.
В рамках интеграции с платформой AMP поставщики предлагают готовые конфигурации amp-analytics, позволяющие вам легко регистрировать данные и передавать их в принадлежащие поставщику инструменты отслеживания. Для получения дополнительной информации обратитесь к документации поставщика из списка Поставщики услуг аналитики.
На своих страницах вы можете использовать как amp-pixel, так и amp-analytics: amp-pixel для простого отслеживания просмотров страницы и amp-analytics для всего остального. Вы также можете добавлять каждый тег по несколько раз. Если вы работаете сразу с несколькими поставщиками услуг аналитики, для каждого решения понадобится свой тег. Помните о том, что более простые AMP-страницы лучше воспринимаются пользователями, поэтому, если вам не нужны дополнительные теги, не используйте их.
Создание простой конфигурации аналитики
В этом разделе дается описание того, как создать простую конфигурацию для amp-pixel и amp-analytics.
Простая конфигурация amp-pixel
Чтобы создать простую конфигурацию amp-pixel, вставьте внутрь тега body своей AMP-страницы подобный код:
<amp-pixel src="https://foo.com/pixel?RANDOM"></amp-pixel>
В этом примере данные о просмотре страницы отправляются на определенный URL-адрес вместе со случайным числом. Переменная RANDOM — одна из множества подстановочных переменных, предусмотренных платформой AMP. Подробнее о подстановке переменных можно узнать по этой ссылке.
Компонент amp-pixel является встроенным, поэтому вам не понадобится вручную подключать его, как расширенные компоненты AMP, в числе которых amp-analytics. Старайтесь размещать тег amp-pixel как можно ближе к началу вашего тега <body>. Пиксель отслеживания срабатывает только тогда, когда тег появляется в видимой области экрана. Если amp-pixel будет расположен в нижней части страницы, он может не сработать.
Простая конфигурация amp-analytics
Чтобы создать простую конфигурацию amp-analytics, сначала следует включить объявление custom-element в <head> AMP-документа (также см. Объявление о включении компонентов):
<script
async
custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
></script>
Следующий пример похож на пример amp-pixel. Каждый раз, когда страница становится видимой, срабатывает событие, внесенное в список триггеров, которое отправляет данные о просмотре страницы на определенный URL вместе со случайным идентификатором:
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://foo.com/pixel?RANDOM"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
В приведенном выше примере мы определили запрос с названием «pageview» и значением https://foo.com/pixel?RANDOM. Как уже упоминалось ранее, RANDOM заменяется случайным числом, поэтому фактически запрос будет выглядеть примерно так: https://foo.com/pixel?0.23479283687235653498734.
Когда страница становится видимой (что указывается использованием в триггере ключевого слова visible), срабатывает событие и выполняется отправка запроса pageview. Атрибут triggers определяет условие отправки запроса pageview. Дополнительную информацию о запросах и триггерах читайте в этой статье.
Стандартная конфигурация AMP-историй
Типичный путь перемещения пользователя по сайту сильно отличается от пути перемещения по историям. На сайте, прежде чем щелкнуть ссылку на следующую страницу, пользователь может прочитать заголовок, прокрутить страницу вниз и ввести данные в форму. Истории занимают всю область просмотра, и пользователи не прокручивают, а пролистывают их с помощью касания.
Многие бы хотели фиксировать просмотр каждого включенного в историю элемента <amp-story-page> как новый просмотр страницы, поскольку контент каждого экрана существенно отличается от предыдущего. Однако в данном контексте страница — это всего лишь один из элементов истории; пользователю обычно нужно просмотреть много страниц, чтобы получить полное представление об истории. Таким образом, вопрос о том, как мы будем считать такие простые вещи, как просмотры страницы, имеет большое значение в рамках реализации наших аналитических функций.
AMP Analytics позволяет легко реализовать описываемое поведение с помощью любого поставщика услуг аналитики. Например, при использовании доступного в Google Analytics глобального тега сайта код будет выглядеть следующим образом:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "YOUR_GOOGLE_ANALYTICS_ID",
"config": {
"YOUR_GOOGLE_ANALYTICS_ID": {
"groups": "default"
}
}
},
"triggers": {
"storyProgress": {
"on": "story-page-visible",
"vars": {
"event_name": "custom",
"event_action": "story_progress",
"event_category": "${title}",
"event_label": "${storyPageId}",
"send_to": ["YOUR_GOOGLE_ANALYTICS_ID"]
}
},
"storyEnd": {
"on": "story-last-page-visible",
"vars": {
"event_name": "custom",
"event_action": "story_complete",
"event_category": "${title}",
"send_to": ["YOUR_GOOGLE_ANALYTICS_ID"]
}
}
}
}
</script>
</amp-analytics>
Данный стандартный код можно использовать в качестве полноценной рабочей конфигурации для AMP-истории.
Если вы хотите выйти за рамки возможностей стандартной конфигурации, прочтите статью Аналитика для ваших AMP-историй, чтобы узнать о более сложных сценариях взаимодействия с Google Analytics.
Подстановка переменных
В компонентах amp-pixel и amp-analytics допускаются все стандартные подстановки переменных в URL (см. Подстановки переменных в AMP HTML). В следующем примере запрос pageview отправляется на URL-адрес вместе с каноническим URL-адресом текущего AMP-документа, его заголовком и значением Client ID:
<amp-pixel
src="https://example.com/analytics?url=${canonicalUrl}&title=${title}&clientId=${clientId(site-user-id)}"
></amp-pixel>
Ввиду простоты тега amp-pixel он может включать только те переменные, которые определены платформой или те, которые среда выполнения AMP может извлечь из AMP-страницы. В приведенном выше примере платформа подставляет значения и для canonicalURL, и для clientId(site-user-id). Тег amp-analytics может включать те же переменные, что и amp-pixel, а также однозначно определенные переменные внутри конфигурации тега.
Для указания переменной страницы или платформы в строке запроса используйте формат ${varName}. Тег amp-analytics заменит данный шаблон на его фактическое значение во время создания аналитического запроса (также см. статью Переменные, поддерживаемые в amp-analytics).
В следующем примере amp-analytics запрос pageview отправляется по URL-адресу с дополнительными данными, получаемыми в результате подстановки переменных, некоторые из которых предоставляются платформой, а другие определены во встроенном виде в конфигурации amp-analytics:
<amp-analytics>
<script type="application/json">
{
"requests": {
"pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(site-user-id)}"
},
"vars": {
"account": "ABC123"
},
"triggers": {
"someEvent": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "My homepage"
}
}
}
}
</script>
</amp-analytics>
В приведенном выше примере переменные account и title определены в конфигурации amp-analytics. Переменные canonicalUrl и clientId не определены в конфигурации, поэтому их значения заменяет платформа.
Идентификация пользователя
Сайты используют файлы cookie для хранения информации о пользователе в браузере. Файлы cookie могут использоваться, чтобы определять, что пользователь уже посещал сайт. В AMP страницы могут загружаться либо с сайта издателя, либо из кеша (например, Google AMP Cache). Сайт издателя и кеш могут иметь разные домены. Из соображений безопасности браузеры часто ограничивают доступ к файлам cookie с другого домена (также см. Отслеживание пользователей из разных источников).
По умолчанию AMP управляет назначением идентификатора клиента независимо от того, осуществляется ли доступ к странице с оригинального сайта издателя или через кеш. Идентификатор клиента, сгенерированный AMP, имеет значение "amp-", за которым следует случайная строка в кодировке base64; идентификатор остается неизменным для пользователя при его повторных визитах.
AMP управляет чтением и записью идентификатора клиента во всех случаях. Особенно стоит отметить процедуру работы с идентификатором в тех случаях, когда страница загружается из кеша или иным образом отображается вне контекста оригинального сайта издателя. В этой ситуации доступ к файлам cookie, установленным сайтом издателя, будет невозможен.
Когда AMP-страница загружается с сайта издателя, используемый AMP фреймворк идентификаторов клиента может получать информацию о резервном cookie, который следует найти и использовать. В этом случае установленный в переменной clientId аргумент cid-scope-cookie-fallback-name интерпретируется как имя cookie. Его формат может быть либо CLIENT_ID(cid-scope-cookie-fallback-name), либо ${clientId(cid-scope-cookie-fallback-name)}.
Например:
<amp-pixel
src="https://foo.com/pixel?cid=CLIENT_ID(site-user-id-cookie-fallback-name)"
></amp-pixel>
Если AMP обнаружит, что этот файл cookie установлен, подстановка идентификатора клиента вернет значение файла cookie. Если AMP определит, что этот файл cookie не установлен, AMP сгенерирует значение в форме amp-, за которым следует случайная строка в кодировке base64.
Узнать больше о подстановке идентификатора клиента, в том числе о том, как добавить дополнительный идентификатор уведомления пользователя, можно в статье Переменные, поддерживаемые в AMP Analytics.
Дальнейшую информацию по функциям аналитики можно получить в статьях Погружение в AMP Analytics и Примеры использования.