google gtm что это

Обзор Google Tag Manager: зачем он нужен и как начать работать

Про старт работы с Google Tag Manager у нас вышел актуальный материал.

В этом материале разберем, как быстро и просто настроить систему отслеживания с помощью Google Tag Manager, дадим инструкции для установки и покажем пример из проекта.

Что такое Google Tag Manager (GTM)

GTM — бесплатный инструмент, который сокращает время на подключение веб-аналитики Яндекс.Метрики и Google Analytics. Решает задачи по отслеживанию целей на сайте или мобильном приложении. Особенность сервиса — простота работы. Чтобы настроить сбор данных, нужно установить один скрипт в код сайта.

10 преимуществ GTM

Краткая инструкция по базовой настройке

Минимальный набор скриптов для сайта — это веб-аналитика Яндекс.Метрики и Google Analytics, их и будем настраивать.

1 шаг. Вход в аккаунт.
Чтобы войти в аккаунт на сайте GTM, нужно зарегистрироваться в Google. Если вы пользуетесь сервисами Google, то введите адрес почты и пароль.

2 шаг. Создание аккаунта.
Откройте вкладку «Администрирование» и напишите название аккаунта.

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

Отлично, вы создали аккаунт и получили код контейнера, который и нужно установить на сайт.

Обратите внимание: размещать код нужно после открывающего тега.

3 шаг. Заполнить контейнер.
Откройте вкладку «Администрирование» и напишите название аккаунта.

После регистрации аккаунта и размещения кода на сайте, можно наполнить контейнер скриптами: разместить коды Яндекс.Метрики и Google Analytics. Для этого используют теги (поэтому у сервиса такое название — «Диспетчер тегов»). Создание и управление тегами является основой инструмента.

Чтобы создать теги, перейдите в раздел «Контейнер» и выберите в меню пункт «Теги».

Если нужно создать тег Google Analytics, то нажмите на кнопку «Создать» и заполните данные по новому тегу. Сначала дайте имя тегу (1), которое будет понятным для вас. Затем выберите продукт, в нашем случае это Google Analytics (2).

После у тега сохраняется название (в примере «Тест GA») и возможность настроить выбранный продукт.

В пункте 3 («Настройка тега») введите номер идентификатора (он же номер счетчика) из Google Analytics:

На следующем шаге задайте условия активации и завершите создание тега:

Отлично, вы создали первый тег. Теперь сделаем то же для Яндекс.Метрики. Процесс немного отличается. На первом этапе, при выборе продукта, в автоматических шаблонах Яндекс.Метрики нет, выберите «Пользовательский тег»:

Зайдите в Яндекс.Метрику и в меню слева выберите раздел «Настройки». Затем перейдите на вкладку «Код счётчика» и полностью скопируйте код.

Вернитесь в GTM и вставьте скопированный код:

Условия активации аккаунта такие же, как в Google Analytics.

Важно не забывать, что после изменений в настройках GTM необходимо опубликовать их на сайте:

Пример из практики

После изучения GTM и понимания его работы можно решать более сложные задачи. Рассмотрим пример из проекта для нашего клиента — официального дилера Hyundai в Санкт-Петербурге. Мы вели рекламную кампанию с основой на стратегию, которая предполагала смену посадочных страниц 2-4 раза в месяц. В качестве KPI использовали обращения в автосалон, в том числе интернет-заявки.

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

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

С помощью специальной конструкции dataLayer.push() с обязательным параметром «event» мы добавили определенный фрагмент кода в функцию, которая отвечает за выполнение нужного действия на сайте. Так нам удалось собирать данные по форме.

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

Источник

Зачем нужен Google Tag Manager и как его использовать

Майк Пантолиано, директор по маркетингу аналитической компании Ookla, написал в блоге Moz о том, что такое Google Tag Manager, как использовать теги для измерения маркетинговых кампаний. В рубрике Growth Hacks пример работы тегов в компании SEOmoz.

1 октября 2012 года компания Google представила Google Tag Manager — бесплатный инструмент для управления маркетинговыми активностями и отслеживанием тегов на вашем сайте. Для простоты понимания — их можно называть метками, но не теми, которыми тегируют материалы. В нашем случае, мы говорим о тегировании посетителей. Я почувствовал, что существует много недопонимания вокруг его запуска, поэтому решил обсудить, что такое «управление тэгами» и почему этот инструмент считается таким прорывным.

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

Что это такое и зачем нужно

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

Управление тегами является концепцией, которая родилась из растущей потребности в более гибком измерении маркетинга и способности отслеживать изменения. Сразу скажу: управление и внесение изменений в тегах является довольно утомительным занятием. Не хорошо использовать абстракции, поэтому возьмем пример из реальной жизни. Рассмотрим компанию SEOmoz.

Как SEOmoz мог бы использовать управление тегами

Давайте рассмотрим домашнюю страницу SEOmoz. В исходном коде главной страницы я могу выделить ряд кусков, которые бы хорошо работали с менеджером тегов. Можете взглянуть сами, но кажется, что команда Moz использует:

Как вы думаете, что происходит, когда кто-то из маркетинговой команды хочет внести изменения в теги?

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

Не весело, не гибко.

Менеджер тегов позволяет иметь контроль над отдельным местом на веб-странице. Один контейнер на странице заменяет 6-7 различных интеграций в коде. Этот контейнер содержит код, который управляется маркетологом из личного кабинета.

Если команда Moz хочет попробовать новый ремаркетинговый сервис, они могут взять код, поместить его в менеджер тегов и выкатить на сайт — все в течение 10 минут без привлечения программистов.

Подходит ли вам это

Учтите, что есть множество продуктов, особенно из e-commerce, которые являются гораздо более сложными, чем SEOmoz.org. Но при этом необходимость управления тегами в таких ситуациях только увеличивается.

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

В таком случае управление тегами, вероятно, не для вас. Для всех остальных такой инструмент является отличным средством в арсенале agile-маркетолога. Давайте более подробно рассмотрим Google Tag Manager.

Google Tag Manager

Если вы еще не видели эту презентацию, рассказывающую об инструменте и его установке, то посмотрите.

Затем рассмотрим то, как маркетологи могут кастомизировать его под свои нужды. Google Tag Manager предлагает функции управления версиями и отладки. Кроме того, контейнер представляет собой асинхронный JavaScript-фрагмент, поэтому он не будет влиять на загрузку страницы или блокировать другой JavaScript-код.

Макросы

Google Tag Manager использует макросы и правила, чтобы решить, когда необходимо включить тег. Макросы — это лишь пара «имя-значение», которая может быть использована для создания правил. Само значение, во многих случаях, заполняется в режиме исполнения. То есть, страница настраивается для пользователя в режиме реального времени. В составе менеджера тегов идут три макроса по умолчанию:

URL-макрос

Имя — URL, значение — URL независимо от верхнего уровня. Пример:

If URL = /confirmation.html send our ‘Conversion’ tags.

Ваши страницы конверсий, скорее всего, напичканы кодами наподобие AdWords, eCommerce аналитических систем и другими трекерами.

HTTP Referrer-макрос

Имя — HTTP Referrer, значение — предыдущая страница, которую посетил пользователь. Пример:

If referring page matches Twitter or Facebook, send the ‘Referred by Social’ tags.

Возможно, вы захотите использовать значение пользовательской переменной (custom variable) из Google Analytics.

Event-макрос

Это немного сложнее, особенно если вы привыкли к событиям (Events) в Google Analytics. Есть сходство, и вы можете использовать и их, но я бы не рекомендовал, потому что Google Analytics обладает схожим инструментом отслеживания событий.

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

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

Возможно, у вас есть система, которая отправляем email пользователям, бросившим свои корзины.

Почему мы это делаем

Что делать, если у нас уже есть стандартное событие Google Analytics OnSubmit, и мы можем отслеживать заполнение форм? Какие преимущества при использование менеджера тегов? Необходимо сделать шаг назад и рассмотреть перспективу, чтобы понять преимущества. Заполненная форма на нашем сайте является важным действием пользователя. Независимо от того, какие услуги мы будем использовать для отслеживания наших маркетинговых усилий через 10 лет, это та часть информации, которую мы хотим анализировать. Используя менеджер тегов и настроив эту форму представления, как событие, мы по-прежнему сохраняем гибкость в следующих случаях:

Пользовательские макросы

В дополнение к указанным выше макросам, у нас есть возможность использовать пользовательские макросы для создания правил. Наши варианты включают в себя:

Постоянная строка

У этого макроса есть довольно ограниченное применение. Документация Google предлагает единственный вариант использования, который я могу себе представить:

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

JavaScript-переменная

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

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

Создание макросов и данные в них позволяют мне установить собственные правила для тегов. Довольно легко написать соответствующее правило для специальной версии фрагмента Google Analytics, который помещает обнаруженные теги в пользовательские переменные. Заметьте, что я ссылаюсь на макрос, который мы только что создали выше, используя синтаксис <> в строке пользовательской переменной.

Таким образом мы сможем наблюдать в привычном нам интерфейсе Google Analytics интерес к тегам(в данном случае уже тегам материалов, которые также называют метками), которые мы сами указываем при публикации материалов.

Слой данных

Объяснение слоя данных занимает довольно много времени. Если вы хотите узнать подробно, то можете почитать заметку Джастина Кутрони.

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

var dataLayer = <
«pageTitle» : «Confirmation page»,
«pageURL» : «/confirmation.html»,
«tranID» : «239871»,
«tranTotal» : «47.54»,
«tranTax» : «1.54»,
«tranShipping» : «5.00»,
«tranShippingMethod» : «USPS»,
«tranCurrency» : «USD»,
«tranProds» : «11312|2335|44443»,
«tranSKUs» : «23|3233|22»,
«tranProdNames» : «Fake Product 1|Fake Product 2|Fake Product 3»,
«tranCategories» : «Misc|Games|Hijinks»,
«tranPayMethod» : «VISA»,
«visitorType» : «Repeat Buyer»,
«visitorFirstPurchDate» : «20121001»,
«visitorFirstProds» : «13333»
>

Помимо данных с eCommerce-сайтов, следующая информация идеально подойдет для слоя данных:

С менеджером тегов и слоем данных, работающих вместе, очень легко создать правило, которое отправляет пользовательские переменные (custom variables) и сегменты (имеется в виду сегментирование в GA), сколько аналитических сервисов вы бы не использовали. Вы отслеживаете поведение авторизованных пользователей в Google Analytics, Mixpanel и KISSmetrics? Создайте правило в Google Tag Manager, которое использует все три пользовательских тега, если слой данных с именем ‘logged_in’ = yes.

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

Текст и атрибут объектной модели документа (DOM)

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

Давайте вернемся к моему Tumblr в качестве примера. Эта страница включает в себя код:

Stars and Astral Cars

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

Но я не уверен, что у вас будут все необходимые данные, прекрасно размеченные таким образом.

Google Analytics

Небольшое примечание по установке Google Analytics через Google Tag Manager:

Основная установка Google Analytics через Google Tag Manager действительно проста. Вы будете использовать правило «Всех страниц», которое Google предоставляет по умолчанию.

Если вы планируете делать более сложные вещи, такие как отправка пользовательских переменных в соответствии с правилами, которые вы установили, вы должны будете использовать «Custom HTML», и появится необходимость в проверке, что вы установили правило для блокировки традиционного фрагмента:

Судя по всему, в скором будущем, когда Google займется этим, у Google Analytics появятся усовершенствования по работе с Google Tag Manager.

Заключение

Управление тегами является мечтой маркетологов. Подобно Google Analytics в 2006 году, Google Tag Manager вступил на платный рынок с бесплатным продуктом, который прочно стоит на ногах с момента запуска. Если Google Tag Manager следует модели Google Analytics, он будет продолжать улучшаться. Есть уже несколько особенностей, намеченных на будущие версии, такие как способность управлять фрагментами при А/В-тестированиях. У меня также есть стойкое ощущение, что Google Analytics охватит Google Tag Manager для своих предстоящих изменений в кросс-доменном отслеживании, что является очень трудоемкой задачей.

Если вас заинтересовала тема управлении тегами, но вас не устроил сервис от Google, предлагаю, я надеюсь, исчерпывающий перечень (спасибо еще раз Джастину Кутрони) других игроков в области управления тегами. Несмотря на то, что я не работал достаточно со всеми ними, некоторые даже более мощные, чем Google Tag Manager:

Источник

Что такое Google Tag Manager и как им пользоваться

Учимся работать с популярным диспетчером тегов: пошаговая иллюстрированная инструкция по настройке Google Tag Manager.

Что такое Google Tag Manager

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

Зачем нужен Google Tag Manager (GTM)

С помощью GTM на сайт можно добавить код разных служб аналитики: Google Analytics, «Яндекс.Метрики», Google Maps и других сервисов для мониторинга сайта.

Преимущества GTM

Термины Google Tag Manager

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

Фрагмент кода JS, который необходимо выполнить и к которому можно подключить триггер. У тега много разных функций: отслеживание трафика и поведение посетителей, анализ эффективности рекламы, ремаркетинг и таргетинг.

Условие для выполнения или блокировки тега. Триггер должен содержать какое-то событие: загрузка страницы, переход по ссылке, клик и так далее. Также для триггера есть фильтры, которые можно настроить. Например, указать URL страниц, на которых должен срабатывать тег.

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

Настройка Google Tag Manager

Перейдите на сайт Google Tag Manager и авторизуйтесь с помощью
Google-аккаунта. Если аккаунта нет, создайте и затем авторизуйтесь.

После авторизации создайте аккаунт для GTM или выберите из уже созданных. Я покажу настройку GTM на своем небольшом тестовом сайте sokratzona.info.

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

Для создания контейнера введите его название и укажите, где он будет использоваться. Я выбрал веб-сайт. Нажмите кнопку Создать.

Скопируйте код контейнера.

Если вы случайно закрыли окно с кодом и не скопировали его, ничего страшного, найти его можно, нажав на идентификатор контейнера в правом верхнем углу.

Нажмите на идентификатор, и у вас появится окошко с кодом. Скопируйте его и разместите на своем сайте.

В моем случае файл, куда я поместил код, называется index.html. Если вы используете CMS, возможно что файл будет называться header.php или еще как-то.

Как создать тег в Google Tag Manager

Давайте подключим сайт к Google Analytics. В рабочей области в карточке Новый тег нажмите на ссылку Добавить новый тег.

Далее перейдите в Конфигурацию тега и выберите его тип. Например, Google Аналитика — Universal Analytics.

Укажите идентификатор отслеживания. Найти его можно в аккаунте Google Analytics, Администратор — Настройки ресурса — Идентификатор отслеживания.

В качестве типа отслеживания выберите Просмотр страницы. В категории Триггеры выберите All Pages. Сохраните изменения.

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

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

Проверьте корректность работы Google Analytics. Да, все работает.

Как настроить и использовать триггеры GTM

Триггеры находятся в меню рабочей области GTM.

Выберите тип триггера.

Выбрав тип триггера, настройте условие его активации: укажите тип переменной Click URL и ссылку, переходы по которой будете отслеживать.

Как использовать переменные GTM

Чтобы задействовать переменные, выберите соответствующий пункт в меню рабочей области GTM.

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

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

Какие задачи можно решить с помощью Google Tag Manager

1. Отслеживать клики по кнопкам соцсетей

Создайте тег Пользовательский HTML и скопируйте код кнопок шеринга сервиса, которым вы пользуетесь.

Укажите триггер All Pages. Сохраните и опубликуйте контейнер. Триггер можно указать как для всех страниц, так и выборочно.

Вот, что получилось после публикации:

2. Внедрять микроразметку

Так же, как и в предыдущем примере, сгенерируйте код с помощью сервиса Schema или любого другого. Создайте тег Пользовательский HTML и разместите туда полученный код, настройте активацию триггера. Вот так настраивается микроразметка.

3. Отслеживать переходы по внешним ссылкам

Создайте новый тег. Тип тега выберите Universal Analytics.

Настройте конфигурацию тега.

Настройте триггер. Выберите тип Только ссылки, отметьте пункт Некоторые ссылки и назначьте событие активации триггера.

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

Посмотрите в Google Analytics вкладку события в режиме реального времени.

4. Просматривать показатель отказов

Любое посещение сайта без совершения целевых действий Google Analytics считает отказом. Например, вы просмотрели одну страницу, не зарегистрировались или не подписались на рассылку, не заказали услугу, не связались посредством формы обратной связи и не поделились контентом — это и есть отказ.

Даже если по итогу вы позвонили по указанному на сайте телефону, а не через кнопку обратного звонка, и купили товар, все равно Google Analytics учтет вас как «отказника». Такое состояние дел несколько искажает действительность и не дает реальной картины.

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

Чтобы настроить показатель отказов, создайте тег Universal Analytics, тип отслеживания Событие.

Затем укажите для тега триггер Таймер и задайте нужный интервал в миллисекундах.

Проверьте подключение тега.

В Google Analytics показатель уменьшился.

Заключение

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

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

Автор статей по дизайну. В веб-дизайн пришел в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил верстку. Время от времени публикую переводы на хабре.

Источник