Блог павла семенова

об интернет-маркетинге

Google Tag Manager — как установить и настроить. Полная инструкция по GTM

Как установить и настроить Google Tag Manager. Как связать его с сайтом. Как поставить Яндекс метрику и Google Analytics 4.  Настроить цели на сайте.  Вы узнаете в данной статье.

Что такое Google Tag Manager (ГТМ)

Разберемся, что такое Google Tag Manager и для чего он нужен. 

Google Tag Manager или GTM —  это специальный сервис по управлению тегами и кодами, которые помогают пользователям создавать и отслеживать теги (или их ещё называют фрагменты кодов) для сайтов и мобильных приложений.

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

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

С помощью ГТМ можно работать с аналитическими системами самостоятельно, не привлекая сторонних специалистов, это сильно упрощает работу для маркетолога. 

Кому полезен ГТМ

Он нужен для всех, кто работает с аналитикой, с контекстной рекламой. И если у вас больше одной рекламной системы, например, Яндекс.Директ и Google ADS, то вам будет очень удобно работать с помощью данного сервиса.

Расширение Google Tag Assistant

Для удобства можно поставить специальное расширение для Google Chrome оно называется Google Tag Assistant.

Расширение Google Tag Assistant

С помощью этого приложения Вы сможете узнать установлен ли контейнер ГТМ на любом сайте.

Создание аккаунта в Google Tag Manager (ГТМ)

Для начала создадим аккаунт Google Tag Manager. Переходим в GTM по ссылке.

Нажимаем «Создать аккаунт», пишем название, выбираем страну, и указываем название контейнера. Далее выбираем целевую платформу.

Создание аккаунта в Google Tag Manager

В качестве названия – указываем название вашего проекта.

Контейнер — это сайт или приложение, на котором мы настраиваем аналитику. Их может быть несколько в рамках одного проекта.

В случае с сайтом, как в нашем примере, просто скопируйте домен сайта и вставьте в поле «контейнер».  

Нажимаем создать. 

Уточняем страну. Ставим галочку: «Я соглашаюсь с условиями в отношении обработки данных»

Условие использования GTM

Нажимаем: «Да» в правом верхнем углу страницы.

Далее нам необходимо установить код ГТМ на наш сайт. Для этого необходимо его скопировать и вставить на страницы сайта в определенном месте.

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

Установим ГТМ на сайт.

Переходим в администрирование и выбираем «Установить Google Менеджер тегов».

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

Код ГТМ состоит из двух фрагментов тега:

Фрагменты кодов ГТМ

Первый необходимо установить в раздел «head» кода страницы как можно ближе к началу. 

Второй вставляем после тега «body».

Разберем на примере, как установить ГТМ на сайт на платформе WordPress.

Копируем первый фрагмент кода.

Google Tag Manager - как установить и настроить. Полная инструкция по GTM

Заходим в админку сайта. 

Далее Внешний вид. Редактор тем.

Внешний вид - Редактор тем

Выбираем заголовок header. php. В коде находим <Head>. 

Ниже вставляем код ГТМ.

Первый код ГТМ

Второй фрагмент тега нам необходимо поставить сразу после открывающего тега <Body>.

Копируем тег.

Копируем второй код ГТМ

Возвращаемся на сайт, находим тег <Body>.

Вставляем второй код ГТМ на сайт

Ниже вставляем второй фрагмент тега ГТМ.  Нажимаем: Обновить файл. 

Контейнер установлен.

Обзор интерфейса GTM

Рассмотрим интерфейс рабочей области.

Слева меню состоит из пунктов: Обзор, Теги, Триггеры, Переменные, Папки, Шаблоны.

Для добавления нового Тега. Необходимо нажать «Добавить новый тег» или перейти в раздел Теги. Чтобы добавить триггер, заходим в подменю Триггеры.

Обзор интерфейса ГТМ

В верхней строке меню справа находится код ГТМ. 

Данный номер можно скопировать и установить на сайте, созданном, например, на Tilda.

В данной строке меню также находятся кнопки: «Предварительный просмотр» и «Отправить».

С помощью кнопки Предварительный просмотр — мы можем проверить настройки тегов. 

С помощью кнопки Отправить —  мы отправляем изменения на сервер. 

Что такое теги

Тег —  это фрагмент кода, который собирает данные о посетителях сайта и отправляет на сторонние сервисы, например, в Яндекс Метрику, Google Analytics 4, Пиксели соцсетей, tiktok ads, коллтрекинг и пр. 

Что такое триггеры

Триггеры — это условия активации тега. Например, Клик по кнопке на экране, прокрутка на экране до какого-либо элемента, время которое пользователь провел на сайте и т.д. То есть, это некое событие, которое срабатывает на сайте и активирует данный тег. А тег уже передаёт информацию в системы аналитики.

Какие триггеры бывают: Просмотр страницы, Клик по кнопке, Отправка формы, Доступность элемента, Глубина прокрутки, Таймер и т.д.

Что такое переменные

Переменная – это условия активации триггера. То есть, когда мы настраиваем триггер мы устанавливаем по какому условию он должен сработать. Другими словами, на какую кнопку на сайте нажал пользователь, какую форму он отправил.

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

Настроим переменные 

Заходим в Переменные. Нажимаем настроить.

Настройка переменных

В открывшемся меню выбираем все необходимые переменные. 

Выбираем необходимые Переменные

Наиболее важные: Все клики, Все формы, Event. Остальные переменные выбираете по необходимости, исходя из того, какие элементы есть у вас на сайте, и на какие из них Вы планируете настраивать события. 

Выбрали нужные Переменные

Настройкам триггеров

Здесь мы можем создать триггеры прямо из тегов. Сначала создаем тег, после этого создаем триггер.  

Или можно создать триггеры заранее. Данный вариант удобней. Поэтому рассмотрим его  на примере.

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

 Заходим в пункт меню Триггеры. Нажимаем: Создать.

Создание Триггеров

Выбираем: Клик —  Все элементы.

Триггер - Все элементы

Даем понятное название триггеру, например, Все клики

Важно! Старайтесь давать названия триггерам и тегам максимально понятные, чтоб при проведении аналитики не возникало дополнительных вопросов, и не пришлось тратить время, чтоб понять, какой показатель сработал.  

Триггер - Все клики

Нажимаем: Сохранить.

По той же схеме создаем остальные триггеры.

Настраиваем триггер «Все ссылки».

Триггер - Все ссылки

Настраиваем триггер «Все формы».

Триггер - Все формы

Далее определяемся, какие события нам необходимо настроить. Заходим на свой сайт и выбираем нужные. Например, клик по телефону, формы заказа, переход в мессенджеры и пр. 

Настраиваем соответствующие цели в Яндекс Метрике и Google Analytics 4. 

Но для начала установим Яндекс Метрику.

Установка Яндекс Метрики

 Для начала зайдем в Яндекс Метрику и создадим счетчик.

Создание счетчика Яндекс Метрики

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

Настройка счетчика Яндекс Метрики

Нажимаем: Создать счётчик.

 Заходим в настройки и копируем код счетчика.

Копируем код счетчика

Возвращаемся в ГТМ. Нажимаем: Создать Тег.

Создаем Тег Яндекс Метрики в ГТМ

Выбираем конфигурацию тега.

Выбираем конфигурацию Тега

Выбираем: Пользовательский HTML. 

Выбираем: Пользовательский HTML
Конфигурация Тега

В окно вставляем код метрики. 

В Триггерах выбираем: Все страницы (All Pages).

Тег Яндекс Метрики

Даем понятное название тегу, нажимаем: Сохранить.

Установка Google Analytics 4

Для начала, создадим и настроим Google Analytics 4. Как его создать и настроить можно посмотреть в данном видео.

Переходим в Google Analytics 4. В раздел администратор. Создаем аккаунт. 

Создание аккаунта в Google Analytics 4

Заполняем необходимые поля. Нажимаем: Далее.

Заполняем поля в GA4

Называем наш ресурс. В нашем случае это сайт, поэтому вставляем адрес сайта. Выбираем часовой пояс, валюту. Нажимаем: Далее

Google Tag Manager - как установить и настроить. Полная инструкция по GTM

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

Соглашение ГА4

Все готово.

Выбираем платформу, в нашем случае — веб-сайт.

Выбираем веб-сайт

 Указываем адрес сайта, выбираем: https//. Указываем название потока. Нажимаем: Создать поток.

Создаем поток в GA4

Копируем идентификатор потока данных.

Идентификатор потока данных

Переходим в настройки, проверяем подключение всех параметров сбора статистики.

Настройка улучшенной статистики

Возвращаемся в ГТМ, создаем новый тег.

Нажимаем на вкладке теги. Выбираем конфигурацию — Google Аналитика. конфигурация G4.

Конфигурация - Google Analytics

В окошко в форме вставляем идентификатор потока данных, скопированный в Google Analytics 4. 

Вставляем идентификатор потока данных

В расширенных настройках, в настройках активации тега, выбираем «один раз на страницу». Выбираем триггеры: Все страницы (All Pages). Даем понятное название тегу, например, GA4. Нажимаем: Сохранить.

Настройка конфигурации тега ГА4

Теги YM и GA4 созданы.

Теги YM и GA4 созданы

Проверка установки тегов

Проверим корректность установки тегов на примере Яндекс Метрики.

Для этого мы переходим на сайт и в поисковой строке пишем комбинацию: ?_ym_debug=1. Нажимаем: Enter.

Проверка установки тега Яндекс Метрики

Далее нажимаем: Посмотреть код, переходим в консоль и в строке находим Pageview. Counter и название нашего счётчика.

Переходим в консоль и в строке находим Pageview

Все установлено корректно.

Также можем проверить корректность установки тегов в ГТМ. 

Нажимаем: Предварительный просмотр

Проверка тегов в ГТМ

Далее в окошко вписываем адрес сайта.

Вставляем адрес сайта

Нажимаем: Connected.

Нажимаем: Connected

После загрузки нажимаем: Continue

Если после загрузки на верхнем уровне отображаются установленные теги: Google Analytics 4 и Яндекс Метрика, значит все установлено корректно.

Все установлено корректно

Установка Пикселя ВКонтакте

Для сбора аналитики установим также Пиксель ВК. 

Создаем пиксель в рекламном кабинете ВКонтакте (VK Реклама). Заходим в кабинет ВКонтакте.

Переходим в Сайты. Нажимаем: Добавить Пиксель.

Добавляем пиксель ВКонтакте

 В появившееся окошко вписываем адрес сайта. Нажимаем: Добавить. 

Выставляем «автоматический поиск событий» и «синхронизация пользователей»

Далее копируем код пикселя.

Копируем код пикселя ВКонтакте

Возвращаемся в ГТМ на вкладку Теги. Нажимаем: Создать

Нажимаем Создать Тег

Конфигурация. Выбираем пользовательский HTML.

Google Tag Manager - как установить и настроить. Полная инструкция по GTM

Вставляем код пикселя.

Вставляем код пикселя ВКонтакте

В триггерах выбираем Все страницы (All pages). Даем понятное название тегу. Нажимаем: Сохранить.

Даем название Тегу

Уже сейчас мы можем отправить изменения на сервер, и так как уже установлены коды на наш сайт — всё будет работать корректно. 

Продолжим настройки.

Настройка триггеров 

Заходим во вкладку Триггеры. 

Настройка триггера Клик по телефону

Для этого, на нашем сайте кликаем на телефон. 

Кликаем на телефон на сайте

Возвращаемся в ГТМ. На вкладке меню слева отобразились действия.

Смотрим действия

Заходим в Link Click. Переходим в Variables

Заходим в Link Click. Переходим в Variables

Из всех сработавших по клику по телефону переменных, выбираем одну.  Возьмем: Click URL. Здесь копируем переменную tel: .

Копируем переменную tel:

Далее создаем триггер. Выбираем Только ссылки. Ставим галочку «Некоторые клики по ссылкам». Клик URL — содержит — вставляем здесь скопированное значение.

Настройка клик по телефону

Даем понятное название. Нажимаем: Сохранить.

Настраиваем «Таймер»

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

Создаем триггер. Выбираем «Таймер». Время указано в миллисекундах. Поэтому, если нам необходимо 30 секунд — ставим 30 000.

Установим время 15 секунд – ставим 15 000. Ограничения – 1. Дальше выбираем: Page URL содержит — вписываем адрес нужной страницы сайта. Здесь можно выбрать любую страницу.

Настройка таймера

Либо настроить на все страницы. В этом случае выбираем: Page URL — соответствует регулярному выражению —  в окошке вписываем комбинацию: точка и звездочка .* .

Настройка таймера на все страницы сайта

Даем понятное название. Нажимаем: Сохранить.

Настраиваем триггер на формы

1.Настроим цель на кнопку Отправить. 

Создаем триггер. Выбираем «Только ссылки». Ставим галочку «Некоторые клики по ссылкам». Выбираем Click Text содержит и вставляем слово отправить. Оно должно быть написано так же, как в коде на сайте. Для этого можно перейти в код формы на сайте и скопировать его оттуда.  

Настройка по тексту

Даем понятное название триггеру. Нажимаем: Сохранить.

Даем понятное название триггеру

2. Настроим цель на текст «Отправлено успешно». Данная надпись появляется, когда форма отправлена.

Настройка цели на текст Отправлено успешно

После появления надписи: «Отправлено успешно» нажимаем на нее правой кнопкой мыши, выбираем: «Просмотреть код»

Смотрим код

В коде выбираем соответствующую строку.

Кликаем на нее правой кнопкой мыши. Выбираем Copy – Copy selector. Скопировали.

Копируем код

Создаем триггер. Выбираем Только ссылки. Ставим галочку «Некоторые клики по ссылкам». Выбираем Click Element — соответствует селектору CSS и вставляем в окошко то, что мы скопировали.

Вставляем скопированный код

Даем триггеру понятное название. Нажимаем: Сохранить.

Настраиваем цели через Event

Переходим в «предварительный просмотр». Нажимаем Connect, далее Continue.  

Предварительный просмотр

Переходим на сайт, заполняем форму, нажимаем кнопку отправить. 

Возвращаемся в ГТМ. На вкладке слева выбираем Form Submit

Переходим в Variables

Переходим в Variables

Выбираем Event. Копируем код параметра.

Выбираем Event. Копируем код параметра

Создаем триггер. Выбираем Специальное событие. Ставим галочку «Некоторые клики по ссылкам». Event – содержит – вставляем скопированный код параметра.

Выбираем Специальное событие

Даем триггеру понятно название. Нажимаем: Сохранить.

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

Настраиваем триггер на видимость определенного элемента

Выберем блок Отзывы внизу главной страницы сайта. Если пользователь долистал до нее, значит изучил основную информацию. 

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

В коде выбираем соответствующую строку.

Кликаем на нее правой кнопкой мыши. Выбираем Copy – Copy selector. Скопировали.

Настройка триггера на видимость элемента Отзывы

Создаем триггер. Выбираем триггер  Видимость элемента. 

Метод выбора – Селектор CSS. Селектор элементов – вставляем скопированный код. 

Ставим галочку «Один раз на страницу»

Выбираем минимальный процент видимости, например, 50%, можно поставить больше.

Настройка Видимость элемента 50%

Даем понятное название триггеру, например, Прокрутка до отзывов. Нажимаем: Сохранить.

Настраиваем глубину вертикальной прокрутки

Создаем триггер. Выбираем «Глубина прокрутки».

Выбираем «Глубина вертикальной прокрутки» устанавливаем необходимое значение, например, 75% . 

Глубина прокрутки

Даем триггеру понятное название. Нажимаем: Сохранить.

Настраиваем клики на мессенджеры

Заходим на сайт. Кликаем правой мышкой на мессенджеры поочередно и просматриваем код страницы.

Смотрим код после клика на мессенджеры

В коде находим точное название, например, WhatsApp — wa.me.

Находим переменную вацап

Viber – viber.click.

Находим переменную вайбера

Копируем значения.

Создаем триггер. Выбираем Только ссылки. Ставим галочку «Некоторые клики по ссылкам». Клик URL содержит и вставляем здесь скопированное значение.

Создаем триггер на мессенджер

Даем триггеру понятное название. Нажимаем: Сохранить.

Тоже самое делаем для других мессенджеров.

Настройка триггера Переход в Вайбер

На примере разобрали настройку нескольких триггеров. Но их здесь гораздо больше, выбирайте те, которые будут актуальны для вашего проекта.

Настройка целей для Яндекс Метрики

Триггеры настроены, мы можем создать необходимые теги. 

Для начала настроим события или цели для Яндекс.Метрики.

 Для этого нам понадобится специальный код (скрипт)

 <script>
ym(XXXX,’reachGoal’,’zakaz’)
</script>

Переходим в Яндекс Метрику, нажимаем: Добавить цель.

Добавляем цель в Яндекс Метрики

Настройка цели на клик по телефону

Называем цель. Выбираем JavaScript — событие и пишем идентификатор без пробелов и на английском языке. Например, Phone

Ставим цель

Копируем код и возвращаемся в Google Tag Manager. 

Далее создаем тег.

Указываем понятное название. В конфигурации тэга выбираем «Пользовательский HTML».

Настройка цели Клик по телефону в Яндекс Метрике

Вставляем наш скрипт: вместо ХХХХ – вписываем счетчик Яндекс.Метрики, вместо zakaz вставляем идентификатор который мы создали (Phone).

Вставляем скрипт

В качестве триггера выбираем созданный ранее «Клик по телефону».

Выбираем триггер Клик по телефону

Нажимаем: Сохранить.

Настройка цели Оформить заказ через event

Создаем цель в Яндекс Метрике. Называем цель. Выбираем JavaScript — событие и пишем идентификатор, например, zakaz_event

Настройка цели через event

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

Создаем новый тег

Меняем данные кода HTML. Поменять необходимо идентификатор. Также не забываем переименовать тег и поменять триггер.

Меняем данные на нужные

Нажимаем: Сохранить.

По той же схеме создаем остальные цели в Яндекс Метрике и теги в GTM.

Настройка цели Оформить заказ через селектор

Настройка цели через селектор

Создаем аналогичный тег в Google Tag Manager.

Создаем тег в ГТМ

Настройка цели Оформить заказ (текст)

Настройка цели через текст

Создаем аналогичный тег в ГТМ.

Создаем аналогичный тег в ГТМ

Настройка цели на мессенджеры

Настройка цели на мессенджеры

Настраивая в метрике цели на клики на мессенджеры, можно создать отдельные цели на каждый мессенджер, или можно создать одну на все.

Создаем тег на мессенджеры

Создаем цель в Яндекс Метрике. Называем цель. Выбираем JavaScript — событие и пишем идентификатор, например, messenger. Копируем код и возвращаемся в ГТМ. 

Копируем предыдущий тег, меняем название. И идентификатор в скрипте.

Редактируем триггеры. Добавляем поочередно триггеры настроенные на каждый мессенджер. Если пользователь перейдет в любой из них – цель сработает. Нажимаем сохранить.

Настройка целей для GA4

Настроим цели для Google Analytics 4. 

Можно сразу настроить их в Google Tag Manager и они при срабатывании отобразятся в настроить Google Analytics 4. 

Мы же рассмотрим вариант настройки по принципу Яндекс.Метрики. 

Заходим в GA 4. Переходим в События

Создание события в ГА4

Настройка цели на клик по телефону

Нажимаем создать событие. Называем событие, или выбираем из списка.  Параметр: Event_name = вписываем значение, например, Phone

Настройка цели клик по телефону в GA4

Копируем значение. Переходим в ГТМ, создаем тег.

В конфигурации тега выбираем Google Аналитика. конфигурация G4. Тег конфигурации — G4. В название события вставляем скопированное значение. 

Настройка цели в ГТМ

Заходим в Параметры события. В окно Значения, вставляем скопированное значение. 

Прописываем значение в параметрах события

В название события также копируем название параметра из созданной цели в GA 4: Event_name.

Пишем Event_name

Называем тег. В качестве триггера выбираем Клик по телефону.

Выбираем триггер Клик по телефону

Нажимаем: Сохранить.

Возвращаемся в Google Analytics 4 – нажимаем: Создать.

Создаем событие клик по телефону

Здесь же сразу создадим конверсию. Заходим в Конверсии – Создать.

Создаем конверсию Клик по телефону

Указываем название, соответствующее значению в цели, например, Phone.

Указываем название конверсии

По той же схеме создам остальные цели в GA4 и теги в ГТМ.

Создание цели Отправка формы в ГА4
Создание цели Отправка формы в ГТМ

Настройка цели на Мессенджеры

Настройка целей на мессенджеры

Отправка данных на сайт

После того, как все теги созданы. Отправляем данные на сайт.

Отправка данных на сайт

Нажимаем Отправить, в названии версии можно указать Полная настройка. Нажимаем Опубликовать.

Публикуем данные

Проверим. Перейдем в рабочую область – Предварительный просмотр. Connect. Continue.

Проверка настройки

Все настроенные теги работают. 

Далее проверяем как работают конверсии. Переходим на сайт и кликаем на все внесенные в конверсию элементы. 

Все данные должны отобразиться. Если какая–то цель не срабатывает, заходим в настройки и проверяем все ли правильно настроено. При необходимости вносим изменения.

Вывод

В данной статье мы разобрались что такое Google Tage Manager, для чего он нужен, как его настроить и установить на сайт. Разобрались как подключить  к ГТМ Яндекс Метрику, GA4, Пиксель ВКонтакте.  Научились настраивать теги и триггеры.

Надеюсь, статья была полезна. А если вам нужна помощь в настройке GTM или рекламы, оставьте заявку в форме ниже!

Видео

Смотрите, также, видео: «Как установить и настроить Google Tag Manager»:

Публикации, которые могут быть вам интересны

2 ответа

  1. Павел, здравствуйте! Подскажите, пожалуйста, у меня вопросы по GTM. Нужно ли создавать новый тег для каждой страницы сайта или достаточно одного? А к каждому тегу добавлять триггеры и переменные? Если я добавила 2 тега на разные страницы одного сайта- это как-то будет влиять на работу аналитики? В Яндекс Метрике цели настроены, нужно ли обязательно настраивать цели GTM?

    1. Не понял. Зачем привязка тега к странице? Тег для каждого счетчика аналитики нужен. И публиковать на всех страницах. Если у вас только Директ, то ГТМ вам не обязателен. Хотя там можно создавать микроконверсии, чего не сделать в Метрике.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Обо мне
Главная

Павел Семенов. Эксперт по маркетингу, продвижению бизнеса. Маркетолог с 2013 г. Основатель агентства Semenov Digital. Преподаватель Loftschool. Подробнее

Разработаем эффективную SEO стратегию

SEO самый дешевый канал привлечения клиентов в ваш бизнес. Напишите мне в телеграмм. Посмотрим сайт и составим план работы.