Приветствую друзья. На связи Евгений Тридчиков. И в этом видео я расскажу про работу событий и виртуальных страниц с обновленным счетчиком 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 улетит событие с идентификатором «show_callback», то есть действием по событию «show_callback». Здесь категория по умолчанию «general».
Давайте проверим это. Для этого, как вы знаете, я использую Tag Assistant – включаю его, перезагружаю страницу. Обратите внимание, что здесь у меня и Universal Analytics и Global Site Tag. Это такая особенность – если вы ставите на сайт Global Site Tag, то он подтягивает два сниппета.
Далее, я жму «перезвоните мне». Идем в знакомый нам «Universal» и видим событие. И действительно: категория «general», которая передается по умолчанию, и действие по событию «show_callback».
Теперь переместимся в карточку товара, потому что именно здесь, на кнопку «в корзину», настроено событие, которое уже на этот раз передает в явном виде категорию. Здесь мы жмем «просмотреть код страницы».
Обратите внимание, вот эта строчка. При клике на кнопку «в корзину» в Analytics передается событие с действием «addtocart» и категорией «form». На этот раз категория задана явным образом, а не «general», как было по умолчанию.
Таким образом, убедимся, что здесь у нас событий нет, пусто. Жмем «в корзину» и проверяем: видите, появилось событие – «form», действие – «addtocart».
А если это кажется сложным?
Далее. Возможны варианты развития событий. Если вам показалось, что обновленный код Global Site Tag выглядит сложно и не хочется в этом разбираться, вы можете оставить все как есть и поставить на своем сайте стандартный Universal Analytics, который по прежнему работает и поддерживается библиотекой Analytics.js.
Тогда вам не нужно будет менять конструкцию событий и виртуальных страниц на сайте, потому что они будут работать.
Для этого я приложу ссылку под данным видео, где вы можете скачать стандартный сниппет счетчика Universal Analytics. Здесь, в предпоследней строчке – «ga create», далее идет UA и номер ресурса. Вместо него вам нужно поставить свой номер ресурса.
(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');
Как видите, сам сниппет стандартный. Такой вариант развития событий я предлагаю для тех, кому лень, либо показалось сложным. Хотя, на мой взгляд, стало проще или, как минимум, не сложнее.
Виртуальные страницы для 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. С помощью данных видеороликов вы настроите свои первые рекламные кампании и ни за что не сольете рекламный бюджет.