Обзор «Google tag manager»

Содержание:

Работа любой организации, занимающейся активной деятельностью в интернете, связана с отслеживанием поведения пользователей на своём веб-сайте. «Яндекс Метрика», «Google Analitics», «Пиксель» от «ВКонтакте», «Ремаркетинг «AdWords»» - это лишь малая часть тех ресурсов, для подключения которых потребуется вставить код в определенное место на вашем сайте. Если речь идёт об одном или двух инструментах, то никакой сложности и путаницы, как правило, не возникает. 

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

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

Зачем нужен «Google tag manager»?

Для упрощения процесса интеграции различных сервисов со своим веб-ресурсом, IT-гигант «Google» разработал специальный веб-инструмент – «Гугл Тэг Менеджер». Его работа заключается в том, чтобы вместо вставки множества различных кодов для каждого сервиса в отдельности, можно было ограничиться подключением одного универсального, связанного с вашим аккаунтом в «Google». Пройдя процесс авторизации на веб-сайте https://tagmanager.google.com/,  Вы можете подключать различные теги (вставлять фрагменты кодов) всего за несколько кликов, используя приятный и логически понятный веб-интерфейс.

С «Google Tag Manager» (в глобальной сети часто используется аббревиатура «GTM») больше не придётся просить системного администратора или менеджера, занимающегося обслуживанием вашего интернет-ресурса, подключить «Пиксель от «Facebook»» или подтвердить права для установки связи с «Вебмастером Яндекса». Представленные операции легко и просто можно сделать самому или поручить даже неподготовленному специалисту-новичку в данной области.  Достаточно иметь уже подключенный на веб-сайт «Менеджер тегов».

Кому нужен «Google Tag Manager»?

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

Особое внимание стоит уделить тому факту, что пользование «GTM» абсолютно бесплатное и ни к чему не принуждает владельца сайта. По этой причине, даже если планируется установить всего 2 сервиса веб-аналитики, можно смело использовать «Google Tag Manager», ведь никто не знает, какой из инструментов понадобится подключить при дальнейшем использовании своего веб-сайта.

Практически обязательным условием использования  «GTM» будет:

• для интернет-магазинов, особенно если производится настройка электронной коммерции;

• для лендингов, мультилендингов и суперлендингов, которым очень важен факт отслеживания конверсии (эффективности) и поведения посетителей;

• информационные сайты, блоги, порталы, осуществляющие монетизацию за счет размещения рекламных блоков от «Яндекса», «Google», «DoubleClick».

Подробный перечень основных сервисов для интеграции с «Google Tag Manager»

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

Самые популярные и используемые на коммерческих и информационных веб-сайтах инструменты для аналитики и сбора сведений о поведении пользователей на сайте:

• «Яндекс Метрика»;

• «Google Analitics»;

• «Пиксели» от «Вконтакте», «Facebook», «AdWords»;

• «DoubleClick»

• сервисы обратных звонков, онлайн-консультанты;

• «Liveinternet»;

• «Google Optimize»;

• «Microsoft Bing Ads»;

• «Twitter»;

• «ROIstat».

Список не является окончательным и постоянно дополняется.

Кроме того, с помощью «менеджера тегов» можно осуществить и подтверждение прав на веб-сайт в «Yandex Webmaster» и «Google Webmaster».

Установка и настройка «Google Tag Manager»

Сначала переходим на сайт по ссылке: https://tagmanager.google.com/. Осуществляем авторизацию в «Google». Желательно, предварительно настроить восстановление аккаунта по номеру телефона, чтобы в случае утери «учётки», необходимой для входа в GTM, можно было быстро и оперативно её восстановить.

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

Вводим название компании и нажимаем кнопку «Далее». По-своему усмотрению, можно установить галочку на передачу анонимных данных в «Google» и другие службы.

Переходим к настройке «Контейнера». Необходимо выбрать тип устройства, на котором он будет использоваться. Доступные варианты: «Веб-сайт», «iOS», «Android», «AMP» (ускоренные страницы, аналог «Турбо Страниц»).

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

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

Обратите внимание, что в окне имеются два фрагмента кода, один из которых необходимо будет вставить между тегами <head></ head >, а другой - <body></ body >.

Способы вставки на различные типы сайтов

а) На сайт без системы администрирования (CMS) через файловый менеджер хостинга.

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

Итак, заходим на хостинг через окно браузера. В качестве примера будет представлен популярный в России провайдер – «Timeweb». Для остальных площадок интерфейс может слегка отличаться, но каких-либо серьёзных различий не будет.

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

Находим папку, в которой содержатся файлы сайта. В случае примера это корневая папка «public_html».

Исходя из разметки страницы, находим и открываем необходимую. Как правило, при разработке веб-сайта без панели администрирования используется 2 варианта: один единый html или php файл (обычно для лэндинга), разбивка по основным секциям и страницам (при многостраничном). Второй тип легко заметить, если отдельно вынесены файлы  с названиями header, footer, main, common, sidebar и т.п.

В первом случае достаточно открыть интересующий общий веб-файл и вставить скопированные в «Google Tag Manager» коды в конкретные строчки.

По завершении действий нажимаем сохранить.

При втором варианте (разбивка на несколько файлов по основным блокам и секциям), открываем header.php и проделываем аналогичное действие.

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

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

б) На веб-сайт без CMS через ftp-доступ.

Самый простой вариант, скачать бесплатную программу «FileZilla», перейдя по ссылке: http://filezilla.ru/get/

Программа доступна как для «Windows» и «Mac», так и «Linux».

Производим скачивание и устанавливаем на свой ПК. Если Вы не хотите загромождать устройства установленными программами, стоит воспользоваться версией Portable (не требует установки).

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

Для настройки соединения прописываем: «Хост», «Имя пользователя», «Пароль», «Порт». Если последний параметр хостинг площадкой не указывается, то его можно не заполнять и опустить.

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

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

Теперь, открыв скаченный файл, проделываем действия, аналогичные тем, что были совершены в  предыдущем разделе: вставляем код для подключения «Google Tag Manager».

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

в) На веб-ресурс с системой администрирования.

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

Рассмотрим редактирование через административную панель на примере одной из самых распространенных бесплатных систем: CMS «WordPress».

Заходим в консоль (панель управления) и следуем в раздел «Внешний вид» -> «Редактор».

Открываем файл header.php.

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

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

Для CMS «ВордПресс» можно использовать плагин «DuracellTomi's Google Tag Manager for WordPress», «Easy Google Tag Manager» - для Joomla, «Google Tag Manager for Opencart» - для ОпенКарт.

На примере первого плагина продемонстрируем процесс установки:

Заходим в раздел «Плагины», вбиваем в поиске название и в отобразившемся списке нажимаем «Установить» и «Активировать».

Далее заходим в раздел «Настройки» и выбираем «Google Tag Manager». Вписав свой номер ID (найти можно в настройках «GTM»), закончится процесс по установке и настройке плагина на системе администрирования.

На этом всё, «Google Tag Manager» установлен. Можно перейти к следующему шагу: подключение различных сервисов, настройка триггеров и событий.

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

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

Отдельно стоит упомянуть пару слов и об установке на «Bitrix». !* Как правило, процесс подключения осуществляется вручную, в виде  непосредственной вставки в шаблон веб-сайта. Возможно возникновение конфликта, связанного с блокировкой сервиса встроенным веб-антивирусом и удалением фрагмента кода для активации. По этой причине, стоит добавить веб-ресурс в исключение на соответствующей вкладке, как правило, доступной по следующему адресу /bitrix/admin/security_antivirus.php.

Итак, после окончания установки «Google Tag Manager» на свой веб-сайт, идём дальше к настройке интеграции с различными онлайн-сервисами.

Добавление тегов в «Google Tag Manager», триггеры и переменные.

Дальнейшая работа будет производиться непосредственно в «Рабочей области GTM».

Нажав, «Добавить новый тег», присваиваем ему имя и выбираем необходимый тип.

Для примера, произведем интеграцию веб-ресурса и сервиса «Google Analytics».

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

Что такое «триггеры» в «GTM»

Теперь переходим к «Триггерам» - условиям. Гибкие возможности настройки системы позволяют задавать определенные критерии для активации отдельных тегов при выполнении заданных условий. Есть ещё одна отличительная черта, делающая рассматриваемый сервис интеграции ещё более привлекательным – единое пространство всех собираемых данных.  Для тех пользователей, кто каким-либо образом связан со сквозной аналитикой и знаком с инструментом «Google Data Studio», можно сильно не расхваливать преимущество данного принципа. Для тех, кто ещё пока не ознакомился с возможностями, – это оперативность обработки получаемых данных, а также использование единых переменных. Без какой-либо сложности и труда, можно настроить ремаркетинг, исходя из достижения цели по конверсии.    Создание ремаркетинговых кампаний в «Google Adwords» можно значительно облегчить и ускорить.

В системе «GTM» доступны следующие типы триггеров:

• просмотр страницы;

• окно загружено;

• клики по элементам (например, определенным кнопкам, изображениям) или ссылкам;

• взаимодействие пользователя с видео на «YouTube»;

• глубина прокрутки;

• доступность определенного элемента;

• отправка заполняемых данных через форму;

• возникновение ошибок;

• таймер (спустя определенный интервал времени);

• событие, создаваемое и задаваемое пользователем (какое-либо нестандартное действие на сайте или в мобильном приложении, которое предопределенно заранее).

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

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

Итак, для рассматриваемого нами примера, создадим триггер и подключим его к подключенной нами ранее системе аналитики.

Условием будет просмотр любой из страниц сайта.

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

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

Теперь, разберем способ подключения сервиса «Яндекс Метрика».

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

Для того, чтобы «Yandex Metrika» подключилась к «Google Tag Manager», достаточно установить ещё один тег и выбрать тип «Пользовательский html». В него будет осуществляться вставка кода подключения счетчика.

Добавляем триггер – «Все страницы», после чего «кликаем» на кнопку «Сохранить».

На этом всё! Всего за считанные минуты был подключен сервис «Яндекс Метрика». При этом не пришлось лезть в кодировку сайта и вставлять фрагмент кода в указанное место.

Дополнительно, можно произвести настройку целей. Предварительно проделываем действия в сервисе «Yandex Metrika», настроив цель «JavaScript событие».

Проделываем уже знакомые нам действия: создаём тег с произвольным кодом html, вставляем код для отслеживания достижения целевого действия пользователем в формате:

<script>yaCounter_Номер Счётчика_.reachGoal(ИМЯ_ЦЕЛИ_В_Метрике');</script>.

В качестве параметра «Номер Счётчика» вставляем номер своего идентификатора в системе метрике, «ИМЯ_ЦЕЛИ_В_Метрике» - название созданной цели.

Далее настраиваем триггер – главный действующий элемент для установки целевого действия, в качестве которого выбираем «Отправку формы».

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

Кроме того, есть возможность установить опцию «Ждать событие». Действие будет засчитано только после предварительно совершенного другого, например, отправки аналогичных данных в «Google Analytics». Включив «Проверку ошибок», можно исключить отправки пустых форм и прочих нецелевых действий.

Сохраняем произведенные настройки.

Если с интеграцией популярных сервисов аналитики всё понятно, идём дальше и переходим к подключению в «Google Tag Manager» пикселя в «Вконтакте».

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

Вкратце данный процесс продемонстрирован на приведенных ниже скриншотах, перейдя во вкладку «Таргетинговая реклама» -> «Ретаргетинг» -> «Создать Пиксель». Заполняем данные для ретаргетингового инструмента. Появится код, который нам и потребуется в дальнейшем.  

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

Заключение

На этом всё! Процесс инициализации пикселя в «GTM» успешно окончен. Аналогичные действия можно произвести и для установки инструментов ремаркетинга от «Facebook» и «Google AdWords». О том, как произвести настройку в самих сервисах читайте в нашей соответствующей статье.

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