отправка событий gtag.js

Как отправлять события с gtag.js

С появлением нового тега gtag.js отслеживание событий изменилось, и в этом статье мы рассмотрим как отправлять информацию в Google Analytics с помощью Global Site Tag.

Вкратце можно сказать, что Google сделал новую «систему» отправки событий в GA. На первый взгляд она кажется довольно удобной и практичной, и немного напоминает отслеживание событий в Facebook. В нем тоже есть стандартные и кастомные эвенты, и стандартные и кастомные параметры к этим эвентам, которые можно передавать в зависимости от ситуации. Также можно установить параметры для GA в конфиге gtag.

Отправка событий

Для отправки событий в Google Analytics используйте следующий код:

В этом коде «имя события» может быть:

  • стандартным событием со стандартными параметрами
  • кастомным событием с кастомными параметрами

Пример кода отправки события gtag

Пример отправки события по клику с использованием jQuery:

Параметры событий

Имя параметра Тип Обязательный Описание
event_category string Нет Категория к которому относится событие (например Social)
event_action string Да Действие события (например share). Поле event_name передает значение в event_action.
event_label string Нет Дополниельная информация о событии (например facebook)
value integer Нет Значение связанное с событием (значение не должно быть минусовым)

С новым тегом вы можете выполнить всего одну строчку кода, например:

А вместе с ним отправятся значения по умолчанию. Если вы хотите перезаписать их, то вам необходимо дописать поля event_category и event_label. Все эти события вы легко сможете повесить на событие onclick. Например:

Стандартные значение event category и event label для стандартных событий gtag

Event name event_category event_label
add_payment_info ecommerce  
add_to_cart ecommerce  
add_to_wishlist ecommerce  
begin_checkout ecommerce  
checkout_progress ecommerce  
generate_lead engagement  
login engagement method
purchase ecommerce  
refund ecommerce  
remove_from_cart ecommerce  
search engagement search_term
select_content engagement content_type
set_checkout_option ecommerce  
share engagement method
sign_up engagement method
view_item engagement  
view_item_list engagement  
view_promotion engagement  
view_search_results engagement search_term

Стандартные события gtag,js

Global Site Tag содержит стандартные события дополнительные стандартные параметры, которые вы можете передавать.

Событие Параметры
add_payment_info
add_to_cart value, currency, items
add_to_wishlist value, currency, items
begin_checkout value, currency, items, coupon
checkout_progress value, currency, items, coupon
exception description, fatal
generate_lead value, currency, transaction_id
login method
page_view  
purchase transaction_id, value, currency, tax, shipping, items
refund transaction_id, value, currency, tax, shipping, items
remove_from_cart value, currency, items
screen_view screen_name
search search_term
select_content content_type, items, promotions
set_checkout_option checkout_step, checkout_option
share method, content_type, content_id
sign_up method
timing_complete name, value
view_item items
view_item_list items
view_promotion promotions
view_search_results search_term

Параметры стандартных событий gtag

Event параметр Тип данных Описание Пример
affiliation string Источник-партнер, с которого был заказ 'example.com'
checkout_option string Опция оплаты 'VISA'
checkout_step number Номер шага в корзине 2
content_type string Выбранный тип 'vehicle'
currency string Валюта в формате ISO_4217 'USD'
items array Массив item объектов с товарами  
promotions array Массив promotion объектов  
shipping currency Стоимость доставки '4.95'
method string Метод регистрации 'Facebook'
tax currency Налог '2.45'
transaction_id string Уникальный ID транзакции 'T12345'
value number Значение (или доход) связанный с евентом 22

Массив item

Данный массив содержит объекты — товары. Это нужно для настройки ecommerce

Item параметр Тип данных Описание Пример
id string ID/SKU товара 'P12345'
name string Имя 'Android Warhol T-Shirt'
brand string Бренд 'Google'
category string Категория товара 'Apparel/T-Shirts'
coupon string Купон код для товара 'SUMMER_FUN'
price currency Цена '29.20'
quantity integer Количество 2
variant string Вариант 'Black'
creative_name string Имя креатива 'summer_banner_2'
creative_slot string Номер слота для креатива 'banner_slot_1'
list_name string Имя списка в котором показан товар 'Search Results'
list_position integer Номер позиции в списке 4
origin string The origin of the item (travel) 'LHR'
destination string The destination of the item (travel) 'CDG'
start_date string Start date in ISO 8601 Calendar date format (travel) '20150931'
end_date string End date in ISO 8601 Calendar date format (travel) '20150931'

Кастомные события и параметры

В дополнение к стандартным эвентам вы можете отправлять и кастомные события, с кастомными параметрами, например:

Отправка non-interaction событий

Иногда события должны быть отправлены и никак не повлиять на показатель отказов пользователей, и вообще не считаться как взаимодействие пользователя с сайтом. Сделать это можно прописав дополнительный параметр ‘non_interaction’: true, например:

 

Настраиваем цели на gtag событие

Как известно по событиям отправляемым в Google Analytics мы можем настроить цели. Давайте рассмотрим пример, с таким кодом:

В данном примере у нас:
click — event action (действие)
button — event category (категория)
share — event label (метка)

Соответственно создаем цель в Google Analytics:

В настройках Google Analytics переходим в меню целей, жмем создать новую цель

Выбираем тип event (событие), как на скриншоте, и прописываем наши значения, которые отправляются из gtag скрипта.

6 комментариев к “Как отправлять события с gtag.js”

  1. Шерсть - 2017-10-16 Ответить

    Класс! Спасибо!

  2. Евгений - 2017-11-13 Ответить

    Подскажите как отследить конверсию с помощью gtag?
    Сайт одностраничник, нужно, чтобы клик по кнопке «Отправить» в форме засчитывался как конверсия.
    Сейчас попробовал по данной инструкции настроить. Как событие засчитывается, но как конверсия не засчиталась.
    В Аналитике в настройка установил в категории — event, в действии — zvonok2.
    Код установил в событии onclick. onclick=»gtag(‘event’, ‘zvonok2’);»
    Заранее спасибо за помощь!

    • Ruslan - 2017-11-13 Ответить

      Здравствуйте, Евгений!
      В данном случае вам необходимо ничего не указывать в категории цели в Google Analytics, а указывать только action (действие) — zvonok2.
      Или же прописать другой код по onclick событию, где вы будете указывать и категорию.

      • Евгений - 2017-11-14 Ответить

        Руслан, большое спасибо за помощь! Благодаря вашему совету все получилось сделать.
        От себя небольшая просьба — может вы сможете более подробно расписать в Гугл Аналитике, чтобы правильно работали отправка событий и электронная коммерция. Изучил у вас на сайте эти материалы, однако остались вопросы какие именно поля нужно заполнять в настройках Аналитики.
        Спасибо вас еще раз!

        • Ruslan - 2017-11-14 Ответить

          Пожалуйста 🙂
          В самом Google Analytics нужно включить только отчеты ecommerce, об этом есть в начале инструкции про gtag и ecommerce.
          Дальше нужно только устанавливать код на сайте.

  3. Vise - 2018-06-17 Ответить

    В Joomshoppinge есть кнопка «В корзину». Выглядит она так: <input type="submit" class="btn btn-primary button" value="» onclick=»jQuery(‘#to’).val(‘cart’);» />. Не подскажите как сюда добавить метку?

Оставить отклик

Ваш адрес эл.почты не будет опубликован.