Что такое Google Tag Manager, зачем он нужен и как его использовать в бизнесе. Основы работы с GTM

Что такое Google Tag Manager и зачем он нужен. Основы работы с GTM

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

      “Зачем ты мучаешься с этими кодами отслеживания, пишешь огромные ТЗ и ждешь, когда программист их внедрит? Используй Google Tag Manager и твоя жизнь будет проще.” — такую фразу в какой-то момент слышали многие маркетологи, которые сейчас используют этот инструмент на благо своего бизнеса.

      Вам знакома такая ситуация: нужно поставить на сайт код отслеживания, вы пишете ТЗ программисту и ждете… ждете… ждете…? Когда не используешь GTM

      Если да, тогда эта статья для вас 😉

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

  1. Почему стоит использовать Google Tag Manager
  2. Регистрация аккаунта
  3. Установка диспетчера тегов на сайт
  4. Теги, что это такое и зачем они нужны
  5. Работа с триггерами в GTM
  6. Переменные в диспетчере тегов Google

 

Почему стоит использовать Google Tag Manager

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

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

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

Регистрация аккаунта в диспетчере тегов Google

      Чтобы создать аккаунт нужно сделать всего несколько простых действий:

  • Залогиниться в свою учетную запись Google или, если такой нет, то создать ее;
  • Ввести данные по аккаунту:
  1. В поле Название аккаунта вводим название вашей компании;
  2. Выбираем страну, в которой работает компания;
  3. Галочку в этом пункте ставим в зависимости от желания и доброты душевной.Окно ввода данных по аккаунту в Google Tag Manager
  • Заполнить данные для создания контейнера:
  1. Указываем название ресурса, для которого регистрируем аккаунт. В большинстве случаев это адрес вашего сайта;
  2. Выбираем где будет использоваться контейнер. Обычно диспетчер тегов используют для веб сайтов и AMP страниц;
  3. И не забываем нажать кнопку “Создать”.Создание нового контейнера в Google Tag Manager
  • Осталось принять соглашения об условиях использования и можно приступать к установке на сайт.Соглашение об условиях использования диспечера тегов Google

Установка диспетчера тегов на сайт

      Перед тем как начать работу с Google Tag Manager вам нужно установить его на сайт. И здесь, есть несколько вариаций:

  • сделать это самостоятельно. Самый быстрый способ, но требует определенных навыков программирования;
  • использовать различные плагины CMS вашего сайта для установки GTM — навыков программирования не требует, но нужно потратить время на поиск соответствующего плагина. Плюс всегда есть вероятность, что при установке таким способом код будет срабатывать не на всех страницах сайта или возникнут другие ошибки. В большинстве случаев это не самый оптимальный, хотя и самый простой способ;
  • написать ТЗ программисту и дождаться его внедрения. Почему бы напоследок не воспользоваться его услугами 🙂 Это самый оптимальный способ, да и времени он занимает очень мало.

Написание ТЗ программисту

            В конце, когда вы создали контейнер, вы должны были увидеть следующее окно:Установка кода Google Tag Manager на сайт

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

      Если вдруг вы закрыли это окно, то найти инструкцию можно просто кликнув на идентификатор контейнера вверху меню.Идентификатор контейнера в GTM

Проверка корректности установки GTM на сайте

      Конечно, написать ТЗ это еще только полдела. Нужно убедиться в корректности установки кодов. Здесь, как в Матрице — два варианта:

  • Перейти в исходный код сайта и посмотреть все ли верно:Проверка корректности установки GTM в исходном коде сайта
  • Использовать расширение Google Tag Assistant. Оно позволяет увидеть все коды отслеживания компании Google, которые стоят на сайте, а также подсказывает, если какой-то из них установлен неверно. Например, на скриншоте ниже мы видим, что диспетчер тегов с идентификатором GTM-NS4QQ3P установлен некорректно, о чем свидетельствует красная пиктограмма возле него.Проверка корректности установки GTM через Google Tag Assistant

      Чтобы более детально узнать об ошибке, необходимо кликнуть на выделенный блок. Теперь мы видим больше информации по нашему тегу. Снизу, в отдельном блоке Where to optimize отображается информация, с чем связана ошибка. В нашем случае мы видим, что код ответа HTTP — Status 404. Данная ошибка связана с тем, что наш контейнер пуст и в нем не опубликовано никаких настроек. Если информации по ошибке в блоке Where to optimize вам не достаточно, есть возможность нажать на знак “?” и получить еще более детальное описание ошибки.Ошибка Status 404 в Google Tag Assistant

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

Теги в Google Tag Manager, что это такое и зачем они нужны

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

      Тег — это фрагмент кода, который вы размещаете на своем сайте. Вы можете использовать как встроенные шаблоны для настройки тегов, например для Google Analytics или Hotjar или же добавлять пользовательские фрагменты с помощью тегов типа Пользовательский HTML и Пользовательское изображение.Виды тегов в GTM

      Другими словами, если вы хотите добавить на сайт какой-то код отслеживания, то для этого вам необходимо создать тег с определенными настройками. Например, для установки кода Google Analytics с помощью GTM нужно создать следующий тег:Настройка тега для установки кода Google Analytics с помощью GTM

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

Работа с триггерами в GTM

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

      Триггер — это условие, когда тег (фрагмент кода) должен сработать. Например, если мы хотим установить код Google Analytics, то согласно инструкции, он должен быть размещен на каждой странице нашего сайта. Поэтому, будем использовать триггер All Pages.

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

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

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

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

Переменные в диспетчере тегов Google

      Если очень упростить, то переменную можно представить как пару ключ — значение. Где ключ — это название переменной. При работе с GTM вы обнаружите два типа переменных: встроенные и пользовательские.

Встроенные переменные

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

      При этом встроенные переменные можно разделить условно еще на две категории: включенные по умолчанию и те, которые нужно включить самостоятельно. Чтобы добраться до вторых, нужно нажать на кнопку Настроить в верхнем правом углу и отметить галочками переменные, которые вы хотите включить.Настройка встроенных переменных в GTMВключение встроенных переменных в GTM

      Во встроенных переменных в основном хранится расширенная техническая информация о совершенном действии. Например, в момент события клика по кнопке в переменной Click Classes будет храниться информация о классе кнопки, по которой был клик; в переменной Click Text будет храниться информация о тексте, который был на этой кнопке.

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

      Если же вам недостаточно той информации, которая есть во встроенных переменных и вы хотите хранить какие-то свои данные — можете создать пользовательскую переменную. Например, у нас может быть переменная с названием UA_ID в которой мы будем хранить идентификатор Google Analytics со значением UA-92839822-1. В таком случае нам не придется каждый раз при настройке нового события бежать в аккаунт Google Analytics и искать там идентификатор.Настройка пользовательской переменной с индентификатором Google Analytics

Вместо заключения

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

      Если у вас появляются вопросы в работе с этим инструментом — пишите их в комментарии.