— 11 оценок
Google Tag Manager (GTM) — перспективное решение от Google, которое позволяет размещать пользовательские скрипты на страницах сайта без непосредственного вмешательства в его код. GTM дает возможность не только легко добавлять и обновлять скрипты сервисов Google на вашем сайте, но и задавать правила активации различных тегов. Фактически, все, что вам нужно — аккаунт сервиса GTM и единичный доступ к коду сайта. Все остальные настройки производятся через удобный пользовательский интерфейс и не требуют участия IT-шников. На примере сайта нашего клиента я покажу, как настроить диспетчер тегов и на что обратить пристальное внимание.
Итак, единственное действие, которое будет требовать доступа к коду сайта — это само размещение скрипта GTM, так называемого “контейнера”.
Разместив код GTM, мы получаем мощный и готовый к работе инструмент. Теперь мы можем помещать в контейнер GTM как готовые функции, которые уже предусмотрел Google (GA, события, транзакции, ремаркетинг и др.), так и свои скрипты, которые можно размещать как произвольный код (“Яндекс.Метрика”, например). И все это через интуитивно понятный веб-интерфейс, без доступа к коду сайта. Весомым преимуществом будет и то, что клиент не сможет испортить размещенные скрипты. Ну, разве что сам код контейнера :)
Установка и настройка диспетчера тегов Google
А теперь приступим к самому процессу интеграции GTM с вашим сайтом. Все скриншоты ниже были сделаны во время настройки диспетчера тегов для нашего клиента “Интернет-магазина напольных покрытий”.
Размещение кода контейнера
Сначала необходимо зарегистрироваться в сервисе GTM: tagmanager.google.com. После введения e-mail и пароля аккаунта Google, который вы будете использовать в этих целях, создаем аккаунт в GTM. Это верхний уровень иерархии в сервисе.
Укажите название аккаунта и, при желании, установите флажок «Передавать анонимные данные в Google и другие службы».
Именем для контейнера может служить адрес вашего сайта. Далее указываем, где будет расположен контейнер (в нашем случае это “веб-страницы”). Кликаем на кнопку “Создать”. Вам будет предложено согласиться с условиями использования. Тут выбора нет, соглашаемся :)
В результате получаем код контейнера:
Теги добавим позже.
Теперь скопируйте предложенные коды и разместите первый фрагмент в раздел <head> кода страницы как можно ближе к началу. Второй вставьте сразу после открывающего тега <body>.
В дальнейшем, код контейнера можно найти с помощью меню: Администрирование → Установить диспетчер тегов Google.
Поздравляю! На этом работа, которая требует доступа к сайту, завершена. Все остальные действия проводятся только в интерфейсе GTM.
Понятия в GTM
Для понимания работы сервиса GTM разберем основные понятия, с которыми нужно будет работать: теги, триггеры и переменные.
Чтобы создать новый тег, триггер или переменную, нужно перейти в соответствующую вкладку контейнера:
Переменная
Переменная — это параметр, который может иметь различные значения. Чтобы отследить событие, необходимо определить нужную переменную и указать соответствующее значение.
Например, нужно отследить переход по ссылке. Переменная — это любой URL адрес, а значение переменной — тот адрес, переход по которому необходимо отследить.
Триггер
Триггер — это условия выполнения тега. Его можно установить как при создании самого тега, так и отдельно. Потом лишь нужно будет «приклеить» правило к соответствующему тегу.
Тег
Тег – это, по сути, функция или скрипт, который вы хотите выполнить.
Разберем более детально все эти понятия на примере установки тега GA.
Установка тега Google Analytics
В GTM уже «из коробки» доступен основной набор переменных (встроенные). Кроме того, есть возможность создать и собственные переменные (пользовательские), если предложенных в GTM недостаточно.
Для тега Google Analytics нам необходимо создать пользовательскую переменную с номером нужного нам счетчика. Заходим на вкладку “Переменные”, в разделе “Пользовательские переменные” нажимаем на кнопку “Создать”.
В открывшемся окне указываем тип переменной “Настройки Google Analytics”. В графу “Идентификатор отслеживания” копируем номер счетчика GA. Найти его можно в настройках в интерфейсе GA: Администратор → Ресурс → Код отслеживания. Поле “домен cookie” оставляем без изменений. Даем название переменной (для удобства используем GA) и нажимаем сохранить.
Далее, переходим на вкладку тегов, чтобы создать новый тег. Выбираем тип “Google Аналитика – Universal Analytics”. Тип отслеживания не меняем, по умолчанию установлен нужный нам “Просмотр страницы”. В графе “Настройки Google Analytics” указываем созданную ранее пользовательскую переменную — {{GA}} и переходим к настройке условия, которое будет активировать тег. Триггер активации указываем “All Pages”, поскольку нам необходимо, чтобы код GA выполнялся на всех страницах сайта. Называем тег “Google Analytics” и сохраняем.
Перед тем как опубликовать в коде сайта созданный нами тег, его необходимо проверить на корректность срабатывания через специальную функцию GTM “Предварительный просмотр”. Кнопка расположена в правом верхнем углу программы.
После активации этой функции, необходимо будет зайти на свой сайт, либо обновить страницу, если он уже открыт на соседней вкладке. В нижней части окна откроется панель с информацией о тегах, которые были активированы.
Как видно на скриншоте, тег Google Analytics сработал сразу же при загрузке страницы. Следовательно, тег работает корректно и его можно опубликовать в коде сайта. Чтобы выйти из режима предварительного просмотра, необходимо вернуться в GTM и отменить соответствующую функцию.
После этого нам нужно применить все совершенные изменения на сайте, чтобы они начали работать.
В GTM есть понятие версий. Создавая версию, мы фиксируем вариант контейнера с заданными тегами и правилами их выполнения. Если в дальнейшем наши действия нарушат работу каких-либо тегов, мы сможем легко вернуться к рабочей версии контейнера.
Нажимаем кнопку «Отправить». В правом верхнем углу страницы появится окно с общим числом изменений, которые будут опубликованы.
Указываем название версии контейнера. В нашем случае — это первая рабочая версия, поэтому мы укажем единицу. Далее, нам необходимо описать краткое содержание контейнера либо указать, что именно мы здесь сделали. Такая система поможет нам быстро найти ошибку в случае некорректной работы тегов при последующих публикациях. И публикуем наш контейнер.
Чтобы проверить, начался ли сбор статистики в Google Analytics, необходимо зайти на сайт и перейти в “Отчет в реальном времени”. Должно отобразится посещение сайта.
Настройка отслеживания событий GA
Напомню, что данный мануал основан на решении для сайта pidloga.biz (интернет-магазин напольных покрытий). Наша задача: отслеживать формы обратной связи, добавление товаров в корзину и клики по номеру телефона, чтобы анализировать эффективность наших рекламных кампаний.
Мы настроим следующие события для GA (категория, действие, ярлык):
- Номер телефона, Клик;
- Кнопка “Купить”, Клик;
- Форма “Перезвонить мне”, Отправка;
- Форма “Купить в 1 клик”, Отправка;
- Форма “Обратный звонок”, Отправка, Внизу страницы;
- Форма “Обратная связь”, Отправка, Внизу страницы;
- Форма “Обратная связь”, Отправка, Страница контактов.
Для лучшего понимания процесса можно подобрать себе напольное покрытие на сайте pidloga.biz.
Важно: далее я не стану постоянно писать о создании новой версии и ее публикации. Это стоит делать после внедрения каждого нового тега.
Теория
После того как Google внедрил в GTM автоматическое прослушивание событий, настройка их отслеживания совершенно не требует вмешательства в код сайта.
Специальные теги прослушивания событий включаются для всех страниц сайта и начинают собирать данные об активности посетителя. Настроив отслеживание события с учетом определенных критериев, мы сможем получать данные об интересующих нас активностях.
Ознакомьтесь со справкой Google для лучшего понимания вопроса. — Разместить так
Нас интересует три тега прослушивания событий: прослушивание кликов, прослушивание кликов по ссылкам и прослушивание форм.
1) Клик по номеру телефона
Отслеживание кликов по ссылкам используется чаще всего для фиксации кликов по номеру, электронной почте и внешним ссылкам.
Сперва нам нужно выделить ссылку, клики по которой необходимо отслеживать, и вызвать консоль (кликнуть правой кнопкой мыши и выбрать “Просмотреть код”). Скопировать значение или фрагмент значения атрибута href. Например, для отслеживания кликов по всем номерам телефонов необходимо скопировать фрагмент “tel:”, для отслеживания кликов по определенному номеру — скопировать значение полностью.
Поскольку у нас на сайте два номера телефона, нам необходим фрагмент “tel:”.
Далее переходим на вкладку «Триггеры» и нажимаем на кнопку “Создать”. В открывшемся окне указываем тип триггера “Клик — Только ссылки”, в условиях активации выбираем пункт “Некоторые клики по ссылкам”. В появившемся выпадающем меню создаем правило, при котором будет срабатывать триггер. Встроенная переменная Clic URL должна начинаться с выбранного ранее фрагмента атрибута href. Указываем название триггера и сохраняем его.
Переходим на вкладку теги. Создаем тег с названием “Клик по номеру”. Выбираем тип тега “Google Analytics — Universal Analytics”, изменяем тип отслеживания с «Просмотр страниц» на «Событие» и подключаем пользовательскую переменную с идентификатором отслеживания GA.
Далее указываем параметры отслеживания события:
- Категория: Номер телефона;
- Действие: Клик.
Теперь подключим созданный ранее триггер и тем самым зададим условие для выполнения тега.
Сохраняем, проверяем срабатывание тега через “Предварительный просмотр”, создаем версию, публикуем. Через минуту-две (GTM может подхватить новые настройки с некоторым опозданием) проверяем получение события в GA в разделе “Отчёты в режиме реального времени”, подраздел «События».
2) Клик по кнопке “Купить”
Отслеживание кликов по элементам используется чаще всего для фиксации кликов по кнопкам при добавлении товара в корзину, списки желаний и сравнения. В нашем случае — это первый вариант.
Для настройки отслеживания кликов по элементам, как и в первом случае, нам необходимо найти HTML тег, соответствующий нужной кнопке, и скопировать значение атрибута id или class. Если использовать значение атрибута id или class нельзя (например, тег не активируется или значение class не является уникальным), необходимо скопировать CSS-селектор элемента.
Важно: HTML тег кнопки “купить” технически больше относится к отслеживанию кликов по ссылкам (при нажатии на кнопку открывается мини-окно корзины сайта), поэтому нам необходим атрибут href.
Поскольку нам нужно отслеживать клики по кнопке “купить” без привязки к конкретной странице или определенному товару, часть фрагмента с указанием ID нам не нужна. Будем использовать — /basket_popup/?ELEMENT.
Когда мы определили атрибут для встроенной переменной, можем приступать к созданию триггера. Тип триггера указываем “Клик — Все элементы”, в условиях активации выбираем пункт “Некоторые клики” и задаем условия для срабатывания. Выбираем встроенную переменную Click URL, которая должна содержать часть атрибута href: /basket_popup/?ELEMENT. Называем наш триггер “Клик по кнопке “Купить”” и сохраняем его.
Далее создаем новый тег. Тип тега, тип отслеживания указываем такие же, как и для прошлого события. Прописываем соответствующую категорию, действие и подключаем переменную с идентификатором отслеживания аналитики. Не забываем указать триггер активации, созданный ранее.
Событие готово.
3) Отправка формы “Перезвонить мне”
В верху сайта есть форма, в которой посетитель указывает свой номер телефона и отправляет его менеджеру по продажам. Нам нужно повесить выполнение события на эту форму.
Поскольку отправка данной формы должна срабатывать только тогда, когда посетитель правильно заполнил поле с номером телефона, нам необходимо создать пользовательскую переменную с собственным JavaScript-кодом, который будет проверять выполнение этого условия. Процесс проверки данных на соответствие определенным условиям называется валидацией.
Заходим на вкладку “переменные”. В разделе “пользовательские переменные” нажимаем кнопку “создать”. Выбираем тип переменной “Собственный код JavaScript” и в специальное поле вставляем нужный нам скрипт, который будет делать проверку правильности заполнения формы и отправлять соответствующие данные триггеру. При правильном заполнении формы, это будет “true”, при неправильном — “false”. Называем нашу переменную и сохраняем ее.
Теперь необходимо создать условие активации тега отправки формы.
Создаем триггер. Выбираем тип “Отправка формы”, в графе “Условия активации триггера” указываем “Некоторые формы”. Далее нам нужно настроить триггер так, чтобы он срабатывал, когда выполняется одновременно два условия: посетитель правильно указал свой номер телефона и нажал на кнопку “Перезвонить мне”. Для выполнения первого условия нам понадобится созданная ранее пользовательская переменная (Валидация строки номера вверху страницы), которая содержит значение “true”. Для выполнения второго условия нам понадобится встроенная переменная “Form Element”, которая должна соответствовать селектору CSS кнопки “Перезвонить мне”. Называем триггер, например, “Отправка формы “Перезвонить мне”” и сохраняем его.
На последнем этапе мы будем создавать тег, для корректной работы которого мы подготовили все условия.
Все настройки, кроме категории и действия, указываем по примеру прошлых двух событий. Подключаем триггер “Отправка формы “Перезвонить мне””, который мы только что настроили, указываем название нашего тега и сохраняем его. Тег для отслеживания отправки формы “Перезвонить мне” готов. Не забываем проверить корректность его работы через “Предварительный просмотр” и опубликовать на сайт.
Событие работает.
Остальные события на отправку формы настроены по тому же принципу. Все тонкости настройки показаны на последнем примере, потому расписывать остальные нет смысла.
В итоге у нас должно быть 7 настроенных событий для отслеживания действий посетителей на сайте:
Постфактум
Итак, на выходе мы получаем статистику поведения пользователей в процессе выбора напольного покрытия, с которой мы теперь можем работать в Google Analytics и Google Ads:
Стоят ли эти данные времени, потраченного на настройку GTM? Однозначно — да.
Хочеться отметить, что у Менеджера тегов есть свои недостатки. Он не всегда работает именно так, как ты того пожелаешь. Причем сложностей возникает масса, начиная с того, что созданный тег не работает без каких-либо видимых причин, заканчивая тем, что контейнер может повредиться при обновлении кода и работа всех систем отслеживания на сайте может сбиться.
С другой стороны, устранив все неполадки, ты получаешь крутой инструмент для работы и последующая настройка занимает значительно меньше времени. Нет нужды привлекать программистов или дергать клиента, тратить время на ожидание внедрения или согласования.
У вас остались вопросы? Буду рад ответить на них в комментариях!
