Настройка событий

События позволяют отслеживать взаимодействие пользователей с сайтом или приложением, например загрузку страницы, нажатие ссылки или покупку. На основе данных событий Google Аналитика создает отчеты с полезной информацией о вашей компании. Подробнее…

В этом руководстве рассказывается, как настроить рекомендуемые и специальные события на сайте, используя тег Google (gtag.js) или Google Менеджер тегов. Настраивать автоматически регистрируемые события и события улучшенной статистики не нужно.

Аудитория

Вы настроили Google Аналитику, данные начинают появляться в отчетах, но вы хотите получать не только ту информацию, которую Аналитика собирает автоматически, или же хотите использовать больше функций и возможностей этого сервиса.


Подготовка

Ниже подразумевается, что вы уже выполнили следующие действия:

Кроме того, предполагается, что у вас есть:

  • доступ к исходному коду сайта;
  • роль редактора в аккаунте Google Аналитики.

Настройка событий

С помощью API gtag.js можно передавать события в Google Аналитику. В этом API есть одна функция – gtag(). Чтобы отправить событие в Google Аналитику, используйте следующий синтаксис:

gtag('event', '<event_name>', {
  <event_parameters>
});

В этом примере функция gtag() содержит:

  • команду event, которая сообщает Google о том, что вы отправляете событие;
  • название рекомендуемого или специального события;
  • набор параметров с дополнительной информацией о событии (необязательно).

Пример рекомендуемого события screen_view с двумя параметрами:

gtag('event', 'screen_view', {
  'app_name': 'myAppName',
  'screen_name': 'Home'
});

Как добавить события в код JavaScript

gtag() – это функция JavaScript. Вам необходимо добавить ее в код JavaScript своей веб-страницы. Это можно сделать, например, с помощью тегов <script> или отдельного файла JavaScript, который нужно импортировать на HTML-страницу.

События можно добавлять в код JavaScript где угодно, но они должны быть ниже, чем фрагмент тега Google. В противном случае Google не будет обрабатывать данные о событиях. В примере ниже событие screen_view представлено в теге <script>:

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-XXXXXXXXXX');
    </script>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of the page</title>
</head>
<body>
    <p>Welcome to my website!</p>
    
    <script>
      /**
      * The following event is sent when the page loads. You could
      * wrap the event in a JavaScript function so the event is
      * sent when the user performs some action.
      */
      gtag('event', 'screen_view', {
        'app_name': 'myAppName',
        'screen_name': 'Home'
      });
    </script> 
</body>
</html>

Если вы хотите, чтобы событие отправлялось после нажатия кнопки (или другого действия пользователя), вы можете добавить в событие дополнительный код JavaScript.

Как посмотреть свои события в Аналитике

Данные о событиях и их параметрах можно найти в отчетах В реальном времени и Представление отладки. Учтите, что для просмотра отчета Представление отладки нужно выполнить определенные действия. В этих двух отчетах вы увидите, какие события регистрируются, когда пользователи взаимодействуют с вашим сайтом.

Дальнейшие действия