Как использовать Google Analytics для AMP-страниц

Ускоренные мобильные страницы (AMP) создаются для статического контента и отличаются от обычных высокой скоростью загрузки. Действия пользователей на AMP-страницах отслеживаются при помощи элемента amp-analytics, у которого есть встроенная поддержка Google Analytics.

Подробнее об анализе действий на AMP-страницах читайте в руководстве по элементу amp-analytics. О том, что такое ускоренные мобильные страницы, читайте в статье What Is AMP? на сайте Accelerated Mobile Pages Project (на английском языке).

О требованиях для настройки и возможностях отслеживания AMP-страниц с помощью Google Analytics читайте в этой статье Справочного центра.

Какие действия пользователей на AMP-страницах можно отслеживать с помощью Google Analytics

amp-analytics – это дополнительный компонент. Его нельзя использовать, пока он не будет явным образом включен в документ в качестве пользовательского элемента. Чтобы функции Google Analytics работали на AMP-страницах, разместите между тегами <head> перед библиотекой AMP JS следующий скрипт:

<script async custom-element="amp-analytics"
    src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Добавьте элемент amp-analytics в тело страницы. Чтобы включить встроенную поддержку Google Analytics, задайте для атрибута type элемента amp-analytics значение googleanalytics. Также рекомендуется добавить атрибут id, чтобы распознать, для чего используется тот или иной элемент amp-analytics (например, для отладки или другой операции).

<amp-analytics type="googleanalytics" id="analytics1">
  ...
</amp-analytics>

При настройке Google Analytics в атрибуте триггера request можно использовать следующие значения:

  • pageview для отслеживания страниц;
  • event для отслеживания событий;
  • social для отслеживания активности в социальных сетях.

Отслеживание страниц

С помощью этой функции вы можете узнать число просмотров определенной страницы на вашем сайте.

Для передачи просмотров страниц в атрибуте триггера request нужно установить значение pageview.

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

В атрибуте триггера vars можно установить пары "ключ–значение" для следующих полей просмотров страниц:

Значение Тип Обязательно? Описание
title string Нет Заголовок страницы (например, "главная страница"). Значение по умолчанию – title.
ampdocUrl string Нет URL отслеживаемой страницы. Пример: https://www.ampproject.org/. Значение по умолчанию – ampdocUrl.

В примере ниже стандартные значения title и ampdocUrl заменены пользовательскими:

<amp-analytics type="googleanalytics" id="analytics2">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithAmpdocUrl": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "My page",
        "ampdocUrl": "https://www.examplepetstore.com/pets.html"
      }
    }
  }
}
</script>
</amp-analytics>

Отслеживание событий

Событие – это взаимодействие пользователя с контентом, которое можно отслеживать независимо от просмотров страниц или экранов. О том, что такое событие в Google Analytics, читайте в нашем Справочном центре.

Для отправки событий в атрибуте триггера request нужно установить значение event, а также задать категорию событий и поля действий.

В примере ниже с помощью атрибута триггера selector событие отправляется при нажатии на определенный элемент:

<amp-analytics type="googleanalytics" id="analytics3">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackClickOnHeader" : {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "ui-components",
        "eventAction": "header-click"
      }
    }
  }
}
</script>
</amp-analytics>

В атрибуте триггера vars можно установить пары "ключ–значение" для следующих полей события:

Значение Тип Обязательно? Описание
eventCategory string Да Обычно – объект, с которым произошло взаимодействие (например, "Видео").
eventAction string Да Тип взаимодействия (например, "Воспроизведение").
eventLabel string Нет Поле, в котором можно указывать категорию события (например, "Осенняя кампания").
eventValue string Нет Численное значение, связанное с событием (например, 42). Значение по умолчанию – 0.

Отслеживание активности в социальных сетях

С помощью этой функции можно узнать, сколько раз пользователи выполняли действия, связанные с социальными сетями, – например, отслеживать число нажатий на ссылку "Отправить твит" в Twitter.

Если вы не знаете о том, что такое активность в социальных сетях в Google Analytics или какое значение присвоить социальным сетям, действие или цель, ознакомьтесь со статьей О социальных плагинах и взаимодействиях в Справочном центре Google Analytics.

Для отправки взаимодействий в атрибуте триггера request необходимо задать значение social, а также указать социальную сеть, действие и цель в одноименных полях.

В следующем примере с помощью атрибута триггера selector событие отправляется при нажатии на определенную кнопку социальной сети.

<amp-analytics type="googleanalytics" id="analytics4">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackClickOnTwitterLink" : {
      "on": "click",
      "selector": "#tweet-link",
      "request": "social",
      "vars": {
          "socialNetwork": "twitter",
          "socialAction": "tweet",
          "socialTarget": "https://www.examplepetstore.com"
      }
    }
  }
}
</script>
</amp-analytics>

В атрибуте триггера vars можно установить пары "ключ–значение" для следующих полей события:

Значение Тип Обязательно? Описание
socialNetwork string Да Сеть, в которой произошло взаимодействие. Примеры: Facebook, Twitter.
socialAction string Да Тип взаимодействия. Примеры: "Нравится", "Отправить", "Отправить твит".
socialTarget string Да Цель взаимодействия в социальных сетях. Значением обычно является URL, но может быть любой текст. Пример: http://mycoolpage.com.

Расширение функции googleanalytics

Поскольку конечной точкой для запросов в конфигурации googleanalytics является Measurement Protocol, можно настроить отправку дополнительных параметров Measurement Protocol с обращениями. Например, это помогает при отправке значений для пользовательских параметров и показателей, отправка которых ожидается вместе с обращениями.

Например, пользовательский параметр (или любой другой, который вы хотите добавить в обращение) можно отправить с помощью просмотра страниц. Для этого нужно расширить таким параметром атрибут request с этим значением. Внести изменения можно в атрибут requests, с помощью которого указываются URL для передачи данных на платформу Google Analytics.

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "requests": {
    "pageviewWithCd1Cd3": "${pageview}&cd1=${cd1}&cd3=${cd3}"
  },
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageviewWithCustom" : {
      "on": "visible",
      "request": "pageviewWithCd1Cd3",
      "vars": {
        "title": "Classic Cars",
        "cd1": "registeredUser",
        "cd3": "automotive"
      }
    }
  }
}
</script>
</amp-analytics>

Пример кода AMP-страницы

Вот как выглядит код AMP-страницы, на которой настроено отслеживание просмотров и событий с помощью Google Analytics.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMP Analytics</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>

    <script async custom-element="amp-analytics"
        src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>

  <amp-analytics type="googleanalytics" id="analytics1">
  <script type="application/json">
  {
    "vars": {
      "account": "UA-XXXXX-Y"
    },
    "triggers": {
      "trackPageview": {
        "on": "visible",
        "request": "pageview"
      },
      "trackEvent": {
        "selector": "#event-test",
        "on": "click",
        "request": "event",
        "vars": {
          "eventCategory": "ui-components",
          "eventAction": "click"
        }
      }
    }
  }
  </script>
  </amp-analytics>

  <h1 id="header">AMP Page</h1>

  <span id="event-test" class="box">
    Click here to generate an event
  </span>

  </body>
</html>

Отладка

Узнать, соответствует ли веб-страница спецификации AMP HTML, поможет инструмент AMP Validator. Чтобы включить его, добавьте в URL страницы компонент #development=1.

Провести отладку конфигурации и устранить неполадки также поможет расширение amp-analytics, которое выводит предупреждения и сообщения об ошибках. Эти сообщения сохраняются в консоли браузера. Чтобы включить расширение, добавьте в URL страницы компонент #log=1.

Пользовательская настройка

Благодаря встроенной поддержке Google Analytics расширение amp-analytics позволяет легко отслеживать действия пользователей на AMP-страницах. Вы также можете создать свою конфигурацию, чтобы отправлять дополнительные поля и типы обращений из Measurement Protocol.

О том, как настроить пользовательскую конфигурацию, читайте здесь: