<script>
document.addEventListener('DOMContentLoaded', function() {
  var menu_anchors = document.querySelectorAll('.menu-items a');
  //Click event listener to each anchor element
   menu_anchors.forEach((anchor) => {
   anchor.addEventListener('click', (event) => {
    gtag('event', 'menu_clicks', {
       'event_category': 'Menu Clicks',
       'event_action': anchor.href,
       'event_label': anchor.textContent
    });
   });
  });
});
</script>

Имя события «menu_clicks» может быть любым, и оно будет иметь три предоставленных вами параметра. Это один из подходов, если у вас нет Диспетчера тегов Google и вы предпочитаете реализацию gtag.

Вы можете использовать пользовательские параметры для передачи дополнительных значений предопределенным событиям, например: зарегистрироваться событие. Согласно документации GA, он поддерживает только один параметр, называемый «метод» (который может быть чем угодно, например, вход в социальную сеть, электронную почту и т. д.).

gtag("event", "sign_up", {
method: "Google"
});

Добавляя специальные параметры, вы также можете передать дополнительную информацию, такую ​​как план подписки (например, «бесплатная пробная версия», «базовый», «премиум»).

Вы можете добавить собственное измерение «sign_up_plan» и передать его вместе с «method».

gtag("event", "sign_up", {
method: "Google",
sign_up_plan: "basic",
});

Чтобы реализовать все это, вам нужны базовые навыки JS-программиста, которым вы можете быстро научиться, используя ChatGPT. Теперь вы можете проверить приглашение:

Код JavaScript, который запускает пользовательское событие gtag с именем «menu_clicks», когда пользователь нажимает на пункт меню с родительским тегом li, имеющим класс «.menu-item». Передайте следующие параметры пользовательского события: для параметра «event_category» должно быть установлено значение «Клик в меню», для параметра «event_action» должно быть установлено значение ссылки на выбранный элемент, а для «event_label» должно быть установлено значение привязки выбранного элемента.

Попробуйте эту подсказку, и вы увидите, как происходит волшебство.

Вы можете скопировать и вставить этот код в редактор кода CMS, и вуаля!

Теперь давайте настроим то же отслеживание событий с помощью тега GTM.

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

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

Как настроить отслеживание событий в диспетчере тегов Google

Создайте в GTM новую переменную JavaScript, которая возвращает имя класса родительского тега нажатой привязки, поскольку в GTM нет встроенного способа получения атрибутов родительского элемента DOM.

Перейдите к Переменные > Пользовательские переменные и нажмите кнопку Новый кнопка в правом верхнем углу. Во всплывающем диалоговом окне выберите Пользовательский Javascript.

Скопируйте и вставьте в него этот код.

function() {
 'use strict';
 try {
       var clickElement = {{Click Element}}; // clickable element DOM object
       var clickParent = clickElement.closest('.menu-item'); //clickable element DOM object parent with class .menu-item
       if (!clickParent) return ''; 
       return clickParent.getAttribute('class'); // if element exist return class attribute
 } catch (err) {
       return '';
 }
}

Этот код возвращает атрибут родительского класса выбранного элемента, если существует родительский элемент с классом «.menu-item», или возвращает пустое значение, если такого родительского элемента нет.

Мы можем использовать это, чтобы гарантировать, что мы обнаруживаем клики только по ссылкам пунктов меню, а не по другим ссылкам в других местах страницы.

Создайте в GTM новый триггер, который срабатывает при всех кликах по элементам с родительским

Перейдите в раздел «Триггеры» и нажмите кнопку Новый кнопку в правом верхнем углу.

Во всплывающем диалоговом окне выберите Нажмите – Просто ссылки.

Выбирать Несколько кликов по ссылкам > Настроить он срабатывает при кликах, когда класс родительского элемента содержит строку «пункт меню».

Перейдите в раздел «Теги» и добавьте тег «Событие GA4».

Скриншот из GA4, апрель 2023 г.

Введите имя события «main_menu_clicks» или любое другое имя события, а также добавьте пользовательские параметры event_category, event_action и event_label.

Скриншот из GA4, апрель 2023 г.

Для действия и метки события выберите Нажмите Текст и Нажмите URL-адрес встроенные переменные.

Скриншот из GA4, апрель 2023 г.

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

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

Как реализовать настраиваемое отслеживание событий с помощью метода dataLayer.push()

Если вы по-прежнему предпочитаете собственное кодирование и у вас есть GTM, вы можете использовать метод datalayer.push().

В этом случае вам нужно будет добавить параметры event_category, event_action и event_label в GTM в качестве переменных dataLayer.

А в разделе вашего сайта вы должны использовать приведенный ниже код.

<script>
//Click event listener to menu items with the '.menu-item' class
document.addEventListener('DOMContentLoaded', function() {
    const menuItems = document.querySelectorAll('.menu-item');
    menuItems.forEach(function(menuItem) {
    menuItem.addEventListener('click', function(event) {
    //Link and anchor text of the clicked link
    let link = menuItem.querySelector('a').href;
    let anchorText = menuItem.querySelector('a').textContent;
    // Trigger the custom event 'menu_clicks' using dataLayer.push()
    dataLayer.push({
      'event': 'menu_clicks',
      'event_category': 'Menu Clicks',
      'event_action': link,
      'event_label': anchorText
    });
  });
 });
});
</script>

Как узнать, работает ли отслеживание событий Google Analytics?

Также важно проверить, видите ли вы журнал событий с такими же параметрами в GA4. отлаживать вид. Может случиться так, что GTM сработает, но из-за неправильной конфигурации он не будет передан в GA4.

Если у вас есть реализация gtag, вам следует включить режим отладки, установив Chrome. расширение или добавив одну строку кода в GA4. конфигурация.

gtag('config', 'G-12345ABCDE', { 'debug_mode':true });

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

Заключение

GA4 — это довольно сложный инструмент, а не готовый к использованию аналитический инструмент, такой как Universal Analytics; вам нужно потратить много времени на его изучение.

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

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

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

Дополнительные ресурсы:

Рекомендованное изображение: Андрей_Попов/Shutterstock