События и виртуальные страницы в Global Site Tag (2018) ⛳️

Приветствую друзья. На связи Евгений Тридчиков. И в этом видео я расскажу про работу событий и виртуальных страниц с обновленным счетчиком Google Analytics, который получил название Global Site Tag.
Лень читать? Смотрите видео в конце статьи!

Пару слов про Global Site Tag

Как вы уже наверняка знаете, Global Site Tag это новый стандарт, который предлагает гугл, для работы с Google Analytics и не только. Дело в том, что счетчик получил обновленный сниппет.

Что самое интересное, теперь он работает на основе другой библиотеки – то есть ранее Universal Analytics работал на основе библиотеки Analytics точка js, то теперь это gtag.js. И неприятность заключается в том, что поменялся синтаксис.

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

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

Analytics.js vs gtag.js

На экранах у вас строчка, которая передает в Universal Analytics событие с категорией category, и, стало быть, действием по событию «event». То есть «send» и «event», эти два параметра в кавычках, которые вы видите на экране, это команды. Следующие два параметра имеют определенные значения. Так было ранее, когда мы работали с Universal Analytics.

ga('send','event','category_name','event_name');

Если продолжить эту логику, то мы можем задать какие-то явные значения, например: на экранах вы сейчас видите «form» и «submit», то есть «передавать» события с категорией «form» и «submit».

ga('send','event','form','submit');

Это удобно такое событие повесить, например, на отправку формы, потому что ее значение логично. То есть это форма и это «submit» – отправка формы. Благодаря такой настройке, нам будет легко настроить цель в представлении Google Analytics. Об этом я рассказывал ранее, в соответствующем видео, можете посмотреть.

Пушим событие в Global Site Tag

Так вот друзья, теперь, при работе с новой библиотекой, для того, чтобы отправить новое событие в Google Analytics, если стоит Global Site Tag на сайте, нужно использовать именно вот такую конструкцию. Обратите внимание, это самая простая строчка, которая может быть. Далее будет немного сложнее.

gtag('event','event_name');

Что поменялось: вместо ga стал gtag, а в скобках встали два параметра, первый, это «event» – можно сказать, что это тоже команда, которая говорить системе, что сейчас будем работать с событиями; а далее в кавычках идет название отправляемого события, вернее действия по этому событию.

При таком, самом простом раскладе, мы отправляем событие с категорией «general». То есть, по умолчанию, если мы не прописываем категорию события вручную, событие отправляется с категорией «general».

Зная это, и видя это в отчете в режиме реального времени либо с помощью Tag-Assistant, мы можем настроить соответствующие цели в представлении.

Таким образом, если опираться, на пример выше, вот на этот пример, передаем в Universal Analytics, ранее передавали формы submit, то теперь это будет выглядеть вот таким образом: gtag(‘event’, ‘submit’), при этом мы передаем категорию general. Настройка цели будет вот в таком варианте:

gtag('event','submit');

general – категория действия

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

gtag('event','submit',{'event_category':'form'});

form – категория действия

Таким образом, вы вручную задаете значение категории. Строчка, которая у вас сейчас на экране, соответствует строчке, рассмотренной ранее – которая отправляла в Universal Analytics событие с категорией «form» и «submit».

ga('send','event','form','submit');

gtag('event','submit',{'event_category':'form'});

Для наглядности посмотрите – первая строчка это то, как отправляем события в «Universal», а вторая строчка, это конструкция, которая отправляет события с категорией form и действием submit, в Global Site Tag.

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

Демонстрация на сайте

А теперь перейдем в браузер, и я покажу вам как это реализовано на настоящем сайте. Прежде всего, покажу вам простое событие. Оно настроено вот на эту кнопку – «перезвоните мне», вернее на эту ссылку, при нажатии на которую выскакивает модальное окно и в Global Site Tag улетает событие.

Для начала я вам покажу, как это реализовано в коде, чтобы вы убедились: жмем на «исследовать элемент», далее переходим в Network – здесь нужно обновить страницу – идем в command, делаем поиск по странице – вот эта команда. Обратите внимание – вот эта строчка срабатывает, когда мы жмем на кнопку «перезвоните мне».

Пушим событие в Global Site Tag

Как видите, если верить описанию, которое я предложил выше, в Global Site Tag улетит событие с идентификатором «show_callback», то есть действием по событию «show_callback». Здесь категория по умолчанию «general».

Давайте проверим это. Для этого, как вы знаете, я использую Tag Assistant – включаю его, перезагружаю страницу. Обратите внимание, что здесь у меня и Universal Analytics и Global Site Tag. Это такая особенность – если вы ставите на сайт Global Site Tag, то он подтягивает два сниппета.

Далее, я жму «перезвоните мне». Идем в знакомый нам «Universal» и видим событие. И действительно: категория «general», которая передается по умолчанию, и действие по событию «show_callback».

Теперь переместимся в карточку товара, потому что именно здесь, на кнопку «в корзину», настроено событие, которое уже на этот раз передает в явном виде категорию. Здесь мы жмем «просмотреть код страницы».

Пушим событие с пользовательской категорией действия в Global Site Tag

Обратите внимание, вот эта строчка. При клике на кнопку «в корзину» в Analytics передается событие с действием «addtocart» и категорией «form». На этот раз категория задана явным образом, а не «general», как было по умолчанию.

Таким образом, убедимся, что здесь у нас событий нет, пусто. Жмем «в корзину» и проверяем: видите, появилось событие – «form», действие – «addtocart».

А если это кажется сложным?

Далее. Возможны варианты развития событий. Если вам показалось, что обновленный код Global Site Tag выглядит сложно и не хочется в этом разбираться, вы можете оставить все как есть и поставить на своем сайте стандартный Universal Analytics, который по прежнему работает и поддерживается библиотекой Analytics.js.

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

Для этого я приложу ссылку под данным видео, где вы можете скачать стандартный сниппет счетчика Universal Analytics. Здесь, в предпоследней строчке – «ga create», далее идет UA и номер ресурса. Вместо него вам нужно поставить свой номер ресурса.

<!-- Google Analytics -->
<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>
<!-- End Google Analytics -->

Как видите, сам сниппет стандартный. Такой вариант развития событий я предлагаю для тех, кому лень, либо показалось сложным. Хотя, на мой взгляд, стало проще или, как минимум, не сложнее.

Виртуальные страницы для Global Site Tag

И последнее. Если вы хотите работать не только событиями, но и виртуальными страницами, то у вас на экранах конструкция, которая передает в Global Site Tag виртуальную страницу.

gtag('event','page_view',{'page_path':'/addtocartvirt'});

Как видите, здесь все очень просто: есть две команды «event» и «page_view», и далее в фигурных скобках параметр «page_path» – путь страницы, и далее значение параметра. В нашем случае это «addtocartvirt», то есть описательное значение виртуальной страницы.

Таким образом, если повесить эту конструкцию на какой-то элемент, то при клике на этот элемент, либо какой-то еще возможный сценарий, в Global Site Tag будет передаваться виртуальная страница с адресом, который вы видите на экране.

Отслеживание событий с помощью тега gtag.js:
https://developers.google.com/analytics/devguides/collection/gtagjs/events

Как добавить на сайт analytics.js:
https://developers.google.com/analytics/devguides/collection/analyticsjs/


Заключение

Что ж, друзья, на этом у меня все. Надеюсь вы разобрались, как работать с событиями и виртуальными страницами на основе обновленного счетчика Global Site Tag и теперь умеете это. Ставьте пальцы, если было полезно!

А кроме того рекомендую скачать пошаговый Курс по Яндекс Директ и Google Adwords. С помощью данных видеороликов вы настроите свои первые рекламные кампании и ни за что не сольете рекламный бюджет.

comments powered by HyperComments
(2 оценок, среднее: 5,00 из 5)
Загрузка ...
Блог Евгения Тридчикова