Занятие №5. Начало работы с Google Tag Manager

• Пятое занятие курса Яндекс Метрики посвящено работе с Google Tag Manager GTM.  

• План занятия включает обсуждение GTM, его преимуществ и недостатков, сущностей, переменных, триггеров и тегов.  

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

• В домашнем задании нужно создать контейнер GTM, установить его на сайт и проверить корректность установки.  

• В случае работы на тестовом проекте, техническое задание на установку GTM аналогично заданию для Яндекс Метрики.  

• Аудитория разделилась: одни знают GTM, другие нет.  

• Цель занятия - рассказать о базовых элементах и сущностях GTM.  

• Важно знать дополнительные сервисы и продукты Google, так как они уникальны и полезны.  

• GTM - бесплатный инструмент для управления страничными тегами на сайте или в мобильном приложении.  

• Страничные теги - это коды на языке программирования JavaScript.  

• GTM позволяет легко управлять различными тегами, такими как Google Analytics, ВКонтакте и другие.  

• GTM полезен для управления сложными событиями и параметрами визитов.  

• Позволяет избежать дублирования ошибок и упрощает процесс настройки аналитики.  

• GTM не является счетчиком аналитики, а системой управления тегами.  

• GTM экономит время разработчиков и маркетологов, позволяя самостоятельно решать задачи.  

• Позволяет избегать дублирования ошибок и тестировать настройки аналитики.  

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

• Позволяет отслеживать больше событий, чем Яндекс Метрика.  

• Можно отслеживать ролики на YouTube, скроллинг, отправку форм и другие действия.  

• Снижает необходимость изменения исходного кода сайта.  

• Возможность корректировки настроек при изменениях в коде сайта.  

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

• Необходимость базовых навыков в настройке счетчиков аналитики и визуализации данных.  

• Возможность использования Google Tag Manager для различных задач.  

• Передача данных между аналитическими и рекламными инструментами.  

• Акцент на Яндекс Метрике, но также рассмотрение Google Analytics.  

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

• Google Tag Manager как предпочтительный инструмент из-за его популярности и доступности.  

• Законодательные ограничения на использование Google Analytics в некоторых странах.  

• Google Tag Manager популярен благодаря большому сообществу и доступности материалов.  

• Возможность использования для различных проектов с разной посещаемостью.  

• Удобство использования для проектов с несколькими аналитическими инструментами.  

• Google Tag Manager остается популярным инструментом для аналитики.  

• Рекомендации по использованию Google Tag Manager для небольших проектов.  

• Возможность бесплатного использования и простота настройки.  

• Экономит время, снижая зависимость от разработчиков.  

• Позволяет управлять тегами в едином интерфейсе.  

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

• Поддерживает A/B тестирование через Optimize.  

• Отслеживает сложные браузерные события, такие как клики правой кнопкой мыши и клавиатурные события.  

• Позволяет отслеживать ошибки на сайте с помощью встроенных триггеров.  

• Имеет режим отладки для предотвращения ошибок и проверки событий.  

• Позволяет создавать и публиковать версии сайта для разовых акций.  

• Поддерживает откат к предыдущим версиям для устранения ошибок.  

• Работает как резервная копия сайта, позволяя откатываться к предыдущим версиям.  

• Google Tag Manager является контейнером, объединяющим все коды в один интерфейс.  

• Все коды, включая пиксели и метрики, размещаются внутри контейнера.  

• Позволяет работать с кодами через единый интерфейс, что упрощает управление.  

• Основные сущности: переменные, триггеры и теги.  

• Переменные: ячейки памяти для хранения информации.  

• Триггеры: условия активации событий.  

• Переменные извлекают данные с сайта.  

• Примеры: скопированный текст, значение поля поиска, URL страницы.  

• Переменные делятся на пользовательские и встроенные.  

• Триггеры активируют события на основе действий пользователей.  

• Вопросы: когда и где фиксировать события.  

• Примеры: таймер, отправка формы, валидация формы.  

• Теги передают данные в различные системы.  

• Примеры: Facebook, Яндекс Метрика, Google Analytics.  

• Теги имеют свои конфигурации и шаблоны.  

• Интерфейс: теги, триггеры, переменные.  

• Переменные могут использоваться в триггерах.  

• Примеры использования переменных в триггерах и тегах.  

• Для работы с Google Tag Manager необходимы знания программирования и разметки.  

• Для гибкой работы с HTML и JavaScript необходимо изучать HTML и CSS, а также JavaScript.  

• Рекомендуется использовать библиотеку jQuery для упрощения кода.  

• В Google Tag Manager поддерживаются функции и конструкции из jQuery.  

• В 2018 году вышла книга по Google Tag Manager, в 2020 году - обновленная версия.  

• В 2023 году выйдет обновленная версия с новыми инструментами и функционалом.  

• Рекомендуется посмотреть курс по Google Tag Manager 2020 года для глубокого понимания триггеров, тегов и переменных.  

• Видеоматериалы лучше воспринимаются визуально, чем текстовая информация.  

• Новый онлайн-курс по Google Tag Manager включает более 100 видеороликов.  

• Курс доступен для параллельного прохождения с текущим обучением.  

• Необходимо создать Google Tag Manager контейнер и опубликовать его на сайте.  

• Для создания контейнера нужно создать аккаунт на Gmail и установить код на сайт.  

• Код состоит из двух частей: одна часть устанавливается в head, другая - в body.  

• После установки кода нужно опубликовать его на сайте.  

• Для отладки и проверки корректности установки используется расширение Google Tag Assistant.  

• Демонстрация установки кода на сайт с использованием Notepad++.  

• Создание аккаунта на Gmail и настройка контейнера.  

• Установка кода на все отслеживаемые страницы сайта.  

• Демонстрация вставки кода в HTML и JavaScript.  

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

• Очистка кэша и логов для обновления кода.  

• Демонстрация изменения кода после очистки кэша.  

• Установка расширения Google Tag Manager в браузер.  

• Активация расширения и обновление страницы.  

• Обнаружение двух кодов: новый и старый.  

• Публикация изменений в Google Tag Manager.  

• Установка и настройка Google Tag Manager.  

• Удаление старого кода и настройка через Google Tag Manager.  

• Обзор интерфейса Google Tag Manager.  

• Управление тэгами и версиями.  

• Администрирование и управление доступом.  

• Выдача доступа на уровне аккаунта и контейнера.  

• Добавление пользователей и настройка прав доступа.  

• Демонстрация приглашения и доступа к контейнеру.  

• Назначение прав доступа на уровне контейнера.  

• Права на чтение, редактирование, одобрение и публикацию.  

• Возвращение в интерфейс и завершение настройки.  

• Меню включает обзорную вкладку, где дублируется информация из левой части.  

• Вкладка "Обзор" показывает изменения в рабочей области, такие как создание триггеров и переменных.  

• Можно отменить действия, нажав на троеточие, и вернуться к исходному состоянию.  

• Версии имеют даты и ответственных авторов.  

• Можно использовать предыдущие версии, переименовывать и удалять их.  

• Для работы с Google Tag Manager необходимы права доступа.  

• Папки позволяют организовать элементы, такие как теги и триггеры, по категориям.  

• Можно создавать папки для разных аналитических систем, таких как Google Analytics и Яндекс Метрика.  

• Элементы можно перемещать между папками для удобства.  

• Шаблоны — это сторонние решения, созданные разработчиками и программистами.  

• В галерее сообщества можно найти и использовать шаблоны для тегов и переменных.  

• Использование сторонних решений требует осторожности и проверки их надежности.  

• В настройках контейнера можно переименовать название и настроить режим согласия Google.  

• Режим согласия позволяет блокировать тэги, если пользователь отказывается от использования файлов куки.  

• В Google Tag Manager можно настроить режим согласия для конкретных тегов.  

• Режим согласия блокирует тэги, если пользователь отказывается.  

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

• Режим согласия помогает соблюдать законы и избегать исков.  

• Режим согласия лучше использовать в паре с платформами, такими как NetFlix и Spotify.  

• Плашки на сайтах показывают, какие файлы куки собираются и для чего.  

• Пользователи могут отказаться от использования файлов куки через плашки.  

• Импорт и экспорт позволяют быстро переносить настройки между контейнерами.  

• Можно экспортировать данные в файл JSON и импортировать их в новый контейнер.  

• Это удобно для передачи настроек между агентствами и заказчиками.  

• Охват тэга позволяет проверять, установлены ли коды Google Tag Manager на страницах.  

• Можно добавлять URL страниц для проверки.  

• Рабочие области позволяют нескольким специалистам работать над разными задачами в одном проекте.  

• В Google Tag Manager можно создавать дополнительные рабочие области.  

• Рабочие области позволяют каждому специалисту работать над своими задачами.  

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

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

• Изменения в рабочей области не видны другим пользователям.  

• После публикации изменений рабочая область обнуляется.  

• При обновлении рабочей области изменения не теряются.  

• Рабочие области позволяют работать параллельно без конфликтов.  

• После публикации изменений происходит синхронизация рабочих областей.  

• Можно искать сущности по названию.  

• Поиск доступен в каждом разделе: теги, триггеры, переменные.  

• Переменные в Google Tag Manager — это ячейки памяти для хранения информации.  

• Переменные могут быть константами и изменяться в зависимости от действий на сайте.  

• Переменные используются в триггерах и тегах.  

• Встроенные переменные активируются галочками.  

• Пользовательские переменные требуют настройки и могут содержать код на JavaScript.  

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

• Пользовательские переменные позволяют извлекать уникальные идентификаторы пользователей и значения из ссылок.  

• Константы сохраняют неизменное значение, в отличие от динамических переменных.  

• Пользовательские переменные полезны для сайтов на конструкторе Tilda для отправки данных в Яндекс Метрику.  

• Возможность передачи идентификатора формы и её названия в удобочитаемом виде.  

• Использование таблиц поиска для передачи данных.  

• Применение сторонних решений из галереи шаблонов Google Tag Manager.  

• Переход в контейнер Google Tag Manager и удаление ненужных данных.  

• Активация всех переменных для работы с Google Tag Manager.  

• Категории переменных: страницы, утилиты, ошибки, клики, формы, история, видео, прокрутка, видимость.  

• Использование Google Assistant для работы с режимом отладки.  

• Добавление параметра GT_DEBUG в ссылку для отслеживания заходов.  

• Проверка корректности настроек в режиме отладки.  

• Активация встроенных переменных и их отображение в интерфейсе.  

• Пять событий: контент, контейнер, DOM Ready, Window Loaded, Window Unloaded.  

• Важность понимания значений переменных в определенный момент времени.  

• Триггеры и их влияние на значения переменных.  

• Примеры триггеров: прокрутка страницы, клики, отправка формы.  

• Передача значений переменных в Яндекс Метрику.  

• Создание пользовательских переменных вместо активации встроенных.  

• Примеры пользовательских переменных: URL навигации, элементы страницы, утилиты, данные контейнера.  

• Указание запроса и метки для пользовательских переменных.  

• Пример использования переменной "yum content" в Google Tag Manager.  

• Переменная принимает значение только при наличии в адресе страницы.  

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

• Пример извлечения значения куки с помощью пользовательской переменной.  

• Переменная "собственный файл куки" позволяет извлекать значения куки.  

• Пример использования для Google Analytics и Яндекс Метрики.  

• Переменная автоматического события позволяет отслеживать клики по элементам.  

• Пример создания триггера для отслеживания кликов по кнопке "купить".  

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

• Переменная "собственный код JavaScript" позволяет извлекать значения полей формы.  

• Пример использования конструкции для извлечения значения поиска.  

• Переменная может быть использована в параметрах визита Яндекс Метрики.  

• Встроенная переменная "page URL" позволяет извлекать значение URL страницы.  

• Пример использования для передачи параметров визита в Яндекс Метрику.  

• Использование встроенной переменной для упрощения кода и передачи данных.  

• Триггеры активируют или блокируют теги в Google Tag Manager.  

• Они позволяют активировать теги на всех страницах или блокировать их на определенных страницах.  

• Для запуска тега должен быть хотя бы один триггер, который может принимать значения true или false.  

• Триггер выполняется, если его значение истинно и выполняются все условия.  

• Значение переменной сравнивается с заданным в триггере.  

• Тип триггера представляет собой комбинацию события Google Tag Manager и типа взаимодействия.  

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

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

• Также можно использовать триггер для передачи событий при загрузке объектной модели документа и полной загрузке страницы.  

• На следующем уроке будет обсуждаться объектная модель документа.  

• Триггеры позволяют активировать теги в определенные моменты загрузки страницы.  

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

• Отслеживание видео на YouTube, включая перемотку, остановку и процент просмотренного видео.  

• Глубина прокрутки срабатывает при прокрутке страницы.  

• Видимость элемента срабатывает при отображении элемента на странице.  

• Стандартный триггер, срабатывающий при отправке формы.  

• Не все отправки формы можно отслеживать этим триггером.  

• Теоретическая часть и практическое занятие по отслеживанию событий.  

• Используется для отслеживания нескольких условий на одной странице.  

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

• Можно использовать для отправки данных в счетчик аналитики.  

• Отслеживание изменений в истории URL.  

• Используется для динамически подгружаемого контента.  

• Редко используется маркетологами, больше для отладки разработчиками.  

• Срабатывает на события, заданные пользователем.  

• Поддерживается многими системами аналитики.  

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

• Блокируют выполнение тегов, чтобы не передавать информацию в Яндекс Метрику.  

• Триггеры активации запускают передачу данных.  

• Можно исключить определенные страницы или категории.  

• Можно задавать условия для работы триггеров.  

• Примеры: работа на главной странице, на страницах определенной категории.  

• Важно понимать интерфейс Google Tag Manager для эффективного использования.  

• Пять состояний загрузки страницы: контент, контейнер, лоу, дум-дум, виндоу лоу.  

• Контейнер лоу используется для загрузки счетчика и скриптов.  

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

• Пример сайта с высокой нагрузкой, такого как Сокер.ру.  

• Загрузка страницы и проверка состояния триггеров.  

• Обсуждение загрузки страницы и значений в Google Analytics.  

• Различие между загрузкой скелета страницы и полной загрузкой.  

• Важность понимания разницы между этими событиями для триггеров.  

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

• Создание триггеров для отслеживания кликов по кнопкам и ссылкам.  

• Пример создания триггера для кнопки "Перейти в корзину".  

• Использование условий для фильтрации кликов по определенным элементам.  

• Пример добавления условий для отслеживания кликов по кнопке "Перейти в корзину".  

• Объединение условий в триггере для более точного отслеживания.  

• Создание триггера для отслеживания событий на YouTube.  

• Использование встроенных переменных для каждого типа триггера.  

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

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

• Пример отслеживания отправки формы через триггер в Google Analytics.  

• Различные способы отслеживания отправки формы и их особенности.  

• Отслеживание состояния элементов на странице.  

• Пример: появление уведомления после отправки отзыва.  

• Настройка триггера для отслеживания изменений DOM.  

• Использование селекторов для выбора элементов.  

• Правила запуска триггера: один раз на страницу, минимальный процент видимости.  

• Регистрация изменений DOM для отслеживания новых элементов.  

• Ввод данных и отправка отзыва.  

• Появление триггера на шкале событий.  

• Отслеживание элементов, которые ранее не были видны.  

• Настройка триггера на интервал времени.  

• Пример: фиксация события через пять секунд.  

• Использование триггеров для отслеживания времени на странице.  

• Теги как фрагменты JavaScript-кода для сбора данных.  

• Разделение тегов на три вкладки: рекомендуемые, специальные и сторонние.  

• Использование пользовательского тега для Яндекс Метрики.  

• Пользовательский тег для передачи данных в Яндекс Метрику.  

• Удаление кода Яндекс Метрики из исходного кода страницы.  

• Настройка триггера для отслеживания событий на всех страницах.  

• Отслеживание просмотра видео на YouTube.  

• Использование встроенных переменных для передачи данных.  

• Неофициальный шаблон тега для Яндекс Метрики.  

• Создание событий для отслеживания отправки формы.  

• Вставка кода в пользовательский тег.  

• Настройка триггера для отслеживания видимости элемента.  

• Проверка работы триггера в Яндекс Метрике.  

• Обновление кода для корректной работы.  

• Наблюдение за событиями в Яндекс Метрике.  

• На шкале событий отображается информация о событиях.  

• Цель "отзыв" активируется при нажатии на элемент.  

• Яндекс Метрика отображает информацию о триггерах и передаваемых данных.  

• Уровень данных позволяет передавать несколько значений в одном элементе.  

• Уровень данных - это массив объектов, который хранит и передает данные с сайта в Google Tag Manager.  

• Эти данные могут передаваться в другие сервисы, такие как Google Analytics и Facebook.  

• Уровень данных помогает передавать информацию о товарах, услугах и категориях.  

• Пример: добавление товара в корзину требует передачи множества значений.  

• Уровень данных позволяет передавать до 300 элементов в одном массиве объектов.  

• Уровень данных используется для передачи данных в Google Tag Manager и другие сервисы.  

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

• Уровень данных позволяет передавать данные в аналитику и другие системы.  

• Программист формирует уровень данных на сайте.  

• Переменная уровня данных позволяет передавать до 300 параметров в одной переменной.  

• Уровень данных удобен для задач электронной торговли и аналитики.  

• Пользователь может менять значения на странице, например, цвет кнопки.  

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

• Уровень данных незаменим при настройке электронной торговли и динамического ремаркетинга.  

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

• Пример с заполнением полей формы будет показан для лучшего понимания.  

• Уровень данных состоит из массива объектов, передаваемых через запятую.  

• Уровень данных может передаваться до или после контейнера Google Tag Manager.  

• В большинстве случаев используется универсальное описание, которое сохраняет значения на странице.  

• Важно учитывать регистр и заключать имена переменных в кавычки.  

• Пример формирования уровня данных для Яндекс Метрики.  

• Пример сайта СРО, где нужно заполнять большие формы для вступления.  

• Использование уровня данных для передачи информации о полях формы в Яндекс Метрику.  

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

• Конструкция уровня данных включает массив объектов и события.  

• Переменные уровня данных должны соответствовать техническим заданиям.  

• Все действия на шкале событий записываются в уровень данных.  

• Использование консоли разработчика для проверки событий уровня данных.  

• Возможность отправки событий на уровень данных через интерфейс Google Tag Manager.  

• Переход в контейнер и переменные уровня данных.  

• Ввод имени переменной и триггера специального события.  

• Создание цели для Яндекс Метрики и передача значений через параметры визитов.  

• Обращение к другой переменной с помощью двойных фигурных скобок.  

• Передача значений между переменными.  

• Активация триггера и проверка работы конструкции.  

• Отправка событий в Яндекс Метрику из консоли.  

• Проблемы с отображением параметров визитов в Google Analytics.  

• Практический пример использования дата-лейера.  

• Добавление конструкции дата-лейера для лупы.  

• Передача статического параметра в дата-лейер.  

• Проверка работы события и передача данных в Яндекс Метрику.  

• Активация расширения для отображения событий электронной торговли.  

• Пример событий на шопике и их отображение в уровне данных.  

• Передача данных о товарах и их использование в аналитических системах.  

• Демонстрация работы с событиями, связанными с удалением и покупкой товаров.  

• Использование дата-лейра для хранения и извлечения параметров и значений.  

• Пример с фейковым тестовым событием для демонстрации возможностей.  

• Режим отладки помогает проверить правильность настройки тегов, триггеров и переменных.  

• Возможность локализации проблем перед публикацией контейнера.  

• Важность установки расширения Google Assistant для корректной работы режима отладки.  

• Возможность делиться ссылками на режим отладки через Telegram.  

• Пошаговая инструкция по созданию и отправке ссылок для помощи другим пользователям.  

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

• Публикация контейнера после отладки для доступности обновлений для всех пользователей.  

• Домашнее задание: создать контейнер Google Tag Manager, установить его на сайт и опубликовать.  

• Завершение урока и прощание с аудиторией.