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

Google Tag Manager: неочевидные и полезные настройки триггеров

Маркетолог в Otzyvmarketing Станислав Романов рассказал, как с помощью диспетчера тегов Google Tag Manager (GTM) настроить аналитику и отслеживать скачивание файлов с сайта. Статья для тех, кто знает основы языка JavaScript и уже работал с GTM.

Что такое dataLayer

DataLayer — обычная переменная JavaScript. В нее можно записывать данные, чтобы затем передать их сервисам Google:

Название переменной можно изменить — вместо переменной dataLayer использовали имя dataOlga:

Различие dataLayer=[] и dataLayer.push()

Если объявить dataLayer=[], то в памяти компьютера это имя будет ссылаться на целый массив. Таким образом, присваивание переменной новых данных означает простую перезапись значений. Теряется доступ к переменным из первого массива.

Это выглядит примерно так:

Google Tag Manager: неочевидные и полезные настройки триггеров

При этом dataLayer.push() — не переменная и не массив. Это метод, который можно применять к любому массиву и либо получать что-то на выходе, либо как-то изменять сам массив. Иными словами, берем массив dataLayer и применяем к нему метод push() — получаем dataLayer.push(). Push не перезаписывает данные, как в случае переопределения массива, а добавляет к массиву новые значения.

Лучше всего при работе с GTM использовать метод push так:

В таком виде push нужно применять, чтобы дополнительно проверить, была ли вообще задана переменная dataLayer как массив. Проверка позволяет избежать ненужных ошибок при работе сайта.

Как настроить аналитику на одностраничниках

GTM позволяет без проблем синхронизировать работу одностраничника с Google Analytics. Под одностраничником я подразумеваю сайт, где все страницы имеют единственную оболочку, а новые данные появляются на сайте динамически посредством AJAX. Он мешает обычной работе GA, поэтому тут не обойтись без триггера GTM:

После создания триггера следует применить его к Universal Analytics:

Google Tag Manager: неочевидные и полезные настройки триггеров

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

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

1. Настраиваем переменные

Заходим в настройки раздела «Переменные» и выбираем New History Fragment и History Source — они нужны для сохранения URL вместе с get-запросами и их проверки.

После этого придется поработать с JavaScript и создать свою переменную getPathWithFragment, в которую записываем URL. Адрес отправится в GA и таким образом поможет аналитике Google разобраться, когда URL на самом деле меняется:

Код возвращает путь, строку и хеш URL-адреса.

2. Создаем триггер

После настройки триггера History fragment change выбираем его тип. Здесь следует взять History change и выбрать активацию popstate. Все эти манипуляции позволят зафиксировать изменение активной записи истории:

Google Tag Manager: неочевидные и полезные настройки триггеров

3. Настраиваем тег

Далее настраиваем Universal Analytics. В настройках выбираем Page и переменную getPathWithFragment, которую создали ранее:

Google Tag Manager: неочевидные и полезные настройки триггеров

Вот и все, осталось только добавить триггер History fragment change и проверить работу тега.

4. Для чего нужен тег

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

Как отслеживать исходящие ссылки и загрузки файлов

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

1. Создаем переменную

Нам нужно объявить новую переменную, которая будет регистрировать событие. Можно назвать ее Click_URL_Hostname. Поскольку переменная будет содержать адрес, то ее тип будет URL. При этом лучше убрать www, чтобы избежать удвоения информации:

Google Tag Manager: неочевидные и полезные настройки триггеров

2. Создаем триггер

Выбираем тип «Только ссылки». В качестве условия выбираем ранее созданную переменную Click_URL_Hostname:

Google Tag Manager: неочевидные и полезные настройки триггеров

3. Создаем тег

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

Google Tag Manager: неочевидные и полезные настройки триггеров

Если все сделали правильно, то тег должен работать. Конечно, его нужно проверить с помощью отладчика. Отметим, что UA — это постоянная, в которую записан ID аналитики. Это обычный прием программистов: вместо чисел использовать константы, чтобы потом легко производить массовые замены.

Google Tag Manager: неочевидные и полезные настройки триггеров

Станислав Романов

Курс

Веб-аналитика

Узнать больше

  • Прокачайте свои знания в Google Analytics, Яндекс.Метрике, Google Tag Manager, Google Data Studio и Excel
  • Научитесь настраивать счётчики и цели, собирать данные и определять эффективность бизнеса
  • Узнайте, как оптимизировать трафик и находить точки роста для компании

Как отслеживать скачивание файлов с помощью Google Tag Manager

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

Создаем триггер, выбираем в качестве типа «Только ссылки». Далее настраиваем активацию Click URL:

Google Tag Manager: неочевидные и полезные настройки триггеров

Такая настройка GTM позволит зафиксировать скачивание файлов с расширением xlsx, pdf, docx, zip и csv.

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

Мнения экспертов: почему выбирают Google Tag Manager

Google Tag Manager: неочевидные и полезные настройки триггеров

Дмитрий Ничипоров

С пециалист по платному трафику в Elama

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

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

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

Ясно, что для компаний, в которых нет штатного программиста, GTM будет незаменимым диспетчером тегов. Ведь никаких особенных знаний для его использования не требуется. Достаточно базового понимая того, как устроены html и js.

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

Google Tag Manager: неочевидные и полезные настройки триггеров

Денис Лисогоря

Digital-аналитик в OWOX BI

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

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

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

На данный момент есть Галерея шаблонов (Community Template Gallery), в которой вы найдете шаблоны тегов, помогающие решить практически любые задачи, например настроить сбор данных для расширенной электронной торговли. Короче говоря, GTM – это целый океан возможностей!».

Мнение автора и редакции может не совпадать. Хотите написать колонку для Нетологии? Читайте наши условия публикации. Чтобы быть в курсе всех новостей и читать новые статьи, присоединяйтесь к Телеграм-каналу Нетологии.

Настройка Google Tag Manager в 2019 | правильная настройка веб-аналитики и пикселей соцсетей

Представляем актуальную информацию по первоначальной настройке Google Tag Manager (для нового сайта) по шагам.

При переходе на официальный сайт GoogleTagManager,
вы попадаете на страницу https://www.google.com/intl/ru/tagmanager/

При добавлении нового аккаунта можно использовать название компании.
Это удобно в случае работы в GTM с несколькими сайтами:


Создание аккаунта

Если вы управляете несколькими сайтами, аккаунт Google Tag Manager – это, своего рода, пространство для хранения кода отслеживания WEB-аналитики. В нем могут храниться контейнеры для нескольких сайтов. Каждый отдельно взятый контейнер может включать в себя счетчики Google Analytics, Yandex Metrika, пиксели ВКонтакте или Facebook, а так же настроенные цели для конкретного сайта.


Настройка контейнера

– Указываем домен сайта;
– Соглашаемся с конфиденциальностью;
– Далее – размещаем получившийся код один раз согласно инструкции на всех страницах сайта (в случае с HTML), в случае c сайтом под управлением CMS, нужно установить код только на главную страницу (либо воспользоваться специальным плагином – прим. Metronet Tag Manager для WordPress);

Код контейнера GTM для сайта immedia.by, сохраненный в блокноте google keep

– Проверяем, работает ли тег-менеджер (проверить можно c помощью плагина Tag Assistan для Google Chrome, либо из личного кабинета, выбрав “Предварительный просмотр”)

Выбрать “Предварительный просмотр” в панели управления и перейти на сайт

На сайте, в режиме предварительного просмотра отображается панель GTM с необходимой информацией

проще: установить расширение Tag Assistan для Google Chome и проверить там:


– Важно: после того, как вы внесли новые теги, не забудьте нажать “Отправить” в панели управления GTM.

Установка Google Analytics

Регистрируем аккаунт в системе по ссылке: analytics.google.com

– Далее копируем Идентификатор отслеживания в разделе
“Администратор” – “Код отслеживания”
*Если код счетчика уже установлен на ваш сайт, рекомендуем перенести его в контейнер GTM.

– Для того, чтобы добавить код отслеживания Google Analytics, переходим на сайт google tag manager, заходим в нужный контейнер и добавляем новый тег

Проводим базовую настройку в появившемся окне:


– Изменяем имя, выбираем тип тега “Universal Analytics”.


– Для того, чтобы код появился на всех страницах сайта,
выбирайте All PAges в разделе Триггеры.

– Далее установите галочку напротив “Включить предопределение настроек в этом теге” и вставьте скопированный в аккаунте Google Analytics “Идентификатор отслеживания” в “Параметры отслеживания”

Если вы сделали все по инструкции, счетчик Google Analytics будет доступен на всех
страницах вашего сайта.

Установка Yandex Metrika

В Yandex Метрике есть отчеты, которые не видны в Google Analytics,
поэтому для более полной картины мы устанавливаем на сайт обе системы аналитики.

В настройках счетчика Yandex включаем функцию “Вебвизор, карта скроллинга, аналитика форм”, а в разделе “Дополнительные настройки”
убираем галочку со строки “Информер”
(если не нужен базовый информер Яндекс на сайте).

Таким образом, мы создали счетчик Yandex-метрика с функцией Веб-визор и Тепловая карта.

Установка в кода Yandex Metrika в Тег Менеджер

– Так как Yandex Metrika – не продукт Google, в разделе ТЭГ мы выбираем п ользовательский HTML.

– В разделе Тригеры выбираем ALL PAGES для того, чтобы метрика автоматически установилась на все страницы сайта.



Установка пикселя ВК

По аналогии с Yandex устанавливаются все счетчики и пиксели: в том числе, ретаргетинг ВК , пиксель FB и т.д.

– Скопируйте код отслеживания из рекламного кабинета vk.com и вставьте его как как “Пользовательский HTML”.
– По аналогии добавляется Facebook Pixel


Отправка изменений

На данном этапе, установленные сервисы находятся внутри Tag Manager.
Для того, чтобы добавить их на сайт, нужно нажать “Отправить” – далее добавить комментарий и опубликовать.

Выводы

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

Как настроить аналитику с помощью Google Tag Manager

Специалист по платному трафику eLama Дмитрий Ничипоров подготовил актуальную инструкцию по работе с Google Tag Manager.

Правильная настройка веб-аналитики в интернет-рекламе важна для оценки и повышения эффективности кампаний.

Проще говоря, благодаря правильно настроенной веб-аналитике мы:

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

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

Есть два варианта настройки веб-аналитики.

Первый — сложный. Нужно поставить на сайт Яндекс.Метрику, Google Analytics, коды ремаркетинга рекламных систем (Facebook Pixel, пиксель ВКонтакте, счетчик Top.Mail), а также коллтрекинг (если лидом является звонок).

Затем — настроить отправку событий, конверсии и цели. Чтобы настроить отправку событий в рекламные и аналитические системы, часто требуется знание JavaScript, CSS и принципов работы с библиотеками типа JQuery.

А если появятся новые события и цели или новый сайт, все эти действия придется проделать заново.

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

Google Tag Manager — это система управления тегами.

Основные сущности внутри GTM — это контейнер, тег, триггер и переменная.

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

Тег — это действие, которое выполняет GTM (активация счетчика Google Analytics или Яндекс.Метрики, отправка события по конверсии и другие).

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

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

Google Tag Manager подойдет, если:

  • надо установить системы аналитики (их коды);
  • установить коды сервисов коллтрекинга или онлайн-чатов и других сервисов;
  • нужно отправлять события и фиксировать конверсии в нескольких системах аналитики;
  • у вас интернет-магазин и надо настроить e-commerce аналитику;
  • у вас нет веб-программиста, вы настраиваете все сами и хотите, чтобы было просто и удобно.

Что еще можно делать с помощью GTM:

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

Чтобы создать аккаунт в Google Tag Manager, нужна учетная запись Google (проще говоря, почта на Gmail). После ее создания (или если она уже есть) переходим на tagmanager.google.com и нажимаем «Создать аккаунт».

Даем названия аккаунту и контейнеру. Выбираем целевую платформу: сайт, приложение или amp-страница. Нажимаем «Создать» и принимаем пользовательское соглашение.

Если все сделано правильно, появится всплывающее окно «Установить Google Менеджер тегов».

Копируем код из первого поля. Его нужно поставить перед закрывающим тегом </head> в коде вашего сайта. (В зависимости от конкретного сайта это можно сделать через файл типа index.html, использовать плагин или же интегрировать GTM напрямую.) Код из второго поля ставим после открывающего тега <body>.

После этого нужно проверить, работает ли GTM на сайте. Можно использовать режим предварительного просмотра или расширение Google Tag Assistant.

Настройка и установка Менеджера тегов

Google Менеджер тегов позволяет настраивать и развертывать теги, в том числе для Google Рекламы, Google Аналитики и Floodlight, а также сторонних решений. Чтобы воспользоваться Менеджером тегов, выполните следующие действия:

  1. Войдите в аккаунт или зарегистрируйтесь на странице tagmanager.google.com. Новый контейнер будет создан по умолчанию, и вы сможете создавать дополнительные контейнеры в каждом аккаунте.
  2. Установите контейнер на сайте или в мобильном приложении.
    1. Для сайтов и AMP-страниц: добавьте фрагмент-контейнер, следуя инструкциям, показанным в Менеджере тегов, и удалите все прежние теги.
    2. Для мобильных приложений: используйте Firebase SDK для Android или iOS.

    Аккаунт – высший уровень иерархии в Менеджере тегов. Как правило, для компании достаточно одного аккаунта. В аккаунте Менеджера тегов есть один или несколько контейнеров. Существуют типы контейнеров для сайтов, AMP-страниц, приложений Android и iOS.

    Как создать аккаунт и контейнер

    1. Откройте Менеджер тегов и нажмите АккаунтыСоздать аккаунт.
    2. Укажите название аккаунта и при желании установите флажок «Передавать анонимные данные в Google и другие службы».
    3. Нажмите Далее.
    4. Введите информативное название контейнера и выберите тип ресурса: Веб-сайт, AMP, iOS или Android. Если вы создаете контейнер для мобильного приложения, выберите также вариант SDK: Firebase или Устаревший.
    5. Нажмите кнопку Создать.
    6. Ознакомьтесь с Условиями использования и примите их, нажав кнопку Да.

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

    Как добавить контейнер в существующий аккаунт

    1. В Менеджере тегов нажмите Аккаунты рядом с названием нужного аккаунта.
    2. Выберите Создать контейнер.
    3. Введите информативное название контейнера и выберите тип ресурса: Веб-сайт, AMP, iOS или Android. Если вы создаете контейнер для мобильного приложения, выберите также вариант SDK: Firebase или Устаревший.
    4. Нажмите кнопку Создать.
    5. Ознакомьтесь с Условиями использования и примите их, нажав кнопку Да.

    Установка контейнера

    1. В Менеджере тегов откройте раздел Рабочая область.
    2. Вверху страницы вы увидите идентификатор контейнера в формате GTM-XXXXXX.
    3. Нажмите на идентификатор.
    4. Скопируйте и вставьте фрагменты кода на свой сайт в соответствии с инструкциями, показанными в Менеджере тегов, или скачайте и установите нужный SDK для мобильного приложения. Ниже приведены советы для веб-страниц, AMP-страниц и мобильных приложений.
    • Разместите верхний фрагмент кода (начинающийся со <script> ) в разделе <head> веб-страницы. Желательно сделать это как можно ближе к открывающему тегу <head> , но после деклараций dataLayer.
    • Разместите нижний фрагмент кода (начинающийся с <noscript> ) сразу после тега <body>.

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

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

    Если у вас есть причины использовать адреса без указания протокола (например, для поддержки незащищенных страниц), измените https:// на // в исходном URL во фрагменте контейнера. Подробнее…

    Пошаговая настройка Google Tag Manager для начинающих

    Google Tag Manager позволяет легко управлять тегами на сайте, не беспокоясь о коде – без навыков программирования. Как его настроить – смотрите в этой статье.

    Что такое Google Tag Manager (Менеджер тегов)

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

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

    То же самое относится к любому другому стороннему плагину, скрипту.

    Чтобы избавить аудиторию от подобных «головняков», Google создал Менеджер тегов (Google Tag Manager). С ним нет нужды вручную добавлять и проверять работу кодов сторонних сервисов и программ.

    Что такое теги

    Тегами называют фрагменты кода тех самых плагинов – скриптов, что вы ставите себе на сайт. Обычно они помещаются в часть страницы. Чаще всего это упомянутый Google Analytics; настройка ретаргетинга; авторассылка по брошенным корзинам в интернет-магазине; сервисы a/b тестов, тепловых карт, динамического контента и т.д.

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

    Что сделал Google

    Разработчики Google решили упростить жизнь «простым смертным» и создали Менеджер для управления тегами в одном месте. Теперь вы не вставляете каждый сторонний скрипт отдельно, а размещаете всё и работаете в панели управления Менеджера тегов. В результате вы:

    1) Видите все скрипты и к каким событиям они привязаны (отслеживание конверсий по клику на кнопку «Оставить заявку», например);

    2) Не лезете в код страниц на сайте. Добавление и настройка Google Analytics, отслеживание конверсий Google Ads, настройка ремаркетинга и много другого происходит из личного кабинета Google Tag Manager;

    3) Любые изменения можно с легкостью отменить и вернуть на более ранний уровень, а также следить за тем, кто, где и когда их вносил;

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

    Итак, переходим к процессу настройки.

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

    Google Tag Manager – вход

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

    2) Дальше вы создаете личный аккаунт уже конкретно в Менеджере тегов. Для начала даете ему название:

    Настройка Google Tag Manager – создание аккаунта

    В качестве имени контейнера лучше всего указать доменное имя сайта.

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

    3) Задайте настройки контейнера:

    Настройка Google Tag Manager – создание представления

    Это выбор платформы, где будет использоваться Google Tag Manager – веб-сайт, мобильная версия под iOS или Android , либо страницы AMP-формата.

    Примите условия использования GTM и переходите непосредственно к коду.

    4) GTM сгенерирует персональный код, который нужно вставить на любую страницу сайта, где требуется установка и отслеживание скриптов. Чаще всего это не одна, а все страницы.

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

    Настройка Google Tag Manager – код Менеджера тегов

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

    Когда установка завершится, мы приземляемся на странице «Обзор».

    Как добавлять теги в Google Tag Manager

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

    Установка тега Google Tag Manager

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

    Google Tag Manager – типы конфигураций

    Настройка Google Tag Manager – тег Google Аналитики

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

    Например, переменную настроек счетчика Google Аналитики. Это пользовательская переменная.

    Настройка Google Tag Manager – добавление пользовательской переменной

    Настройка Google Tag Manager – добавление утилиты Настройки Google Analytics

    Подмена контента с помощью Google Tag Manager

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

    Чтобы настроить подмену контента на странице, установите код GTM на неё, как мы описывали раньше. Дальнейший алгоритм такой:

    1) Создайте триггер типа «Просмотр страницы»:

    Google Tag Manager – создание триггера для настройки подмены

    Укажите условие, при котором триггер будет срабатывать (в третьем поле напишите слово, которое есть в ссылке на лендинг):

    Google Tag Manager – условие для триггера

    2) Создайте тег типа «Пользовательский тег HTML»:

    Google Tag Manager – создание пользовательского HTML-тега

    В появившееся окно вставьте следующий код:

    Google Tag Manager – код для пользовательского HTML-тега

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

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

    Если вы хотите подменять, допустим, текст кнопки, в окно для HTML тега вставьте следующую строку:

    document.getElementById(‘button1′).innerHTML=’Новое название кнопки’;

    Разумеется, придется разбираться в настройке, читать справочные материалы, чтобы всё реализовать по уму. Нет возможности разметить все элементы, которые хотите подменять на странице, как в сервисе Yagla.

    И еще одна сложность: по умолчанию нельзя посмотреть, как сработала каждая подмена. Придется отдельно подключать сбор статистики, например, через системы аналитики.

    Как установить Google Tag Manager на свой сайт

    Денис Лисогоря photo

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

    Вы один раз устанавливаете на сайт код самого Диспетчера тегов — после этого все остальные настройки можно выполнять в интерфейсе сервиса, не привлекая программистов. Подробнее о том, что такое Google Tag Manager и как он работает в связке с Google Analytics, вы можете узнать в нашей статье. Если вы уже знакомы с этой информацией, не будем терять времени и перейдем к установке GTM.

    Если кратко, то для установки Google Tag Manager вам потребуется:

    • Создать аккаунт и контейнер в Google Tag Manager
    • Установить код Google Tag Manager на сайт
    • Опубликовать контейнер
    • Проверить работу Google Tag Manager

    1. Создайте аккаунт и контейнер в Google Tag Manager

    На стартовой странице Диспетчера тегов нажмите кнопку «Регистрация» и войдите, используя свой Gmail адрес или любой другой Google аккаунт:

    Теперь нужно завести аккаунт непосредственно в Диспетчере тегов. Для это нажмите «Создать аккаунт»:

    Создание аккаунта в Google Tag Manager

    Придумайте название для аккаунта — здесь удобнее всего использовать название вашей компании. Затем выберите страну, установите галочку напротив «Передавать анонимные данные в Google и другие службы» (опционально) и нажмите «Далее»:

    Теперь необходимо настроить контейнер. Если сравнивать структуру Google Tag Manager со структурой Google Analytics, то контейнер — это аналог ресурса в GA. В нем хранятся теги, триггеры и переменные для всего сайта. В одном аккаунте GTM может быть несколько контейнеров: для сайта, для мобильного приложения, для AMP-страниц и т.д. Чтобы было удобно, контейнер лучше назвать именем того ресурса, для которого он создается. К примеру, это может быть адрес вашего сайта.

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

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

    После этого вы увидите окно с фрагментом кода GTM, который нужно установить на ваш сайт:

    alt — Две части кода GTM для установки на сайт

    Вы можете сразу скопировать код и установить его на все страницы сайта, которые хотите отслеживать, или нажать «Ок» и сделать это позже, когда добавите в контейнер первые теги. Посмотреть и скопировать код можно в любой момент в меню «Администрирование» — «Установить Диспетчер тегов Google»:

    2. Установите код Google Tag Manager на сайт

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

    Код Google Tag Manager состоит из двух фрагментов и загружается асинхронно. То есть основная часть страницы продолжает загружаться, не дожидаясь загрузки GTM контейнера. Первую часть кода необходимо разместить в хедер страницы, как можно ближе к открывающему тегу <head>:

    Код GTM для установки в раздел <head>

    Это обусловлено тем, что чем выше разместить первый фрагмент, тем быстрее он будет загружаться. Если же вы вставите его в тег <body>, то рискуете терять данные о пользователях, которые покидают страницу до загрузки этого тега.

    Вторая часть кода работает как резервная и помогает отслеживать действия пользователей, у которых отключен JavaScript. Ее нужно расположить сразу после открывающего тега <body>:

    Код GTM для установки в раздел <body>

    Важно!

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

    Особенности установки Google Tag Manager на AMP страницы

    Если вы используете технологию AMP для быстрой загрузки и адаптации страниц под мобильные устройства, то первую часть кода нужно разместить перед закрывающим тегом </head>:

    А вторую часть кода следует вставить сразу после открывающего тега <body>:

    3. Опубликуйте контейнер

    Даже если вы не добавили в контейнер ни одного тега, рекомендуем опубликовать его сразу после установки кода GTM на сайт. Иначе контейнер будет вызывать ошибку 404. Это не критично, однако если вы отслеживаете JavaScript ошибки с помощью определенных сервисов, например TrackJS, то ошибки 404 будут отображаться в отчетах и засорять их. Чтобы не вызывать лишний стресс у разработчиков, лучше опубликовать пустой контейнер — это никому не навредит 🙂

    Чтобы опубликовать контейнер, зайдите на вкладку «Рабочая область» в Диспетчере тегов и нажмите кнопку «Отправить» в правом верхнем углу:

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

    Готово, контейнер опубликован.

    4. Проверьте работу Google Tag Manager

    После добавления кода Диспетчера тегов на сайт вы можете проверить, корректно ли передаются данные, с помощью специального аддона Google Tag Assistant. Это дополнение к браузеру Chrome, которое показывает, какие теги продуктов Google установлены на вашем сайте и как они работают.

    значок

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

    Проверка работы GTM с помощью Tag Assistant by Google

    Затем перейдите на страницу, которую хотите проверить, и кликните по значку Tag Assistant. Чтобы активировать аддон, нажмите кнопку «Enable»:

    Обновите текущую страницу, и Tag Assistant покажет, какие теги установлены на странице и как они работают. Зеленый цвет значка говорит о том, что данные передаются без нареканий, синий — что есть не критичные рекомендации, красный сигнализирует о серьезных проблемах:

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

    Больше информации о Tag Assistant вы найдете в справке Google.

    Еще пара полезных советов

    При установке кода GTM на сайт попросите разработчика добавить заодно и сниппет Google Optimize. Это не будет лишним, даже если сейчас вы не собираетесь экспериментировать с контентом сайта. Зато потом, когда вы захотите провести A/B тест, все уже будет готово.

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

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

    Что дальше

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

    0 0 голоса
    Рейтинг статьи

аято 3 сезон

дата выхода люцифер 1 сезон

как приручить дракона фильм дата выхода

Ссылка на основную публикацию