Реализация gtag.js на AMP-страницах позволяет использовать фреймворк amp-analytics
, чтобы работать с аналитикой на сайтах с технологией AMP. Установив тег gtag.js, вы сможете передавать данные с AMP-страниц в 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>
Затем добавьте на AMP-страницу глобальный тег как компонент JSON, внутри тегов <body>
. Замените <TARGET_ID>
на соответствующий идентификатор конверсии Google Рекламы, идентификатор рекламодателя 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
. В примере ниже идентификатор конверсии Google Рекламы добавляется в существующую конфигурацию Google Аналитики. Замените <AW-CONVERSION_ID>
и <GA_MEASUREMENT_ID>
на ваши собственные значения.
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default" }, "<AW-CONVERSION_ID>": { "groups": "default" } } } } </script> </amp-analytics>
Дополнительную информацию можно найти в документации по amp-analytics
.
Триггеры событий
Чтобы передавать в продукты определенные данные, необходимо настроить триггеры на основе событий, таких как клики. Триггеры для gtag.js в AMP создаются по тем же шаблонам JSON, что и остальные amp-analytics
.
В примере ниже показано, как отправить событие "клик" в Google Аналитику. Значение selector
– это CSS-селектор, позволяющий задать целевой элемент. Значение on
указывает тип события (в данном случае – click
). В разделе vars
укажите тип события в event_name
и при необходимости добавьте дополнительные параметры.
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
Помимо рекомендуемых для gtag.js событий из этого списка вы также можете указать свои собственные.
Связывание доменов
Вы можете связать несколько сайтов в разных доменах и отслеживать их как один домен. Чтобы указать домены для связывания, используйте команду "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 включена по умолчанию. Чтобы отключить ее, добавьте "linker": "false"
в параметры конфигурации:
<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-страницу и отправляет событие button-click
в Google Аналитику при нажатии кнопки. Не забудьте заменить <GA_MEASUREMENT_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": "<GA_MEASUREMENT_ID>",
"config": {
"<GA_MEASUREMENT_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>