Предлагаем вашему вниманию пошаговую инструкцию по установке и настройке Google Tag Manager (GTM). Здесь же мы расскажем, как с помощью GTM подключить Google Analytics и Яндекс Метрику.
Google Tag Manager (GTM) – многофункциональный инструмент, который позволяет добавлять на сайт или в мобильное приложение теги для анализа трафика, конверсии и поведения пользователей без вмешательства в исходный код сайта.
В статье мы подробно опишем, как создать и настроить GTM на сайте и как без вмешательства в исходный код сайта подключить Google Analytics и Яндекс Метрику.
Преимущества GTMПрежде чем перейти к установке, разберёмся в определениях:
1. Зарегистрируйте аккаунт в Google
Если ваш аккаунт в Google уже зарегистрирован и вы авторизированы, пропустите этот шаг. Если нет – авторизуйтесь или создайте аккаунт .
2. Создайте аккаунт в GTM
После авторизации в Google можно переходить к созданию аккаунта в GTM. Перейдите на страницу Google Tag Manager и нажмите на кнопку «Создать аккаунт», затем укажите придуманное название аккаунта и нажмите на кнопку «Далее».
Рисунок 1
В появившемся окне укажите придуманное название контейнера и выберите, где он будет использоваться. В нашем случае это кнопка «Веб-сайт». После этого нажмите на кнопку «Создать».
Рисунок 2
Рисунок 3
3. Добавьте на сайт полученный код Диспетчера тегов
После того как вы примете соглашение об использовании, появится окно с кодом.
Рисунок 4
Выделите и скопируйте код в файл txt. После этого нажмите на кнопку «ОК» в самом низу открывшегося окна.
Далее в файле шаблона сайта, в котором у вас находится блок, вставьте код из верхнего блока как можно ближе к началу.
Рисунок 5
Код из нижнего блока вставьте непосредственно после открывающего тега.
Рисунок 6
После того как вы выполните эти действия, нажмите в панели GTM на кнопку «Опубликовать».
Рисунок 7
4. Протестируйте корректность работы GTM
Далее важно проверить, всё ли вы сделали верно. Для этого можно воспользоваться плагином Google Tag Assistant Recordings для браузера Chrome. Установите это расширение, перейдя по ссылке .
После установки на панели расширений браузера Chrome появится значок Google Tag Assistant - . Для проверки корректности работы установленного на сайт GTM нужно перейти на свой сайт и нажать на этот значок.
Рисунок 8
Из скриншота видим, что значок зелёного цвета, это значит, что установка Диспетчера тегов прошла успешно. Если значок жёлтого или красного цвета – тег размещён с ошибками.
Рекомендации Google
Рисунок 9
Теперь приступим непосредственно к подключению Google Analytics через GTM.
1. Зарегистрируйте Google Analytics
Если на сайте уже установлена аналитика, этот пункт можно пропустить. Если нет, ознакомьтесь с тем, как зарегистрировать Google.Analytics , и пройдите регистрацию.
Обратите внимание! После регистрации Google.Analytics код на сайте размещать не нужно. Нам чуть позже понадобится только идентификатор отслеживания Google.Analytics. Если Google.Analytics зарегистрирован ранее и на сайте уже размещён код, после подключения Google.Analytics через GTM ранее размещённый код аналитики можно убирать.
2. Войдите в зарегистрированный ранее аккаунт в GTM и кликните по ссылке «Добавить новый тег»
Рисунок 10
3. Выберите тип тега
В данном случае нам нужен Universal Analytics.
Рисунок 11
4. Укажите идентификатор отслеживания сайта в Google Analytics и тип отслеживания – «Просмотр страницы»
Рисунок 12
Идентификатор отслеживания ресурса можно посмотреть в настройках Google Analytics.
Рисунок 13
5. Укажите триггер «All Pages»
Чтобы тег срабатывал на всех страницах, укажите триггер «All Pages».
Рисунок 14
6. Сохраните внесённые данные
Рисунок 15
7. Укажите имя тега и нажмите на кнопку «Сохранить»
Рисунок 16
8. Проверьте корректность работы тега
Для этого нажмите на стрелочку рядом с кнопкой «Опубликовать» и выберите «Предварительный просмотр».
Рисунок 17
В «Предварительном просмотре» контейнер с изменениями будет доступен только в вашем браузере.
Если контейнер отобразился под строкой «Tags Not Fired On This Page», тег на странице не сработал. Необходимо проверить все настройки и при необходимости исправить допущенные ошибки.
Если контейнер появился под строкой «Tags Fired On This Page», значит, Universal Analytics установлен без ошибок.
Рисунок 18
9. Опубликуйте Universal Analytics
Рисунок 19
Таким образом, мы подключили на сайт Google Analytics через GTM без вмешательства в исходный код страниц.
Подключение Яндекс Метрики через GTMДля подключения Яндекс Метрики выполните те же действия, что и для Google Analytics, но так как по умолчанию Яндекс Метрики в GTM нет, при выборе продукта укажите «пользовательский HTML».
Рисунок 20
В результате появится окно с пустым полем.
Рисунок 21
В эту HTML-форму необходимо вставить код счётчика вашей Метрики.
Если на сайте уже установлена Яндекс Метрика, скопируйте код счётчика с исходного кода страницы. Если нет, ознакомьтесь с тем, как создать и настроить счётчик Яндекс Метрики .
Обратите внимание! Как и в случае с Google.Analytics, код на сайте размещать не нужно. Полученный код при настройке Яндекс Метрики нужно скопировать и добавить в появившееся на предыдущем этапе окно «Пользовательский HTML».
Рисунок 22
Перед публикацией проверьте корректность работы тега, нажав на кнопку «Предварительный просмотр».
Рисунок 23
Если в режиме предварительного просмотра контейнер размещён под строкой «Tags Fired On This Page», значит, всё настроено верно. Если же контейнер показывается под строкой «Tags Not Fired On This Page», тег не сработал, скорее всего, при подключении была допущена ошибка.
Рисунок 24
После того как мы убедились в том, что тег в предварительном режиме сработал, нажимаем «Опубликовать».
Таким образом, мы подключили на сайте Яндекс Метрику без вмешательства в исходный код страниц.
Если на вашем сайте ещё не установлен GTM, вы сможете установить и настроить его, следуя нашим инструкциям. А мы, в свою очередь, продолжим писать о том, как с помощью GTM анализировать трафик, конверсии и поведение пользователей.
Гугл тег менеджер – это удобный сервис для упрощения управления тегами и кодами сторонних ресурсов. Вебмастеру можно один раз разместить контейнер на разрабатываемый сайт, и далее остальные службы будут автоматически добавлять коды.
Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
Чтобы понять, что собой представляет Google Tag Manager (GTM), разберем простую аналогию. Все мы знаем, что для обработки заказов в интернет-магазине, службе заказа еды или такси не обойтись без диспетчеров. На их плечи ложится процесс координации и обеспечения работы всей компании. Аналогичную функцию выполняет и данный сервис Гугл. Он позволяет не разрываться между приложениями, задачами и программами, а соединить все воедино и централизованно давать команды.
Сегодня GTM позволяет устанавливать на сайт коды различных сервисов и специализированных служб: Гугл Аналитика, Метрика Яндекса, Гугл карты, соцсети и т.д. За счет этого удается в разы облегчить процесс использования сторонних ресурсов и повысить эффективность работы интернет-ресурса.
Зачем нужен Google Tag Manager
Теги являются важной составляющей страниц, это фрагменты кода. Благодаря им сторонние ресурсы могут анализировать сайт, получать необходимую информацию с него. Теги также применяются для регулярного мониторинга конверсии, проведения эффективного ремаркетинга и прочих аналогичных целей. Современный маркетинг нуждается в гибком измерении, в возможности отслеживания внесенных изменений и в оценке их эффективности. Корректировка тегов и управление ими - достаточно длительное занятие, состоящее из нескольких этапов. GTM позволяет упростить данный процесс.
Как установить Tag Manager и настроить егоЧтобы начать использование, необходимо добавить контейнер Гугл менеджера на сайт. Далее устанавливаются переменные, затем настраиваются условия активации (триггеры). В конце теги добавляются в контейнер. Разберем каждый из этапов.
Добавляем контейнер Гугл менеджераЗаходим в систему Гугл, а именно в GTM, и создаем здесь личный кабинет. Настраиваем контейнер, вводим ряд параметров, в том числе и адрес самого сайта. Далее система сгенерирует код, который нужно вставить на ваш интернет-ресурс. Код состоит из 2 частей, первая помещается в хедер, а другая - в конце тега. Сохраняем внесенные корректировки, добавляем тег/теги, теперь публикуем контейнер.
ПеременныеАктивировать тег можно только при совпадении переменной и условий активации. Перечень переменных представлен в разделе меню с тем же названием, их настройка выполняется здесь же:
Чтобы переменная открылась в фильтре триггера, ее нужно сначала включить в меню «Переменные».
Триггеры в Гугл Тег Менеджер
Триггеры, как мы выяснили ранее, должны соответствовать переменной. Триггеры настраиваются в одноименном разделе меню, здесь нужно нажать «Создать», а затем выбрать тип. Всего есть 3 разновидности:
Разберем функционирование тегов на конкретном сервисе, например, Гугл Аналитика. Подключаем интернет-ресурс к системе, открываем рабочую область и жмем на пункт «Добавить новый тег». Устанавливаем тип Universal Analytics. Далее прописываем идентификатор, он отображается в личном кабинете Гугл Аналитикс. Далее в пункте «Тип отслеживания» ставим отметку рядом с функцией «Просмотр страницы». В пункте триггеров жмем «Все страницы» и сохраняем внесенные изменения.
Чтобы проверить работоспособность тегов используем опцию «Предварительный просмотр и отладка». Выбираем данный пункт в рабочей области, а затем открываем интернет-ресурс в используемом браузере. Если все теги проставлены верно, данные о них отобразятся в окне диагностики.
В некоторых ситуациях необходимо использовать дополнительные настройки. Они позволят расставить теги в определенном порядке, по которому они будут активироваться. Если не имеет значения, в каком порядке будут активированы теги, можно забыть о расширенных настройках.
ФункционалСегодня GTM решает широкий спектр задач, что делает его универсальным помощником в следующих задачах:
Это далеко не все функциональные возможности ресурса. Лучше всего самостоятельно пару раз пройтись по меню, попробовать разные фишки и выбрать те, которые подойдут именно для вашего ресурса.
Google Менеджер тегов позволяет настраивать и развертывать теги, в том числе для Google Рекламы , Google Аналитики и Floodlight , а также сторонние . Чтобы воспользоваться Менеджером тегов, выполните следующие действия:
Аккаунт – высший уровень иерархии в Менеджере тегов. Как правило, для компании достаточно одного аккаунта. В аккаунте Менеджера тегов есть один или несколько контейнеров . Существуют типы контейнеров для сайтов, AMP-страниц, приложений Android и iOS.
Как создать аккаунт и контейнерПри первой загрузке контейнера вы увидите приглашение добавить фрагмент кода на сайт или начать работу с Менеджером тегов в рамках SDK для выбранной платформы. Вы можете фрагмент кода сразу или нажать ОК , чтобы сделать это после настройки контейнера.
Как добавить контейнер в существующий аккаунт Установка контейнераЧтобы предотвратить повторную активацию, удалите из кода все заданные вручную теги, которые были перенесены в контейнер Менеджера тегов.
Чтобы предотвратить несанкционированный доступ к контейнеру, фрагмент кода Менеджера тегов по умолчанию использует HTTPS.
Добрый день, читатели и гости. В данной статье мы научимся настраивать Google Tag Manager для отслеживания переходов по партнерским ссылкам в Яндекс Метрике и Google Analitics.
Идея написания возникла в связи с тем, что я установила на моём блоге баннер с партнерской ссылкой, которая ведет на хостинг . И мне стало интересно, кто из посетителей моего сайта осуществляет переход по данной ссылке, т. е. мне хотелось настроить цели в Яндекс Метрике и Google Analitics таким образом, чтобы они отражали переход с баннера.
На моем блоге аналитика установлена через Гугл Тег Менеджер (Google Tag Manager или GTM). В поисках подсказок о том, какие соответствующие настройки нужно произвести в GTM я перерыла весь рунет, но ответа так и не нашла. А нашла я его у одного американца - его имя Julian Juenemann. К сожалению, ресурс https://measureschool.com , на который ссылается автор на данный момент недоступен.
Google Tag Manager — что это такое ?Рассказывать подробно о том, что такое Google Tag Manager в данной статье не считаю нужным. Соответствующего материала на данную тему в интернете достаточно.
Но если говорить простым языком, то GTM можно представить как некий контейнер, некую ёмкость, которую мы устанавливаем на свой сайт в виде HTML кода. И уже в этот контейнер мы можем положить все что угодно. Например, установить счетчик любой статистики, будь то Яндекс Метрика или Google Analitics и т. д. Настроить отслеживание конверсий, отслеживание переходов и многое другое.
«Штука» очень удобная, особенно если вы работаете с клиентским сервисом, к которому у вас нет доступа через FTP. Достаточно один раз попросить программиста установить на сайт данный контейнер и больше коллегу мучить своими техническими заданиями не надо. И не терять по нескольку дней в ожидании, когда же наконец он выполнит работу, как это неоднократно случалось в моей практике. Не хочу обидеть программистов, они люди занятые и их тоже надо понимать. Но, время - деньги!
Часть практическая. Как отследить переходы по партнерским ссылкам. Настраиваем Google Тег Менеджер .Для демонстрации настроек я создала тестовый сайт, на который установила баннер, который ведет на сайт партнера. Мы настроим отслеживание переходов по донному баннеру с помощью Гугл Тег Менеджер. Переходы мы будем видеть в Яндекс Метрике и Google Analitics.
Настраиваем триггер для отслеживания всех кликовДанное действие позволит отслеживать нам все совершенные клики на сайте без исключения.
Рис. 1
Рис. 2
Настраиваем инструмент «Тег» так, чтобы совершенное действие - клик по партнерской ссылке, отображалось в Google Analitics. Код GA уже должен быть установлен на вашем ресурсе.
Рис. 3
Осталось опубликовать произведенные настройки, чтобы они вступили в силу. Наш результат — возможность отследить переходы, совершенные по партнерским ссылкам в Google Analitics. И если мы теперь кликнем на размещенный баннер партнера, то в Аналитике отобразится соответсвующее событие. См. рис. 4.
Рис. 4
Как произвести настройку Гугл Тег Менеджер для отслеживания переходов в Яндекс Метрике я решила написать во второй части статьи - «Гугл Тег Менеджер: отслеживаем переходы по партнерским ссылкам. Часть 2». Чтобы развеять все возникшие вопросы по настройке я записала для вас соответствующее видео. В видео вас ждет небольшой бонус - я показала как в Google Analitics настроить цель под наше событие.
С вами была Юлия Хайретдинова
Приветствую, дорогие друзья!
Помните мы с вами настроили счетчик Метрики, затем счетчик Google Analytics, лезли в код сайта, чтобы разместить их? Совершенно незнающим HTML людям, это доставляло большие трудности. Ведь сразу-то и не поймешь, где находится тег или . Для этого нужные определенные знания. По этой причине, большинство владельцев сайтов поручают установку счетчиков вебмастерам или программистам, да еще и платят за это деньги. Правда небольшие, но все-таки деньги. А еще нужно составить ТЗ (техническое задание), что отнимает некоторое время.
Но умельцы из Google решили эту проблему, создав один очень хороший сервис. Называется Google Tag Manager. Суть этого инструмента – упростить взаимоотношения между человеком, не соображающим в вебмастерстве, и кодом сайта. То есть, вам не придется лезть в код, достаточно использовать этот сервис.
Настройка Google Tag Manager займет у вас несколько минут. Но в будущем данный инструмент возместит то время, которые вы потратили на его настройку. Кроме настройки, я расскажу вам, как установить счетчик Метрики, Analytics и Adwords на сайт, при этом не ползая в его внутренностях.
Ну-с, начнем-с.
Обязательно прочтите:
Начало работы с Google Tag ManagerЯ думаю, что у большинства людей, читающих этот урок, есть аккаунты в Google. Можете сразу нажать на “Войти в аккаунт” в правом верхнем углу. Те, у кого нет аккаунтов, зарегистрируйтесь.
Ну а затем, нужно создать аккаунт, непосредственно, в самом Tag Manager. Для этого нужно заполнить небольшую форму:
Назовите аккаунт и нажмите “Далее”. На следующем шагу нужно указать настройки контейнера, а именно адрес сайта и место, где будет использовать контейнер. Так как мы работаем с сайтом, то выбираем “Веб-сайт”:
И нажимаем на кнопочку “Создать”. Затем, Google предлагает принять соглашение. Естественно мы его примем:
Сразу после того, как мы создали аккаунт, появляется окошечко с кодом Google Tag Manager. Его нужно установить после открывающего тега :
Скопируйте его и установить на всех страницы сайта. Вот пример того, куда нужно установить код:
код Google Tag Manager
Если вам непонятно, то придется прибегнуть к услугам вебмастера. Но, поверьте мне, после этого обращаться к вебмастерам по пустяшным делам вы будете редко.
Терминология Google Tag ManagerДля того, чтобы разъяснить многие моменты и в то же время разобрать все самое необходимое для работы с Tag Manager, я решил дать небольшой список основных терминов. Итак:
Настройка Google Tag Manager у многих начинается с установки счетчика Analytics. Мы не исключение. Итак:
Нехитрым способом мы установили счетчик Google Analytics. Как видите, это несложно.
Установка счетчика МетрикиУстановить счетчик Метрики еще проще. Так же создаем тег и при выборе типа тега выбираем “Пользовательски HTML”:
Затем просто вставляем код Метрики в поле HTML:
Назначаем тот же триггер “All Pages”, даем название и сохраняем. Вот и все, теперь у нас в одном контейнере находится два счетчика:
Сегодня вы узнали как разгрузить страницы своего сайта от лишнего кода. Можете удалять кода счетчиков и оставить только код Google Tag Manager.
Как видите, настройка Google Tag Manager занимает всего пару минут.
Ну а на этом все, дорогие друзья. До скорых встреч!
Не забывайте подписываться на обновления блога.