Обучение google tag manager: Курс по Google Tag Manager (2023)

Большая подборка материалов для изучения Google Tag Manager — Маркетинг на vc.ru

{«id»:13991,»url»:»\/distributions\/13991\/click?bit=1&hash=f06c297e86cbe190a25baf01118c56faa81a035f9a667acb1cdfc053322f1b42″,»title»:»\u041f\u0435\u0440\u0435\u0432\u0435\u0441\u0442\u0438 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044e \u043d\u0430 \u042d\u0414\u041e \u0431\u0435\u0437 \u0441\u043b\u0451\u0437 \u0438 \u0438\u0441\u0442\u0435\u0440\u0438\u043a»,»buttonText»:»\u0425\u043e\u0447\u0443″,»imageUuid»:»4350a1df-29b3-5a95-b0be-c63519db423a»}

Привет, читатель! Меня зовут Артём Сайгин, я веду проект Growth Lab, в котором рассказываю о digital-маркетинге и веб-аналитике и делаю так, чтобы всё это стало понятным.

20 307 просмотров

Cделал для вас большую подборку материалов для самостоятельного изучения Google Tag Manager. В статье вы найдете всю необходимую информацию по работе GTM — от самых базовых вещей (что такое GTM, какие бывают типы триггеров) до работы с dataLayer и CSS-селекторами.

Добавляйте в закладки, чтобы не потерять.

Если я не добавил стоящий материал, свяжитесь со мной, добавлю.

Приступим!

Знакомство с Google Tag Manager

• Обзор менеджера тегов.
  
• Термины и определения, встречающиеся в работе.
  
• 10 причин начать работу с Google Tag Manager.
• Подготовка к реализации.
• Что такое теги в GTM.
• Основы работы с GTM.
  
• Что такое триггеры в GTM.
• Типы триггеров.
  
• Что такое переменные в GTM.
• Как теги, триггеры, переменные и уровень данных взаимодействуют друг с другом.
  
• Что такое Google Tag Manager и как им пользоваться.
  
• Какие платформы и функции поддерживает GTM.
  

Начало работы

• Регистрация в GTM и установка контейнера.
• Публикация контейнеров.
• Как установить Google Tag Manager на свой сайт.
• Пошаговая настройка Google Tag Manager для начинающих.
• Предварительный просмотр и отладка контейнеров.
  
• Режим отладки в GTM.
  
• Управление доступом к контейнерам.

Структура аккаунта

• Структура аккаунта.
• Администрирование в GTM.
  
• Организация контейнеров.
  
• Рабочие области в GTM.
  
• Папки.
• Среды.

Установка Google Analytics

• Что такое Google Tag Manager и как настроить Google Analytics с его помощью.
  
• Создание и управление тегом Universal Analytics через GTM.
  
• Как установить Google Analytics через Google Tag Manager и не потерять данные при переходе.
• Как проверить, используется ли Google Analytics на веб-странице.

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

• Инструкция: настраиваем цели «Яндекс.Метрики» через GTM.
• Шаблон тега «Яндекс.Метрики» в Google Tag Manager.

Отслеживание времени сессии, копирования текста и скроллинга

• Отслеживание глубины скроллинга и времени на активной вкладке.
• Отслеживание глубины прокрутки.
• Как через GTM в Analytics передать время активности пользователя на странице.
  
• Отслеживание скопированного текста.
• Как настроить цели «Клик по email» и «Копирование email».
  
• Базовые триггеры просмотра страницы в Google Tag Manager: Page View, DOM Ready, Window Loaded.

Установка пикселей «ВКонтакте», MyTarget, Facebook

• Как установить пиксель Facebook и Instagram.
  
• Использование пикселя Facebook с Google Tag Manager.
  
• Установка пикселя MyTarget сайт.
  
• Установка пикселя «ВКонтакте» на сайт.

Отслеживание кликов по элементам сайта и загрузка файлов

• Отслеживание исчезающих элементов с помощью GTM.
• Как использовать CSS-селекторы в GTM.
• Как настроить прослушивание кликов в Google Tag Manager 2.0.
  
• Отслеживание выбранного элемента из выпадающего списка в GTM.
• CSS-селекторы в GTM. Часть I.
  
• Селекторы в jQuery. Часть II.
  
• Отслеживание событий с помощью CSS-селекторов.
  
• Как настроить воронку продаж через GTM.
  
• Отслеживание динамического источника с помощью GTM.
  
• Отслеживание чекбоксов с помощью GTM.
  
• Отслеживание загрузки файлов в «Яндекс.Метрике» и Google Analytics.
  

Отслеживание показателя отказов, гео- и IP-адресов

• Настройка показателя отказов в Analytics через Google Tag Manager — руководство.
• Определение геолокации пользователя с помощью GTM.
• IP-адрес с помощью Google Tag Manager.
  
• Передача IP-адреса в Яндекс.Метрику.
  
• Передача IP-адреса посетителя в Google Analytics.

Настройка электронной торговли и DataLayer

• Что такое стандартная электронная торговля в Google Analytics.
  
• Что такое расширенная электронная торговля в Google Analytics.
  
• Общие сведения о уровнях данных.
  
• Data Layer в Google Tag Manager: Некраткая инструкция.
  
• Настройка стандартной электронной торговли.
• Внедрение расширенной электронной торговли при помощи Google Tag Manage.
• Как в «Яндекс.Метрике» использовать dataLayer из Google Tag Manager.
  
• Отслеживаем эффективность промобаннеров на сайте с помощью Google Tag Manager.
• Тэг «АвтоСобытия», или упрощаем себе жизнь в GTM.
  
• Руководство для разработчика для реализации dataLayer.

Отслеживание форм

• Как настроить аналитику форм с помощью GTM и Google Analytic.
  
• Аналитика форм на сайте — настройка в Google Tag Manager.
  
• Проверка валидации формы в GTM при клике.
• Отслеживание отправки формы с помощью триггера «Видимость» элемента.
• Отслеживание значений полей в GTM.
• Отслеживание окон alert () с помощью GTM.

Цели и пользовательские отчеты

• Пользовательские шаблоны в GTM: разбираемся на примере.
• Инструкция: настраиваем цели «Яндекс.Метрики» через Google Tag Manager.
• Устанавливаем события Facebook на кнопки и формы через GTM.
• Отcлеживание целей и настройка событий GA через GTM.
  

Отслеживание видео

• Отслеживание взаимодействия с видео.
• Простой способ отслеживать встроенное YouTube-видео в Google Analytics.

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

• Как настроить динамический ремаркетинг в Google Ads с помощью GTM.
  
• Динамический ремаркетинг в Facebook — подробный мануал по технической подготовке.
• Как настроить пиксель ретаргетинга «ВКонтакте» на сайте через Google Tag Manager.
  

User ID и Client ID

• Client ID в Google Analytics: что это такое и как настроить.
• Что такое User ID.
• Подробнее об User ID.
• Как настроить функцию User ID.
• Ограничения в отношении функции User ID.
• Два способа получения Client ID Google Analytics в Google Tag Manager.
  
• Как фиксировать максимум реальных ClientID Google Analytics.

Cookie, session и local storage

• Анализируем навигацию посетителей с помощью вкладок браузера (работа с session и local storage).
• Установка и чтение cookie с помощью Google Tag Manager.

Диагностика сайта

• Как найти фейковые 404-страницы с помощью Google Tag Manager.
  
• Как быстро найти ошибки на сайте: проверка важных тегов с помощью GTM и таблиц Google.
  

Расширенные возможности GTM

• Начинаем работать с Google Analytics: App + Web.
• Подстановка ключевой фразы в заголовок сайта через GTM — инструкция.

Дополнительные материалы по GTM

• Google Tag Manager: неочевидные и полезные настройки триггеров.
  
• Ускоряем настройку Google Tag Manager с помощью GTM Tools.
• Плагины и расширения для браузеров GTM.
• «Основы Google Tag Manager» курс от Google Academy.

Еще больше полезных материалов

Возможно вам будет интересно изучить и другие мои статьи:

Больше подобных статей можно читать на моём Telegram-канале
Growth Lab. Пишу о digital-маркетинге и веб-аналитике.

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

Всем знаний!

возможности и настройка ✔️ Блог Webpromo

20.04.2023

Редакция: Дарія Картавченко. Автор: Дария Картавченко

Содержание

1. Что такое менеджер тегов Google Tag Manager?
2. Зачем используют Google Tag Manager?
3. Кому и чем поможет использование Гугл Тег Менеджера?
4. Преимущества и недостатки Гугл Тег Менеджера 
5. Как устроен Google Tag Manager? 
6. Установка Google Tag Manager: универсальный способ 
7. Как настроить Google Analytics с помощью Google Tag Manager? 
8. Как установить пиксель Facebook? 
9. Возможные проблемы работы с Гугл Тег Менеджером
10. Выводы: какие задачи реально решает Гугл Тег Менеджер

Google Tag Manager (GTM) – это бесплатная комплексная система управления тегами. Диспетчер тегов позволяет добавить и настроить теги отслеживания активности пользователей разных систем аналитики на сайт без помощи программистов.

Google Tag Manager – инструмент, используемый для анализа успеха рекламной кампании, тестирования отдельных элементов сайта и корректировки продвижения бренда.

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

• переход по ссылкам;
• нажатие кнопок;
• заполнение формы;
• добавление товаров в корзину;
• удаление товаров из корзины;
• загрузка файлов;
• участие в опросе и о пользовании сайтом;
• скроллинг и т.д.

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

Владельцам небольших сайтов. Благодаря диспетчеру тегов, настройка внешних сервисов на сайте становится проще и позволяет лишний раз не привлекать веб-мастеров.

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

Тег-менеджер полезный сервис, однако есть несколько нюансов:

• установка кода GTM на ваш сайт предполагает, как минимум, знание с верстки. Если таких технических знаний нет, придется обращаться к специалисту или проходить предварительное обучение;
• при работе с Гугл Тег Менеджером следует соблюдать осторожность, чтобы случайно не удалить или не повредить код контейнера GTM. Это не смертельно, однако добавит мороки. Ведь так вы сломаете все теги, которые создали с помощью контейнера. Придется вручную искать и исправлять ошибки.

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

Использование Гугл Тег Менеджера имеет следующие преимущества:

• по уменьшению зависимости от разработчиков сайта: вы можете быстро и просто добавлять маркетинговые теги и управлять ими без помощи IT-специалистов;
• быстрое тестирование и настройка: система позволяет предварительно просматривать, тестировать и настраивать изменения перед размещением их на веб-сайте. Эта функция помогает предотвратить ошибки и уменьшает потребность в тестировании на живом или промежуточном сайте;
• сохранение версий: GTM создает и регистрирует новую версию кода каждый раз, когда вы публикуете изменения. Это позволяет просматривать прошлые и текущие изменения и, при необходимости, возвращаться к предыдущим версиям;
• увеличение скорости работы сайта: использование Диспетчера тегов позволяет сократить код сайта, что положительно влияет на скорость загрузки веб-страниц;
• рабочие области: Тег Менеджер позволяет участникам команды работать одновременно в нескольких рабочих областях, не перезаписывая прогресс друг друга. А использование Tag Manager 360 позволяет предоставить доступ к тегам большего количества пользователей и определить уровень доступа к определенным страницам;
• конфигурация многих популярных инструментов: вы можете легко добавить инструменты и теги отслеживания к коду своего веб-сайта с помощью фрагментов кода или существующих шаблонов (например, для Google Analytics, Pinterest, Google Ads и т.д.) из галереи шаблонов сообщества.

Tag Manager состоит из четырех основных элементов:

• теги;
• триггеры;
• переменные;
• уровень данных.

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

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

Примеры распространенных тегов:

• универсальный код отслеживания Google Analytics или код отслеживания GA4;
• код ремаркетинга Adwords;
• код отслеживания конверсий Adwords;
• пиксели Facebook.

Читайте также: Успейте перейти на Google Analytics 4: чеклист по созданию и настройке

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

Триггеры – это условие запуска определенного тега. Благодаря им Tag Manager понимает когда, где или как делать то, что вы хотите.

Примеры распространенных триггеров:

• просмотр страниц;
• нажатие ссылок;
• представление формы;
• загрузка документа и под.

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

Переменные – это дополнительная информация, которая может потребоваться GTM для работы вашего тега и триггера.

Как использовать переменные Гугл Тег Менеджера?

Переменные используются в двух случаях:

• для хранения данных, используемых при активации триггеров;
• для хранения и передачи данных, используемых при работе тегов.

Во многих случаях для работы достаточно активации постоянно обновляемых встроенных переменных. Доступны следующие категории: Страницы, Утилиты, Ошибки, Клики, Формы, История, Видео, Прокрутка, Видимость.

Что такое уровень данных?

Уровень данных – это объект JavaScript, который используется для передачи информации с веб-сайта в контейнер Менеджера тегов. Благодаря нему можно присваивать значение переменным и запускать активаторы тегов.

Система может обрабатывать следующие категории информации:

• данные о товаре: название товара, цена, категория;
• информация о маркетинговой кампании: источник трафика, средство;
• данные о трансакциях: сумма корзины, дата оплаты;
• информация о клиенте: новый или постоянный клиент.

Чтобы настроить Google Tag Manager, войдите в свой аккаунт Google и перейдите к Tag Manager.

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

Затем введите название учетной записи и выберите страну.

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

Добавьте название контейнера. Ваш контейнер – это фрагмент кода, который вы добавите на свой веб-сайт, чтобы GTM работал. Обычно используют один контейнер для одного сайта. Поэтому название контейнера может быть названием или URL-адресом вашего веб-сайта. После этого выберите подходящую вам «Целевую платформу».

После ввода всех необходимых данных активируется кнопка «Создать». Нажмите ее, чтобы получить аккаунт Google Tag Manager и свой первый контейнер.

Перед вами появятся два всплывающих окна – условия использования и фрагменты кода, которые нужно добавить на свой сайт, чтобы завершить установку GTM. Код Google Тег Менеджера делится на 2 части.

Первую часть кода нужно вставить в тег . Вторую – после тега .

Заметьте: «Вторая часть кода – резервная. Она необходима только в том случае, если на сайте заблокированы скрипты JavaScript. Тогда, в случае блокировки первой части, вторая сработает и запустит GTM. Однако в 99% случаев сейчас это не актуально, ведь скрипты уже почти никто не блокирует», – объясняет веб-аналитик Webpromo Михаил Кулик.

Можно ли поставить первую часть кода не в ?

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

Пожалуй одно из первых, что вы захотите настроить с помощью Google Tag Manager – это Google Analytics.

Как это сделать?

1. зарегистрировать аккаунт  Google Analytics ;
2. создать переменную типа « Настройки Google Analytics ».
3. создать тег со следующими настройками:

тип тега – Universal Analytics;

тип отслеживания – Просмотр страницы;

настройка Google Analytics – в этом пункте выбираем переменную, созданную на предыдущем пункте или вводим идентификатор ресурса в формате UA-XXXXXXXX-X;

в пункте Триггеры выбираем All Pages и нажимаем кнопку «сохранить», чтобы новый тег появился в вашей рабочей области.

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

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

Готово! Google Analytics собирает данные с вашего сайта.

Читайте также: Как открыть доступ к Google Analytics: подробная инструкция

Сначала стоит создать свой Facebook Pixel в Event Manager Meta Business.

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

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

После создания Pixel переходите к установке его на ваш сайт.

Есть два варианта настройки: автоматическая и ручная.

Для ручного следует выполнить следующие действия:

1. выберите пункт “Добавить код пикселя на сайт вручную” и скопируйте полученный код;
2. откройте рабочую область Google Tag Manager и создайте тег со следующими настройками:

•       Тип тега – пользовательский HTML;
•       в поле HTML вставить код Pixel;
•       в Настройках активации тега выбрать один раз на страницу;
•       в пункте Триггеры выбираем All Pages.

После этого остается только опубликовать тег по схеме, описанной в разделе о настройках Google Analytics.

Для автоматической настройки следует выбрать «использование партнерской интеграции». Среди партнеров Meta выбирать вариант установки через Google Tag Manager. Предоставьте доступ к GTM (укажите email, по которому регистрировались в диспетчере тегов и нажмите «Разрешить»), укажите нужный аккаунт и контейнер.

Пиксель установлен. Проверьте, появился ли он среди тегов в контейнере Tag Manager.

Читайте также: Создание и настройка Business Manager: пошаговая инструкция

1.Неправильный код GTM или его отсутствие на сайте

Если вы работаете со многими сайтами через Google Tag Manager, то по ошибке можете перепутать код необходимого контейнера. Сравните или совпадает идентификатор контейнера GTM, в котором вы работаете, с кодом gtm, установленном на сайте.

2. Установили код Google Tag Manager и не убрали код Google Analytics

Если вы решили работать с Google Analytics через GTM, то обязательно проверьте, удалили ли вы ранее установленный код GA.

3. Не внесли изменения в режим предварительного просмотра

Например, при проверке корректности работы новых тегов перед публикацией вы заметили ошибку. Поэтому вы возвращаетесь в гугл тег менеджера и исправляете его. После этого просматриваете сайт, а ошибка не исчезла. Что произошло? Вероятно, вы забыли обновить режим работы предварительного просмотра. Не забывайте об этом моменте.

4. Забыли опубликовать настройки

Представим, что вы настроили все теги, триггеры, переменные, проверить корректность их работы и убедились, что все работает правильно. Правда, через некоторое время вы заходите в Google Analytics и не видите статистику новой настройки через GTM. Что произошло? Вы забыли самое главное – опубликовать изменения настроек в Google Tag Manager.

Запомните: После внесения изменений и их проверки, всегда нажимайте кнопку “отправить” в вашей рабочей области Google Тег Менеджера. В новом окне добавляйте название новой версии и нажмите «опубликовать». Только после этого новые настройки заработают на вашем сайте.