Accelerated Mobile Pages (AMP) – это платформа с открытым исходным кодом, позволяющая ускорить загрузку контента. В AMP предусмотрена встроенная поддержка тега Google и Менеджера тегов. В этой статье описан процесс настройки Google Аналитики для AMP-страниц.
Способ реализации
Добавив тег Google в код AMP-страниц, вы сможете передавать данные в Google Аналитику, Google Рекламу и другие сервисы. Если же выполнить реализацию с помощью Менеджера тегов, то на страницах появятся AMP-контейнеры, в которых можно задавать сложные конфигурации и развертывать сторонние теги через интерфейс Менеджера тегов.
Чтобы посмотреть более подробную информацию, нажмите одну из кнопок ниже.
Тег Google
В теге gtag.js для AMP-страниц используется аналитический фреймворк amp-analytics. Установив тег gtag.js, вы сможете передавать данные с AMP-страниц в Google Рекламу, Google Аналитику и другие продукты Google.
Способ реализации
Чтобы настроить тег Google (gtag.js) на AMP-странице, прежде всего убедитесь, что в разделе <head> кода страницы содержится компонент amp-analytics:
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
Затем добавьте в раздел <body> AMP-страницы тег Google как компонент JSON. Замените <TARGET_ID> на свой идентификатор тега, например Google Рекламы или Google Аналитики:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
Чтобы настроить дополнительные сервисы, необязательно добавлять их полные теги – достаточно добавить нужный идентификатор в отдельную команду config.
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TAG_ID>",
"config" : {
"<TAG_ID>": { "groups": "default" },
<!-- Additional IDs -->
}
}
}
</script>
</amp-analytics>
Подробнее читайте в документации по amp-analytics.
Триггеры событий
Чтобы передавать в продукты определенные данные, необходимо настроить триггеры на основе событий, таких как клики. Триггеры для gtag.js в AMP создаются по тем же шаблонам JSON, что и остальные триггеры amp-analytics.
В примере ниже показано, как отправить событие click в Google Аналитику. Значение selector – это селектор CSS, позволяющий указать целевой элемент. Значение on указывает тип события, в данном случае – click. В разделе vars укажите тип события в элементе event_name и при необходимости добавьте дополнительные параметры.
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
Помимо рекомендуемых событий из этого списка, вы также можете указать собственные.
Связывание доменов
Вы можете связать несколько сайтов в разных доменах и отслеживать их как один домен. Чтобы указать домены для связывания, используйте команду "linker": { "domains": [...] }:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": {
"groups": "default",
"linker": { "domains": ["example.com", "example2.com", "foo.example.com"] }
}
}
}
}
</script>
</amp-analytics>
Возможность связывания с каноническим доменом из AMP Cache включена по умолчанию. Чтобы отключить ее, добавьте строку "linker":
"false" в параметры config:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": {
"groups": "default",
"linker": "false"
}
}
}
}
</script>
</amp-analytics>
Полный пример
Ниже приведен полный рабочий пример кода, который создает AMP-страницу, а затем при нажатии кнопки отправляет в Google Аналитику событие button-click. Замените <TAG_ID> на свой идентификатор тега:
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="self.html" />
<title>AMP gtag demo</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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": "<TAG_ID>",
"config": {
"<TAG_ID>": {}
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
<h1>Welcome to the mobile web</h1>
<div>
<button type="button" id="the-button">Example: Log in with Google</button>
</div>
</body>
</html>
Устранение неполадок
Проверить настройки тегов можно на странице amptagtest.appspot.com. Вы также можете сами посмотреть URL во всех доменах и убедиться, что в них используется одинаковое значение cid:
- Удалите все файлы cookie или перейдите в режим инкогнито.
- Если в файле cookie Google Аналитики отсутствует параметр
cid, это будет показано на вкладке "Сеть" в Инструментах разработчика в веб-браузере. Выполните поиск по запросуcollect request. В результатах должно присутствовать значениеcid. Когда вы перейдете из CDN Google на свой сайт, в параметрах URL должны остаться прежние значения
cidиgclid:**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**У финальной целевой страницы должно быть такое же значение
cid, как и у изначальной.Будьте осторожны с переадресацией и сменой домена между канонической страницей и целевыми страницами без AMP.