Здравствуйте, с вами Денис Герасимов, сайт rek9.ru. Сегодня поговорим про настройку целей на событие внутри Google Tag Manager (GTM).
Google Tag Manager — это специальный код контейнера, в который можно добавить различные коды счетчиков или коды ретаргетинга. Их удобно редактировать из интерфейса, то есть не нужно каждый раз заходить на сайт через FTP и вносить изменения. Так же к контейнеру удобно предоставлять доступ.
Если вы занимаетесь контекстной рекламой на заказ, и у вас крупный заказчик с большим штатом программистов, то GTM это незаменимая вещь. Потому что программисты один раз устанавливают код контейнера, и через несколько дней вы с помощью GTM сможете вносить изменения, настраивать счетчики самостоятельно.
Как настроить цели на Событие в Google Tag Manager
- Создать счетчики в Яндекс.Метрика и Google Analytics на вашем сайте
- Создать контейнер GTM
- Добавить код контейнера на все страницы вашего сайта
- Добавить коды счетчиков Яндекс.Метрика и Google Analytics в GTM
- Создать цели на событие в обоих счетчиках (ЯМ и GA)
- Внести изменения в GTM
- Опубликовать контейнер
- Проверить правильность срабатывания целей
Возьмем ваш рабочий сайт, у меня это тестовый, у которого есть кнопка и форма для заполнения. У меня есть счетчики, которые уже установлены на этот сайт и прописаны некоторые цели. Также у меня есть доступ к файл-менеджеру хостинга, где у меня хранится сайт.
- Регистрация аккаунта в GTM. Создание аккаунта. В названии аккаунта я пишу название своего сайта rek9.ru. Затем СОЗДАНИЕ КОНТЕЙНЕРА. Можно создать контейнер для веб-страницы или для мобильного приложения. В одном аккаунте может быть несколько контейнеров. ИМЯ КОНТЕЙНЕРА rek9.ru. Для этого контейнера выберите ЧАСОВОЙ ПОЯС. Нажмите на СОЗДАТЬ АККАУНТ И КОНТЕЙНЕР, затем Я ПРИНИМАЮ УСЛОВИЯ ПОЛЬЗОВАТЕЛЬСКОГО СОГЛАШЕНИЯ. Откроется страница с кодом контейнера, который необходимо скопировать и добавить на все страницы сайта. Для этого в коде сайта сразу после открывающего тега <body> вставляете код GTM. Сохраните изменения.
-
ТЕПЕРЬ НУЖНО ДОБАВТЬ В КОНТЕЙНЕР ТЕГИ. Выберите тип тегов в таблице Google Analytics. Выберите имя тега, например, UA. ТИП ТЕГА — Google Analytics — Universal Analytics. ИДЕНТИФИКАТОР ОТСЛЕЖИВАНИЯ выберите СОЗДАТЬ СОБСТВЕННЫЙ МАКРОС. ИМЯ МАКРОСА, например, UA-GA. ТИП МАКРОСА — Постоянная строка. ЗНАЧЕНИЕ вставьте код вашего счетчика (UA- 000001-1), например. Сохраните изменения. Затем включите функции для рекламодателей. Справа нажмите на кнопку АКТИВАЦИЯ ПРАВИЛ и выберите ВСЕ СТРАНИЦЫ, затем СОХРАНИТЬ. Далее СОХРАНИТЬ внизу страницы, не внося больше никаких изменений. Таким образом мы добавили код Google Analytics на все страницы сайта. - Теперь создать новый тег для Яндекс.Метрики. Имя тега — ЯМ. ТИП ТЕГА — Пользовательский тег HTML, АКТИВАЦИЯ ПРАВИЛ — ВСЕ СТРАНИЦЫ. Затем в поле HTML внесите код Яндекс.Метрики. Код скопируйте из кода страницы вашего сайта. Далее внизу страницы нажмите на кнопку СОХРАНИТЬ.
Затем удалите из кода страницы вашего сайта код Google Analytics, который находится в теле сайта и начинается с тега <script> и заканчивается </script>. Сохраните.
-
Создайте новый тег в GTM и назовите его ПРОСЛУШИВАНИЕ КЛИКОВ. ТИП ТЕГА — Блок прослушивание событий — Прослушивание кликов. АКТИВАЦИЯ ПРАВИЛ — Все страницы. СОХРАНИТЬ. Таким образом создается тег, который прослушивает клики и передает информацию об этом в Google Analytics.
Теперь мы создали контейнер с тремя тегами. В верхнем правом углу нажмите на кнопку ОПУБЛИКОВАТЬ. Затем нажмите ПРОСМОТР и ВЫПОЛНИТЬ ОТЛАДКУ. После того как всплывет окно с надписью ПОДТВЕРЖДЕНИЕ ПРОСМОТРА, перейдите на страницу вашего сайта и нажмите F5, то есть обновить страницу. Внизу страницы появится специальная панель GTM. Обратите внимание на панель SUMMARY. После того, как вы кликните по странице, там появится надпись gtm.click. Это значит, что зафиксировался клик по сайту.
После нажатия на кнопку на сайте, на которую настроено событие, появится новое сообщение gtm.click. Выберите это событие нажатием на него мышью. Выберите Data Layer. Появится код, в котором можно увидеть, что ссылка на сайт, на который переходит пользователь при нажатии кнопки есть (gtm.element: https:/rek9.ru) и у этого элемента есть класс (gtm.elementClasses: ‘btn btn-primary btn-large’), то есть мы можем привязаться к этой кнопке по классам.
Теперь создадим цель на событие на нажатие кнопки на сайте внутри Google Tag Manage
Перейдите в GTM во вкладку ЧЕРНОВИК КОНТЕЙНЕРА, ОБЩИЕ СВЕДЕНИЯ. Затем СОЗДАТЬ НОВЫЙ ТЕГ с названием НАЖАТИЕ НА КНОПКУ. ТИП тега выберите Google Analytics — Universal Analytics. Макрос выбираем наш UA-GA, ТИП ОТСЛЕЖИВАНИЕ выберите СОБЫТИЕ. Далее заполняем ПАРАМЕТРЫ ОТСЛЕЖИВАНИЯ СОБЫТИЯ.
КАТЕГОРИЯ- кнопка
ДЕЙСТВИЕ — клик
ЯРЛЫК — Learn more (название вашей кнопки)
Далее необходимо СОЗДАТЬ ПРАВИЛО, во вкладке АКТИВИРОВАТЬ ПРАВИЛО. Название правила «Нажатие на кнопку». Параметр
[syntax type=»html»]{{event}} равно gtm.click
{{element class}} содержит btn-primary[/syntax]
Нажмите СОХРАНИТЬ. И снова СОХРАНИТЬ цель. Таким образом мы создали цель на передачу Universal Analytics на событие нажатие конкретной кнопки. Теперь Google Analytics будет фиксировать это событие. Но мы хотим, чтобы фиксировалась цель.
Для этого необходимо создать новую цель. Нажмите на СОЗДАТЬ ЦЕЛЬ — ВЫБРАТЬ, Название цели — НАЖАТИЕ НА КНОПКУ, ТИП — событие, ДАЛЕЕ. Параметры УСЛОВИЯ СОБЫТИЯ заполняем идентично как в нашем Теге. Затем нажмите на СОЗДАТЬ ЦЕЛЬ.
Перейдите в Google Tag Manager СОЗДАТЬ ТЕГ, имя тега — ЯМ Нажатие на кнопку, ТИП ТЕГА выбираем Пользовательский HTML. Активация правил ДОБАВИТЬ, выбрать НАЖАТИЕ НА КНОПКУ, СОХРАНИТЬ. В окно HTML нужно вставить код с вашей страницы, который передает в Яндекс.Метрику фиксацию событий. Найдите в коде yaCounter и скопируйте до «ga». Вставьте этот код в HTML окно, обрамляя его <script></script>. Поставьте галочку ПОДДЕРЖКА ФУНКЦИЙ и нажмите СОХРАНИТЬ.
Затем в правом верхнем углу нажмите кнопку СОЗДАТЬ ВЕРСИЮ, чтобы войти в режим отладки. Выполнить режим отладки. Затем обновите страницу вашего сайта. Кликните мышкой в любом месте страницы, чтобы активировать окно отладки внизу страницы. Затем можно посмотреть теги, которые активировались на данной странице. Это будет UA, Прослушивание кликов и ЯМ. Ниже список тегов, которые еще не активированы — Нажатие на кнопку и ЯМ Нажатие на кнопку.
Кликните на кнопку на сайте. Посмотрите теги, которые активировались на странице.
Перейдите на страницу Google Analytics во вкладку ОТЧЕТЫ, выберите В РЕЖИМЕ РЕАЛЬНОГО ВРЕМЕНИ — ОБЗОР. Увидите, что прямо сейчас на сайте есть 1 человек. Затем перейдите в СОБЫТИЕ, увидите, что событие зафиксировано КНОПКА КЛИК 1. Во вкладке КОНВЕРСИИ увидите, что зафиксирована цель НАЖАТИЕ НА КНОПКУ 1.
Перейдите в Яндекс.Метрику. Обновите страницу и увидите, что событие НАЖАТИЕ НА КНОПКУ зафиксировано и равно 1.
Таким образом один раз установив код контейнера на свой сайт на все его страницы, вы сможете через его интерфейс взаимодействовать с элементами на сайте.
Если вы хотите добавить отслеживание формы, то при создании тега, ТИП ТЕГА выберите БЛОК ПРОСЛУШИВАНИЯ СОБЫТИЙ — ПРОСЛУШИВАНИЕ ОТПРАВОК ФОРМ. Создаете правило {{event}} равно gtm.form.Submit. Тогда при отправке формы будет срабатывать событие, и передавать вашу конверсию в UA и Яндекс.Метрику.
Спасибо за внимание, до новых встреч!
↓ Презентация cloud.mail.ru