Мы работаем не только в Моcкве, но и в других городах России:

Продвижение по трафику от 50 копеек за переход. Заказать

Гайд по настройке Google Tag Manager 2.0 для всех: скриншоты, стрелочки, примеры

Подписаться
Больше интересностей из блога студии SEMANTICA
Получайте эффективные советы по интернет-рекламе и SEO-оптимизации вашего сайта
ВКонтакте:
Facebook:
Twitter:

Для тех, кто случайно забрел в двух словах поясню: Google Tag Manager (GTM) — это онлайн инструмент, упрощающий работу с системами веб-аналитики. Плюс в том, что все цели можно настроить в интерфейсе сервиса без лазаний по коду страницы. Один раз, конечно, придется сделать ctrl+c / ctrl+v кусочек html кода и дальше только тыкать красивые кнопки и наслаждаться.

 

Установка Google Tag Manager

Предположим, что почта на Google уже есть и вы в ней. Теперь нужно создать аккаунт в диспетчере тегов. Заходим по адресу.

Перейдя по ссылке увидите два простых шага создания аккаунта. Нужно придумать название. На случай, если вы ведете несколько сайтов, старайтесь сделать информативное название, чтобы не запутаться в дальнейшем. Там есть галочка, про анонимные данные в Гугл — тут на ваше усмотрение ставить или нет. Рядом с ней есть вопросик, наведя мышку на который, вы узнаете что к чему.

Жмем далее.

настройка gtm

 

 

Второй шаг: настройка контейнера. Пользуясь правилом информативности, придумываем название для контейнера — я впишу сюда адрес своего сайта. Далее выбираем, где будет использоваться контейнер, в моем случае это кнопка «интернет». Создаем!

 

установка google tag manager

Неожиданно возникает окно с кодом. Тут то и понадобятся наши навыки копирования.

 

74a723fe91

Выделяем и копируем код в какой нибудь блокнотик. Вставить его нужно в основной код сайта, сразу после открывающего тега <body>, так, чтобы код был на всех страницах. Для этого нужно зайти на FTP сайта, найти, чаще всего, файлик index. html и вонзить код туда. По факту должно получиться так:

 

7050787df0

 

Если с этим пунктом возникают трудности — придется их преодолеть при помощи знакомых, либо пишите в комментариях — помогу :)

Если по какой-то причине, вы закрыли код не скопировав его — нажмите на номер идентификатора вашего контейнера в формате GTM-XXXXXX в левом верхнем углу Диспетчера Тегов Google

 

 

01954ec55c

 

Настройка Google Tag Manager

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

Есть определенная иерархия в определениях:

  1. Тег. Главенствующая единица, фрагмент кода JS к которому можно подключать Триггер.
  2. Триггер. Это своеобразные активаторы тегов. В триггере используют переменные.
  3. Переменная. Связка «Ключ — значение», которая используется в триггере как условие активации тега.
настройка gtm

 

Как создать тег в Google Tag Manager

Создадим первый простенький тег. Он будет активироваться в каждой странице сайта.

 

настройка google tag manager

 

После нажатия появляется цепь в три шага:

  1. Выбор продукта. Мы будем отправлять данные в Google Analytics, значит его и выбираем.
  2. Выбор типа тега. Доверьтесь, выбираем Universal Analytics.
  3. Настройки тега. Нам нужно вставить наш идентификатор отслеживания Аналитики. Это номер счетчика Google Analytics. Уверен, вы знаете как его найти.
  4. Условия активации. Имеется ввиду, активация тега. Выбираем, чтобы он активировался на любых страницах сайта
  5. Должно получиться как-то так:

 

настройка google analytics через google tag manager

 

После нажатия на «Создать тег» вам предложат придумать ему имя.

 

Результат наших действий необходимо проверить и опубликовать. Для этого справа вверху жмем на стрелочку рядом с кнопкой «Опубликовать» и выбираем «Предварительный просмотр»:

 

0df5b00c85

 

Теперь зайдем на сайт, где мы ставили Google Tag Manager. Внизу должна появиться консоль:

 

750c9af0c0

Там есть две строчки:

  • Tags fired on this page — теги, которые сработали на этой странице.
  • Tags not fired on this page — теги, которые не сработали на этой странице.

Слово fired можно перевести как «стреляный». То есть, выстрелила ваша цель или нет. Наш тег добавился и стрельнул. Возвращаемся на страницу Диспетчера Тегов Гугл и жмем «опубликовать».

 

b8ce311e0c

Отлично! Теперь умеем создавать теги. Данный тег оставляем и более не трогаем. Он нужен, чтобы дальнейшие теги используемые на сайте корректно работали. На этом настройка Google Tag Manager завершена.

 

Google Tag Manager: активация переменных

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

гугл тег менеджер

 

Проставляем везде галочки и забываем (пока что) про эту вкладку.

 

Google Tag Manager: создание триггеров

Для триггера создадим новый тег. Первые два шага остаются неизменными. А дальше в «настройке тега» указываем:
— Тип отслеживания: Событие
— Категория: test
— Действие: click

Тут нужно понимать, что test и click — это названные мной категории и действие. У вас они могут называться как угодно, главное, следите, чтобы они были вменяемыми и вы потом не запутались.

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

Почему бы и нет, но сначала нужно узнать какой-то опознавательный элемент, принадлежащий именно этому тексту. Для этого, прям как в статье про настройку целей в Метрике, заходим на сайт, находим выбранный элемент и жмем правой кнопкой мыши — «посмотреть код». Видим, что у текста в футере есть класс mt-half. Им то мы и воспользуемся.

 

Диспетчер тегов google

 

Возвращаемся в Диспетчер Тегов Google, пред нами открыта страница редактирования тега. Нажимаем на «Клик»:

 

10033420e7

Перед нами автоматически всплывает окно «Создание триггера», так как раньше мы их не создавали. Снова три шага.

  1. первый уже выбран — это «Клик»;
  2. настройка триггера — выбираем «Все элементы»;
  3. условия активации — выбираем «некоторые клики».

Теперь нам пригодятся активированные переменные.

Выбираем условие: вместо «Идентификатор контейнера» выбираем «Click Classes», то есть клик по «классу». Приравниваем его к названию класса нашего текста в футере mt-half.

11faf6ac97

 

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

 

4673da29e1

 

Кнопка «опубликовать» справа вверху покраснела. А значит, есть неопубликованные изменения. Но давайте сначала убедимся, что все работает. Для этого жмем на предварительный просмотр:

 

32910005ec

 

Отлично, режим просмотра включен и работает в нашем браузере. Теперь заходим на сайт и смотрим в консоль:

 

c5bd2e1b82

 

А теперь давайте жмякнем по тексту в футере и опять посмотрим в консоль. Если все правильно, то картинка слегка изменится и будет так:

 

f1436a96e9

 

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

Не забываем нажать «Опубликовать» в Диспетчере Тегов!

 

Настройка google analytics через google tag manager: отслеживание целей

Для того чтобы все данные передавались в Google Analytics и мы могли их с легкостью отыскать — мы уже сделали нужные манипуляции с самим тегом, а именно:

  • Поставили тип отслеживания: Событие
  • Придумали названия для Категории и Действия.
    Именно эти данные мы будем использовать при создании цели в GA.

 

2087c91568

 

Категорию я назвал test (ну, мы же тестируем тег). А действие click — ну, мы же кликаем на текст в футере :)

 

Коротко по созданию цели в GA

Погорячившись, начал со статьи про GTM, не написав предварительно про создание целей в Google Analytics. Я обязательно исправлюсь в будущем и подробно распишу, уже сразу вместе с соприкосновением GTM, как создавать цели в GA. Обещаю. А пока что очень коротко и поверхностно только для нашего примера.

  1. Заходим в Google Analytics — Администратор — Цели
настройка целей google tag manager
  • На странице, где мы оказались, жмем на единственную красную кнопку «+ ЦЕЛЬ» и оказываемся на странице создания цели.
  • У нас будет три этапа. Первый — это установка цели, в котором выбираем «Собственная».

    da7b9d499a
  • На втором этапе: придумываем название, в моем примере это test, но вы называйте цели по смыслу, чтобы не запутаться в дальнейшем. Потом выбираем «Событие» и жмем продолжить.

    0b8b2904f9
  • Третьим шагом мы свяжем аналитику и GTM. Прописываем в графе категория то же самое, что мы писали в «Категории» в нашем теге в Google Tag Manager’е. Аналогично поступаем с графой «Действие» и жмем сохранить.

    c473206928

 

Теперь достижением цели станет нажатие на текст в footer’е. Посмотреть конверсию по целям вы сможете перейдя в «Отчеты» — «Конверсии» — «Цели» — «Обзор».

353f395adc

 

Цель нажатия на текст в футере, конечно, не самая полезная из всех, что можно придумать. Как пример настройки GTM и интеграции с Google Analytics — подойдет. Опираясь на полученные знания, вы сможете придумать свои цели и попробовать их настроить. Если есть что спросить или какие то интересные мысли — пишите в комментариях, буду рад. В следующей статье опишу настройку целей в Google Analytics (аналогично статье про цели в Метрике). Как итог: получится комплекс из трех статей для удобного использования веб-аналитики.

Google Tag Manager: Яндекс Метрика

Согласитесь, хранить всю веб-аналитику в одном месте — отличная перспективка. Давайте разберем, как поставить Метрику через GTM:

  1. Создаем новый тег. Я назвал его test Metrika.
  2. На вкладке выбора продукта нажимаем «Пользовательский» и жмем «Далее».
7bb32cf713
  • На этапе настройки тега нужно вставить в html форму код счетчика Метрики интересующего проекта. Я свой вонзил и выглядит вот так:

google tag manager яндекс метрика
  • На последнем этапе протестим, нажав на «Все страницы» и жмем "Создать тег".

    5560a9a9c9

    Не забываем в правом верхнем углу "Опубликовать"!

 

Если есть желание, аналогично способу выше, проверяем работу тега через «Предварительный просмотр».

google tag manager руководство

 

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

 

Как и в примере создания тега с триггером, который активируется при нажатии на текст в footer’е, я получил положительный результат в предварительном просмотре:

 

До нажатия:

669751c18c

 

После нажатия:

eb63dc28f3

 

Как смотреть цели Google Tag Manager в Метрике

Чтобы было интересней, создадим новый триггер и новый тег. Пускай целью будет нажатие на кнопку «Подписаться» на статьях сайта. Для этого нужно узнать идентифицирующий кусочек кода. Теперь по шагам:

  1. Заходим на страницу статьи, выбираем кнопку "Подписаться" и жмем правой кнопкой мыши — посмотреть код.

    google tag manager события

    Копируем куда-нибудь название класса, в моем случае, это — subscribemeBtn

     

  2. Возвращаемся на страницу GTM — триггеры — красная кнопка «Создать».
  3. Выбор события: Клик.
  4. Настройка триггера: Все элементы.
  5. Условия активации: Click Classes содержит subscribemeBtn.
  6. Сохранить и придумать имя.

    яндекс метрика через GTM
  7. Теперь заходим в Теги — Создать тег.
  8. Выбор продукта: Пользовательский.
  9. Настройка тега: В поле для html пишем конструкцию:

    <script>
    yaCounterXXXXXX. reachGoal (‘Identifikator');
    </script>

    Тут вместо XXXXXX — номер счетчика метрики
    А вместо ‘Identifikator' — название идентификатора

 

Условие активации: Выбираем «клик» и добавляем созданный ранее триггер и сохраняем конструкцию.


google tag manager 2.0

 

Не забываем опубликовать! Теперь осталось как-то связать это с Метрикой.

 

Создаем цель в Метрике для GTM

Так же коротко как и о создании целей в GA, только для нашего примера:

 

  1. Заходим в Метрику — выбираем нужный сайт — настройки — цели — добавить цель.

    google tag manager яндекс метрика
  2. Создание цели: Java-script событие — вводим название идентификатора (то самое название, которые мы использовали при создании тега в предыдущем шаге!).

    яндекс метрика через гугл тег менеджер

 

Тадаам! Все готово. Теперь при нажатии на кнопку «Подписаться» будут отправлены данные в Метрику о достигнутой цели. Посмотреть можно по пути: Отчеты — Стандартные отчеты — Конверсии.

яндекс метрика через google tag manager

 

Как же так получается? Для того чтобы дальше вы могли сами придумывать и создавать цели нужно уловить, что же мы наделали:

  1. Мы создали Тег, в котором содержится код Яндекс Метрики, отрабатывающий на всех страницах сайта.
  2. Мы создали второй Тег с уникальным идентификатором, триггер которого срабатывает при определенном условии.
  3. Мы создали цель в метрике с тем же самым идентификатором, что и во втором Теге.

После чего всё заколосилось!

Надеюсь получилось доступно и понятно. Если вопросы остались — пишите, буду рад!

Конец

Задать вопрос по статье
Подпишись на нашу группу в VK и получай экспертные статьи прямо в ленту!
  • Dina

    Вы противоречите сами себе и Гуглу в рекомендации «Вставить его нужно в основной код сайта, перед открывающимся тегом , так, чтобы код был на всех страницах. » у вас на скриншоте из сервиса и в примере установленного кода GTM располагается как раз после .

    • Кирилл

      Действительно опечатался, поправлю. Вы очень внимательны, спасибо!


Мы работаем не только в Моcкве, но и в других городах России: