Как добавить отслеживание событий в Google Analytics





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

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

Отслеживание событий позволяет вам измерить действия пользователей на вашем сайте. Этими действиями могут быть нажатия по кнопкам, воспроизведение видео, скачивание файлов, отправка форм и так далее. Допустим, вы добавили видео на страницу товара и хотите узнать насколько оно эффективно в плане конверсии. Отслеживание событий позволяет вам узнать сколько пользователей проиграли ролик. Другой пример это основанные на ajax заполнения форм. Если вы пользуетесь Gravity Forms или другим контактным плагином, то отправка форм не превращается в новый просмотр страницы. Используя отслеживание событий, вы можете увидеть как пользователи взаимодействовали с формой. То же самое касается и скачиваний файлов: вы можете отследить как много пользователей скачали файл, используя отслеживание событий и даже то, какую кнопку на странице нажимали чаще всего. Отслеживание событий отличается от отслеживания ссылок в Google analytics. Все это позволяет вам увидеть, как люди ведут себя на вашем сайте. Это же, в свою очередь, позволяет вам выбрать правильную стратегию для продаж и конверсий, основываясь на предпочтения пользователей.

Приступаем

Перед тем как приступить, вам понадобится настроить и установить Google Analytics на свой сайт.

Важно: В 2023 году Google полностью отключил Universal Analytics и перевел всех пользователей на Google Analytics 4 (GA4). Старый код analytics.js больше не работает.

Если у вас в коде сайта до сих пор стоит что-то вроде:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview');
</script>

Вместо этого теперь на всех сайтах используется Google Analytics 4. Установить код можно напрямую или через Google Tag Manager.

Пример базового кода GA4:

<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>

Создаем свое событие в Google Analytics

Зайдите в свой профиль GA4 и нажмите по ссылке Admin внизу левой панели. Если у вас несколько сайтов, то убедитесь, что вы просматриваете панель управления нужного вам сайта.

В разделе Data display выберите Events. Здесь вы можете создавать собственные события или редактировать существующие.

Нажмите на кнопку Create Event и задайте условия для нового события. Например, если вы хотите отслеживать отправку формы, укажите имя события form_submit и укажите параметры, которые будут использоваться для отслеживания этого действия на сайте.

После того как событие создано и зафиксировано хотя бы один раз, оно появится в разделе Events на вкладке Recent events. Здесь вы сможете отметить его как Key Event (это то, что раньше называлось конверсией). После этого событие будет отображаться на отдельной вкладке Key events. При необходимости можно также пометить событие как NPA (Non-Personalized Ads), чтобы оно не использовалось для персонализации рекламы.

Добавление отслеживания событий onClick

Самый простой и, возможно, быстрый способ добавить отслеживание событий Google Analytics это использование атрибута onClick. Этот способ просто отправляет событие в Google Analytics когда пользователь щелкает по элементу. В этом примере мы будем отслеживать пользователей, которые щелкнули по ссылке скачивания книги. Мы добавим параметр onClick к ссылке скачивания, используя такой формат.

onClick="gtag('event', 'download', {
  content_type: 'ebook',
  content_title: 'Free Ebook'
});"

Вам надо будет заменить тип, название и метку на те, что соответствуют условиям вашего события. В итоге ссылка на скачивание книги будет выглядеть таким образом:

<a onClick="gtag('event', 'download', {
  content_type: 'ebook',
  content_title: 'Free Marketing Ebook'
});" 
href="http://example.com/wp-content/uploads/2025/01/free-ebook.pdf">
  Download Free Ebook
</a>

Когда пользователь будет щелкать по ссылке, будет происходить отправка события в Google Analytics.

Важно: в WordPress некоторые темы, плагины или настройки безопасности могут блокировать inline onClick. Чтобы надежно отслеживать такие клики и избежать проблем с блокировкой inline onClick, можно воспользоваться Google Tag Manager, о котором мы расскажем далее.

Добавляем отслеживание событий с помощью Google Tag Manager

Google Tag Manager это онлайн-инструмент, который позволяет вам добавить различные коды для отслеживания в качестве тегов. Вы можете использовать его, чтобы создавать теги для отслеживания событий у себя в профиле Google Analytics. Основное преимущество использования Google Tag Manager заключается в том, что вам не нужно будет вручную добавлять код себе на сайт и вы можете управлять всеми своими тегами с одного места.

*Если у вас на сайте уже вставлен код отслеживания GA4, его не обязательно удалять, но имейте в виду, что одни и те же события могут дублироваться.

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

Вы попадете в мастер настройки, где вам надо будет выбрать тип события — например, Form Submission.

В настройках триггера можно выбрать, запускать ли его для всех форм или только для некоторых. Если у вас на странице более одной формы и вы хотите отслеживать конкретную, настройте фильтр по ID или классу формы. Для этого в разделе Variables нажмите Configure и включите включите встроенные переменные Form ID и/или Form Classes (а при необходимости и другие переменные форм). В условии триггера используйте , например, Form ID equals contact_form_1 или Form Classes contains newsletter-form, чтобы тег срабатывал только для нужной формы.

Примечание: для форм, которые используют AJAX, стандартный триггер Form Submission часто не срабатывает. В таких случаях для точного отслеживания конкретной формы можно использовать Custom Event. Для обычных форм вы можете выбрать конкретную форму по ID или классу <form>, указав соответствующее условие в триггере. Для Contact Form 7 и других форм, у которых <form> не имеет ID или уникального класса, надёжнее использовать атрибут action формы. В GTM добавьте условие, используя переменную Form Element с проверкой matches CSS selector и укажите значение, например, form[action="/contacts/#wpcf7-f42-p43-o1"].

Узнать ID, класс или action формы можно через инспектор браузера, посмотрев атрибут id, class или action у тега <form> .

После этого создайте новый тег. В менеджере тегов нажмите по Tags и затем по кнопке New.

Выберите Google Analytics: GA4 Event в качестве типа тега.

Если вы уже вставили Google tag на свой сайт напрямую, на этом шаге создавать отдельный Google tag в GTM не нужно. Достаточно создать только GA4 Event для нужного события.

Укажите отслеживающий ID Google Analytics (G-XXXXXXX). Вы можете его получить из профиля Google Analytics (зайдите в Admin → Data collection and modification → Data Streams, выберите ваш веб-поток и скопируйте Measurement ID в верхнем правом углу страницы).

Затем задайте имя и параметры события: укажите Event Name, а параметры события добавляйте по одному через Add parameter, вводя значения, например form_type = contact, form_name = contact_form_1, submitted = true.

Для отправки формы это будет выглядеть так:

Event Name: form_submit

Event Parameters:

• form_type = contact

• form_name = contact_form_1

• submitted = true

*Если в конфигурации тега отображается сообщение “No Google tag found in this container”, это нормально, если вы уже установили Google tag напрямую на сайте. В этом случае GA4 Event tag будет работать без отдельного Configuration tag в GTM.

В следующем шаге выберите триггер, который вы создали ранее.

Наконец, щелкните по кнопке Save, чтобы сохранить тег. В появившемся окне задайте название тега и снова нажмите Save. Тег появится в рабочем пространстве. Чтобы изменения вступили в силу на сайте, нажмите Submit в верхнем правом углу, задайте название версии (по желанию добавьте описание) и подтвердите публикацию.

Вот и все, теперь зайдите на свой сайт и отправьте форму, а потом направьтесь в Reports → Engagement → Events в профиле Analytics, и вы увидите свое событие записанным и отслеженным.

Используя менеджер тегов, вы можете создавать различные типы событий и управлять ими централизованно. Это также убережет вас от правки ваших шаблонов WordPress или ручного добавления кода.

---

Наша специальность — разработка и поддержка сайтов на WordPress. Контакты для бесплатной консультации — [email protected], +371 29394520

---