Google Tag Manager: как настроить и установить на сайт

Google Tag Manager – это универсальный инструмент, который помогает в управлении кодами отслеживания и аналитики. К ним можно отнести такие элементы учёта, как счётчики, пиксели и другие внешние скрипты, призванные отслеживать и подсчитывать потоки трафика.

Инструмент позволяет в удобной форме работать с телом сайта, добавляя теги. Вам больше не придётся копаться в коде страницы, пытаясь правильно разметить нужный скрипт. Простой и понятный визуальный интерфейс ощутимо ускоряет процесс настройки и отладки ресурса. 

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

А ещё Google Tag Manager помогает оперативно вносить изменения. Всего в пару кликов вы сможете добавить новые формы и кнопки или менять настройки уже существующих. Всё это помогает эффективнее работать с различными форматами рекламы и глубже анализировать состав имеющегося у вас канала трафика.

Для чего нужен Гугл Тег Менеджер?

Так как Google Tag Manager работает с тегами и скриптами, понять его назначение будет легче в сравнении с более традиционными инструментами. Начнём с преимуществ инструмента:

1. Доступная интеграция практически любых тегов. Готовые решения включают не только шаблоны Google Analytics, но и большинство популярных сервисов рекламы и аналитики. Для более узкоспециализированных задач есть шаблоны «Пользовательский HTML» и «Пользовательское изображение». Они закрывают все пробелы, которые могли допустить разработчики инструмента.

2. Отладка тега перед запуском. При помощи функции «Предпросмотр» вы сможете провести пробную активацию всех новых тегов. Проверьте корректность их работы и соответствие дизайна с теми настройками, которые были предусмотрены вами. Нет ничего опаснее, чем неправильно работающие инструменты сбора данных и аналитики. Ведь работая с заведомо ошибочной информацией, вы сделаете неверные выводы о качестве трафика. Этот путь неизбежно приведёт к существенным финансовым потерям.

3. Контроль версий. Откат до последней работоспособной версии тегов производится всего в пару кликов. Если вы накрутили настройки и больше не понимаете, как и что работает, просто верните их в изначальное состояние и попробуйте ещё раз. 

4. Асинхронная загрузка тегов. Немаловажным фактором в современных реалиях является показатель скорости загрузки сайта. Речь идёт о таком параметре, как Time to First Byte. Google Tag Manager вообще не влияет на скорость загрузки, что крайне положительно отличает его от аналогов.

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

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

1. Интеграция не со всеми сервисами. Это наиболее существенный недостаток. Он не поддерживает взаимосвязь некоторых инструментов. Например это касается Jivosite и Яндекс.Метрики. Если второй сервис был подключён через Google Tag Manager, то данные с Jivosite в него попадать уже не будут. То есть нужно проверять возможность возникновения конфликтов между различными инструментами. Перехватывая информацию друг у друга, они препятствуют корректному сбору данных.

2. Возникновение конфликтов с сервисами, использующими сторонний код в виджетах и формах заявок. Это касается, например, целей, которые задаются в виджетах Getcourse. Если вы не можете обойтись без подобных сервисов, придётся сначала настроить их взаимодействие с Google Analytics, а уже после этого подключать к Google Tag Manager. 

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

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

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

Как работает Google Tag Manager?

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

Как подключить Google Tag Manager?

Первым делом нужно посетить официальную страницу инструмента. Именно с неё и начинается процесс интеграции Google Tag Manager на ваш сайт:

• Нажмите на «Создать аккаунт». От вас потребуется предварительная авторизация в учётной записи Google. Без неё зарегистрироваться в сервисе не удастся. Если вы собираетесь приступить к работе над чужим проектом, возможно, будет лучше создать новую учётную запись. В таком случае, прекращая сотрудничество с владельцем площадки, вы сможете просто отдать этот аккаунт, когда будете передавать дела другому сотруднику.

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

• Далее вы окажетесь в личном аккаунте и перед вами откроется окошко с фрагментом кода. Скопируйте его и разместите в шапке сайта (раздел <head>). 

Содержимое кода может зависеть от использующегося движка сайта и некоторых параметров его настройки. После того, как код интегрирован в шапку, можно считать, что Google Tag Manager уже подключен, а значит пора переходить к его настройкам.

Как установить GTM на Wordpress?

Разумеется, что чем популярнее CMS, установленная на ваш сайт, тем шире будет диапазон возможностей для интеграции различных инструментов и сервисов. WordPress предполагает несколько возможностей для установки Google Tag Manager в тело вашего ресурса:

1. Установка контейнера в тело сайта. Здесь всё протекает так, как было описано ранее. Вы регистрируетесь на официальной странице инструмента, получаете специализированный фрагмент кода и устанавливаете его в раздел head.

2. Установка при помощи плагина или модуля. Разработчики софта для WordPress стараются покрыть все возможные запросы вебмастеров. И для тех, кто не любит заполнять формы и плодить учётные записи, был разработан плагин. Таким образом вы снимаете с себя необходимость копаться в коде сайта и взаимодействуете только с элементами визуального интерфейса. 

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

Что можно сделать с помощью Диспетчера тегов?

Чтобы как следует разобраться в функционале Google Tag Manager, нужно для начала определиться с терминами, которые используются в личном кабинете:

• Контейнер – рабочая оболочка, содержащая в себе теги сайта или мобильного приложения. Он содержит в себе фрагмент кода, отвечающий за корректную работу тегов.

• Тег – исполняемая часть кода JavaScript. Эти элементы позволяют отслеживать жизненный цикл трафика и анализировать поведенческие факторы конкретных пользователей. Благодаря тегам мы можем проводить анализ эффективности рекламных интеграций, ремаркетинга и таргетинга. В общем, все виды рекламы подвластны тегам. 

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

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

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

Переменные

Google Tag Manager позволяет использовать переменные двух типов:

1. Встроенные

2. Пользовательские

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

Давайте теперь разберёмся со списком встроенных переменных:

• Страницы – работает с полными и относительными URL-адресами. Может принимать такие параметры, как: имя хоста страницы или источник запроса.

• Утилиты – позволяют обрабатывать различные события. В качестве области применения можно рассматривать: ID, версию контейнера, название рабочей области или уникальный идентификационный номер HTML-тега.

• Ошибки – эти переменные помогают во время отладки. Они собирают в себе сообщения об ошибках с указанием URL-адреса или номером строки, в которой были зафиксированы неисправности.

• Клики – обычно работают с элементами HTML-кода. Эта переменная отвечает за подсчёт любых переходов, как внутренних, так и внешних.  

• Формы – используется как с самими формами, так и с их непосредственным содержимым. 

• История – более сложный инструмент, который позволяет работать с hash URL и обращаться к новым или старым фрагментам ссылки. В качестве ответа будет происходить загрузка нового или старого фрагмента информации из истори.

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

Триггеры

Как и в случае со встроенными переменными, Google Tag Manager имеет в своём арсенале набор из стандартных параметров для триггеров, которые используются в большинстве случаев:

1. Просмотр страницы – начинает свою работу в момент получения пользователем первого байта от сервера. После загрузки страницы и всех её элементов, триггер фиксирует состояние «Страница загружена». 

2. Клик – позволяет работать с любым кликабельным элементом, расположенным на странице. Срабатывает при клике на любой из них.

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

4. Другое – различные триггеры, которые призваны решать более мелкие задачи. Например, организация группы триггеров, ради согласования их работы между собой. Отслеживание изменений в hash URL. Сбор информации об ошибках на страницах вашего сайта. Или, скажем, триггер, который отмеряет время пребывания посетителей на вашем сайте – вы можете отслеживать, какой процент аудитории проводит достаточно много времени, чтобы полностью ознакомиться с представленной информацией. Вариант отслеживания процента дочитываний.

Теги

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

• конфигурацию тега;

• триггеры.

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

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

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

Для ввода тега в эксплуатацию необходимо просто опубликовать контейнер с ним. Для этого на главной странице Google Tag Manager нажмите кнопку «Отправить».

Как подключить Яндекс.Метрику с помощью GTM?

Кто бы мог подумать, что инструмент от Google способен помочь быстро и без лишних проблем внедрить на страницы сайта счётчик Яндекс.Метрики? Работа через Google Tag Manager позволит вам ощутимо сэкономить время на внедрение любых элементов кода. Достигается это, по большей части, за счёт удобства управления этим инструментом, который не требует вмешательства разработчиков или программистов.

Для подключения Яндекс.Метрики от вас потребуется выполнить три простых действия:

1. Создать и настроить счётчик в Яндекс.Метрике.

2. Опубликовать его на своём сайте.

3. Протестировать его работоспособность и провести финальную отладку. 

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

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

• Имя счётчика.

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

• В зависимости от ваших задач, проставляйте или игнорируйте галочки «Принимать данные только с указанных адресов» и «Включая поддомены». 

• В случае необходимости, включите ещё и Вебвизор.

Теперь переходим к интеграции счётчика в Google Tag Manager. Для этого зайдите в личный кабинет и выберите «Системы управления тегами». По умолчанию вам не потребуются дополнительные настройки. Они необходимы для отлаживания более глубокого взаимодействия со счётчиком и включают следующие параметры:

1. Отслеживание хэша в адресной строке браузера. Эта опция необходима только в случае работы с AJAX-сайтами. Но такие ситуации встречаются крайне редко. Поэтому просто оставляйте этот пункт пустым.

2. Для XML-сайтов. Они требуют своего подхода и не могут работать с тегами <noscript>. Проставляя галочку в этом пункте, вы удалите все теги, которые конфликтуют с XML-сайтами.

3. В одну строку. Эта настройка просто изменяет внешний вид кода счётчика. Если вы не работаете непосредственно с кодом сайта, просто не трогайте её.

4. Информер. Активация этого параметра приведёт к отображению информации о трафике в футере сайта. Дополнительно вы сможете выбрать различные параметры выводимых данных. Это размер значка, цвет, форма и внешний вид, а также конкретные счётчики, которые будут демонстрироваться. Увидеть их смогут все посетители. Разумеется, Глобальная сеть приветствует открытость информации, но разбрасываться направо и налево подробностями работы ваших проектов всё-таки не стоит.

5. Альтернативный CDN. Для всех посетителей, регион проживания которых не позволяет им попасть в счётчик Яндекс.Метрики. Этот инструмент, разумеется, бывает полезным. Но он оказывает существенное влияние на скорость загрузки страницы. Не стоит забывать и об индексе качества сайта, с точки зрения поисковых систем. Если процент посещений из регионов, которые не учитываются Метрикой, невысок, то ими можно пренебречь в угоду скорости взаимодействия с целевой аудиторией.

6. Отправка в Метрику данных электронной коммерции. Для всех владельцев интернет-магазинов. Эта функция позволяет работать с e-commerce через визуальный интерфейс Google Tag Manager. То есть вы сможете собирать весь объём данных о заказах, оплате, отказах и обо всём, что связано с работой онлайн-магазина, в одном месте. Обратите внимание на то, что по умолчанию массиву данных присваивается имя dataLayer. Если соберётесь его изменить, то просто введите нужное название в поле «Имя контейнера данных». 

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

Процедура интеграции этого куска кода предельно простая:

1. Заходим во вкладку «Теги».

2. Нажимаем на кнопку «Создать».

3. Теперь выбираем «Конфигурация тега». Далее нам нужен «Пользовательский HTML».

4. В открывшемся окне используем скопированный код счётчика. 

5. Выбираем триггер «All Pages», чтобы счётчик применился ко всем страницам сайта.

6. Теперь вам осталось только сохранить изменения и опубликовать их.

Вот в общем-то и всё. В качестве предосторожности можно проверить корректность работы установленного счётчика. Для этого нужно добавить к URL-адресу вашего основного домена: «/?_ym_debug=1» и нажать Enter. Теперь переходим к коду страницы, который открывается при нажатии клавиши F12. В открывшейся панели вам нужна вкладка «Console». И если изменения прошли успешно, а счётчик работает корректно, то вы увидите: PageView. Counter и код счетчика.

Как настроить Google Analytics с помощью Google Tag Manager?

Для того, чтобы Google Tag Manager начал сотрудничать с Google Analytics, придётся отыскать идентификатор потока данных. Находится он на панели администратора в личном кабинете Google Analytics. Достаточно просто зайти во вкладку «Потоки данных». И нажать на стрелку, рядом с ресурсом, идентификатор потока данных которого вам нужен. Теперь просто скопируйте нужную информацию и возвращайтесь к Google Tag Manager. 

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

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

Как дать доступ к Google Tag Manager другому человеку?

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

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

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

• Перейдите к колонке «Контейнер» и выберите пункт «Управление доступом».

• Далее вам понадобится кнопка со значком «+», в правом верхнем углу окна.

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

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