Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса

Диспетчер тегов Google (Google Tag Manager, сокращенно: GTM) — это бесплатный сервис, который облегчает работу с тегами на сайтах. С помощью GTM вы можете легко изменять код на страницах, добавлять новые фрагменты и объединять свой сайт со службами аналитики, такими как: Google Analytics, Яндекс.Метрика DoubleClick, AdRoll, Kiss Metrics и др. Огромное преимущество Google Tag Manager в том, что вы можете управлять кодом самостоятельно, даже если вы далеки от кодинга.

Давайте разберем, как настроить Google Tag Manager и где его использовать. 

Для каких целей GTM нужен владельцу онлайн-бизнеса

С Google Tag Manager вы можете:

  • внедрять на вашем сайте сервисы веб-аналитики: Google Analytics, Яндекс.Метрику и др.;
  • настраивать пиксели, чтобы собирать данные по аудиториям (Фейсбук, ВК);
  • запускать A/B-тестирования;
  • редактировать теги, не привлекая программистов.

Плюсы Google Tag Manager

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

Минусы Google Tag Manager

  • Часто есть зависимость от исходного кода страниц сайта. 
  • Если будет изменена структура страницы или свойства отдельного элемента могут слететь ранние настройки (проблема решаема).

Основные понятия из GTM

Есть 4 составляющие диспетчера тегов Google:

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

2. Тег. Это часть кода, установленная на странице, которая передает данные в системы аналитики и другие сторонние приложения. Также с помощью тегов можно запускать кампании ремаркетинга, отправлять электронные письма пользователям, которые бросили свои корзины, изменять содержимое для A/B-тестов и т.д.

3. Триггер. Это установленное условие, которое запускает тег. Например, счетчик сработает, если пользователь нажмет на кнопку «Купить».

4. Переменная.Функция, которая позволяет запускать теги или триггеры и фиксировать действия или изменения на странице (например, действия пользователей на сайте, оплаты и т.д.).

Регистрируемся в Google Tag Manager

Перейдите на сайт Google Tag Manager войдите в ваше Google-аккаунт. Если вы не создавали его ранее, то нажмите «Создать аккаунт» и пройдите регистрацию.

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 6072

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

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 6378

Далее система предложит ознакомиться с соглашением об условиях использования GTM. Ознакомьтесь с ними и примите их, нажав на кнопку «Да».

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 8732

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

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 7752

Дальше он нам пригодится для настройки Google Tag Manager на сайте.

Настраиваем Google Tag Manager на стороне ADVANTSHOP

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

Шаг 1. Переходим в административную часть воронок. Выбираем воронку для которой мы хотим настроить аналитику. Нажимаем на карандашик для настройки.

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 5438

Шаг 2. Переходим в раздел «Счетчики».

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 2455

Шаг 3. По инструкции размещаем одну часть кода в head, вторую часть в body.

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 9242

Готово.

Теперь добавим код Диспетчера тегов в интернет-магазин.

1. Переходим в административную панель, нажимаем на вкладку «Настройки» → SEO и счетчики.

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 2282

2. Переходим в раздел «Google Analytics».

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 7816

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

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 7735

Нажимаем кнопку «Сохранить» и все готово.

После установки кода на свой сайт можно добавить и настроить теги и переменные в интерфейсе Менеджера тегов.

Создаем тег в Google Tag Manager

Тег — это фрагмент кода, который обычно помещается в часть страницы. Он позволяет сторонним сервисам собирать данные и проводить анализ. 

Как создать тег:

1. В личном кабинете GTM в карточке «Новый тег» нажмите «Добавить новый тег».

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 6337

2. Перейдите в параметры тега, нажмите на карандашик в углу и выберите тип тега. Например, Google Analytics.

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 8910

3. Вставьте идентификатор отслеживания. Чтобы его найти, откройте Google Analytics, перейдите на вкладку «Администратор», выберите «Настройки ресурса» и найдите идентификатор отслеживания. 

Для типа отслеживания выберите «Просмотр страницы». В категории «Триггеры» выберите «All Pages». Нажмите «Сохранить».

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 5718

4. Опубликуйте изменения, которые вы только что внесли в свой контейнер. Для этого нажмите кнопку «Отправить».

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 1671

На стороне Google Analytics проверьте, все ли корректно работает. Готово.

Настраиваем триггеры в GTM

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

Как настроить триггер:

1. В меню GTM перейдите во вкладку Триггеры → Создать.

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 9192

2. Затем выберите тип триггера.

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 7594

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

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 8138

4. Нажимаете Сохранить и готово.

Отлаживаем переменные в GTM

Переменные уточняют триггеры и теги. К примеру, по переменной URL к триггеру «Просмотр страницы» определяется какая именно страница нас интересует — главная, каталог, карточка товара и т.д.

Как настроить переменные:

1. В меню слева перейдите в раздел Переменные. В этом окне вы можете настраивать встроенные шаблоны переменных или создавать свои, в разделе Пользовательские.

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 3589

2. Во встроенных переменных нажмите Настроить. Справа откроется список доступных переменных. После того, как вы отметите нужные переменные, они станут доступны в фильтре триггера.

Как настроить Google Tag Manager. Гид для владельцев онлайн-бизнеса - 5187

Теперь вы сможете настраивать и менять типы переменных для решения своих повседневных задач. 

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