Содержание

Большая подборка материалов для изучения Google Tag Manager — Маркетинг на vc.ru

{«id»:106557,»url»:»https:\/\/vc.ru\/marketing\/106557-bolshaya-podborka-materialov-dlya-izucheniya-google-tag-manager»,»title»:»\u0411\u043e\u043b\u044c\u0448\u0430\u044f \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f Google Tag Manager»,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/marketing\/106557-bolshaya-podborka-materialov-dlya-izucheniya-google-tag-manager»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/marketing\/106557-bolshaya-podborka-materialov-dlya-izucheniya-google-tag-manager&title=\u0411\u043e\u043b\u044c\u0448\u0430\u044f \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f Google Tag Manager»,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/marketing\/106557-bolshaya-podborka-materialov-dlya-izucheniya-google-tag-manager&text=\u0411\u043e\u043b\u044c\u0448\u0430\u044f \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f Google Tag Manager»,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/marketing\/106557-bolshaya-podborka-materialov-dlya-izucheniya-google-tag-manager&text=\u0411\u043e\u043b\u044c\u0448\u0430\u044f \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f Google Tag Manager»,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/marketing\/106557-bolshaya-podborka-materialov-dlya-izucheniya-google-tag-manager»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u0411\u043e\u043b\u044c\u0448\u0430\u044f \u043f\u043e\u0434\u0431\u043e\u0440\u043a\u0430 \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u043e\u0432 \u0434\u043b\u044f \u0438\u0437\u0443\u0447\u0435\u043d\u0438\u044f Google Tag Manager&body=https:\/\/vc.ru\/marketing\/106557-bolshaya-podborka-materialov-dlya-izucheniya-google-tag-manager»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

15 421 просмотров

Новая книга по Google Tag Manager (2020)

Сегодня, 9 сентября 2020 года, в свет вышло мое новое электронное руководство по Google Tag Manager (2020).

Прошло два года с момента выхода первого издания электронной книги Google Tag Manager для googлят (2018), которая стала настольной для многих интернет-маркетологов и веб-аналитиков по всему миру. Все это время я посвятил разбору различных настроек с помощью диспетчера тегов Google, переосмыслению существующих знаний, и публикациям материалов в своем блоге. И чтобы мои подписчики и вы получили полное и системное представление о работе GTM, я решил всю информацию структурировать и выпустить в обновленном руководстве.

Книга состоит из 11 глав, в ней 536 страниц и более 1000 скриншотов. Вы познакомитесь с историей возникновения систем управления тегами, получите фундаментальные знания по основам JavaScript, CSS-селекторам, переменным, триггерам и тегам, а также пройдете пошаговый путь от установки счетчиков аналитики и создания целей на сайте до отслеживания сложных событий.

Название: Google Tag Manager
Официальная страница: gtmbook.osipenkov.ru
Дата выхода: 9 сентября 2020 года
Формат книги: электронный (.PDF)
Кол-во страниц: 536
Иллюстрации: есть (цветные)
Ознакомительный фрагмент: 30 стр. (Скачать)

Руководство распространяется платно, в электронном формате (.PDF). Купить официально ее можно только на моем сайте по ссылке: https://osipenkov.ru/product/gtm-book/.

Краткое содержание

Глава 1. Начало работы с диспетчером тегов Google. Глава посвящена истории возникновения систем управления тегами, регистрации аккаунта Google, повествует о принципах работы GTM, дает понимание о навыках и знаниях, необходимых для его уверенного использования при решения практических задач.

Глава 2. Интерфейс Google Tag Manager. Глава, в которой каждый элемент интерфейса Менеджера тегов Google разобран с рисунками и подробными комментариями.

Глава 3. CSS-селекторы. Отдельная глава, которая посвящена селекторам CSS. Вы узнаете о разных типах селекторов и научитесь использовать их для поиска нужных элементов на странице, чтобы потом применять их для условий активации триггеров, а также в пользовательских переменных.

Глава 4. Переменные. В главе рассматриваются типы данных, которые встречаются в JavaScript, выражения и операторы (присваивания, сравнения, арифметические, строковые, специальные и т.д.), затрагивается тема преобразования типов данных, а также разбираются все встроенные и пользовательские переменные, которые существуют в Google Tag Manager.

Глава 5. Триггеры. Глава посвящена изучению всех типов триггеров и созданию условий, при которых активируются или блокируются теги диспетчера тегов Google.

Глава 6. Теги. Из этой главы вы узнаете о самых популярных тегах, которые собирают данные о посетителях на сайте, а затем пересылают их в другие сервисы.

Глава 7. Первые настройки в Google Tag Manager. Установка счетчиков веб-аналитики, настройка показателя отказов, отслеживание глубины скроллинга, видео YouTube, 404 ошибок, загрузки файлов, настройка уникального идентификатора пользователя (Client ID), а также определение точного времени обращения пользователя – все это в главе 7.

Глава 8. Работа с формами. Глава посвящена отслеживанию отправки форм 9 различными способами, включая брошенные формы (те, которые не были отправлены).

Глава 9. Работа с элементами на странице. В этой главе разбираются некоторые HTML-теги (<input> и <select>), которые являются одними из разносторонних элементов формы, браузерное событие клавиатуры keypress, а также настройки, связанные с отслеживанием скопированного текста на странице и кликов по кнопкам.

Глава 10. Настройка ecommerce. Глава содержит материалы по настройке интернет-магазина — стандартная электронная торговля, расширенная электронная торговля (Enhanced Ecommerce), динамический ремаркетинг Google, функция User ID.

Глава 11. «Продвинутая» настройка Google Tag Manager. В главе рассмотрены темы, которые могут быть сложны для понимания начинающим интернет-маркетологам, но которые могут оказаться полезными для специалистов с определенным уровнем знаний. Среди тем главы 11: прослушивание пользовательских событий, виртуальные страницы, файлы cookie, sessionStorage и localStorage, подмена контента на сайте, определение геолокации пользователя (включая IP-адрес), настройка междоменного отслеживания, отслеживание времени сеанса пользователя, счетчик просмотренных страниц и многое другое. Напоследок автор руководства делится списком плагинов и расширений для браузеров, которые он использует в своей работе.

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

Книга не была в издательстве, ее не проверял корректор, поэтому в ней могут содержаться как речевые, языковые, так и орфографические и пунктуационные ошибки. Буду признателен тем, кто в случае нахождения таковых укажет на неточности, чтобы с каждой последующей версией издания их становилось все меньше и меньше. Пишите мне на почту [email protected]

Всем легкого обучения!

Как установить Google Tag Manager(GTM) на Битрикс?

Для внедрения Google Tag Manager(Диспетчера тегов) на сайт с CMS Bitrix воспользуйтесь следующей инструкцией:

1) Авторизуемся в Диспетчере тегов —  tagmanager.google.com
2) Создаем новый аккаунт.

 

3) Заполняем поля — Название аккаунта, Страна, Название контейнера, выбираем, где мы будем устанавливать контейнер, в нашем случае это Веб-сайт. Жмем Создать

 

4) Принимаем «Соглашения об Условиях использования Диспетчера тегов Google»

5) Копируем первый фрагмент кода Диспетчера тегов.

6) Переходим в админ панель Битрикс, открываем шаблон нужного сайта (Настройки > Настройки продукта > Сайты > Шаблоны сайта ).

Кликаем по иконке

, выбираем Изменить

7) Скопированный первый фрагмент кода вставляем в раздел <head> шаблона сайта.

8) Сразу после тега <body> вставляем второй фрагмент кода Диспетчера тегов:

9) Желательно опубликовать Диспетчер тегов, Возвращаемся Диспетчер тегов, переходим на вкладку «Рабочая область» и нажимаем кнопку «Отправить»:

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

 

10) Важно! Для корректной работы Диспетчера тегов требуется, чтобы первый код GTM располагался в разделе  <head>. Однако, в ряде случаев,  Битрикс переносит  javascript  в конец страницы и Диспетчер тегов не активируется. Для того, чтобы скрипт GTM оставался в разделе head нужно в скрипт Диспетчера тегов вписать атрибут

data-skip-moving ="true"

Готово! Google Tag Manager размещен на сайте с CMS Bitrix, опубликован и функционирует!

Если вам требуется помощь в установке GTM — ОСТАВЬТЕ ЗАЯВКУ

 

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

12 марта 2020

Просмотров: 2 442

Сложность: высокая

8 мин.

С момента своего появления Google Tag Manager помогает облегчить жизнь многим интернет-маркетологам во всём мире. Если Вы отслеживаете различные показатели на большом или маленьком сайте, менеджер тегов поможет обеспечить правильную настройку аналитики и сэкономит Вам время.
Удобство вставки тегов через GTM, а не через код сайта, нельзя переоценить. Вы можете вставлять и удалять стандартные коды отслеживания Google Analytics, ремаркетинга Ads, пиксели, коды конверсий, скрипты и сторонние теги в любое время!
Часто команда разработчиков контролирует доступ к редактированию кода сайта. И зачастую такая простая задача, как добавление кода Google Analytics или FB Pixel, может потребовать создания заявки, постановки в очередь, проверки настроек на рабочем сервере и последующего запуска. Tag Manager же предлагает безопасный и простой способ сократить ненужные шаги в этом процессе.
Для тех, кто уже использует GTM на своём сайте и тех, кто планирует его установку — небольшой чек-лист по настройке и установке Google тег менеджера.

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

  1. Одна часть фрагмента контейнера GTM помещена в раздел <head>, а вторая — сразу после открытия тега <body>.

  1. Код диспетчера тегов Google установлен на всех страницах (в т.ч. на страницах Спасибо, личного кабинета и др.). Работоспособность кода проверена.
  2. Счетчики (и пиксели) на сайт установлены только через GTM (не дублируются).
  3. Добавлены уникальные идентификаторы для важных веб-элементов на сайте. При отсутствии возможности изменить существующие идентификаторы добавлены параметры вида «data-id = xyz» к элементам, которые необходимо идентифицировать для отслеживания.
  4. (для расширенной электронной торговли): Настроена передача необходимых данных в Data Layer.

Настройки GTM

  1. Права доступа: пользователям предоставлены необходимые права доступа к контейнеру (или аккаунту).

  1. Добавлена переменная настроек счетчика Google Analytics и тег GA с условием активации на всех страницах:

3. Включена опция расширенной электронной торговли и настроено междоменное отслеживание (при необходимости):

4. Добавлены теги (пользовательский HTML-код): счетчика Яндекс Метрики, основные пиксели рекламных систем (VK, Facebook, MyTarget и др.) с условием активации All Pages — Просмотр страницы.

5. Активированы все необходимые для отслеживания встроенные переменные:

6. Настроены необходимые для отслеживания триггеры:

  • отправка форм
  • клики на важные элементы страницы (мессенджеры, переходы по внешним ссылкам и проч.)
  • просмотры определенных частей страницы
  • просмотры видео (запуск и завершение, % просмотренного видео)

7. В условиях для активации триггеров прописаны верные URL (или “All Pages”) .

8. Настроены все необходимые Теги (для передачи событий в Google Analytics и Яндекс Метрику):

9. (для расширенной электронной торговли): Настроено получение данных в Google Tag Manager и их передача в Google Analytics.

10. Все настройки в GTM проверены с помощью предварительного просмотра и опубликованы.

Провести Аудит РК!

Подпишись и следи за выходом новых статей в нашем монстрограмме

Остались вопросы?

Не нашли ответ на интересующий Вас вопрос? Или не нашли интересующую Вас статью?  Задавайте вопросы и темы статей которые Вас интересуют в комментариях.

Получайте бесплатные уроки и фишки по интернет-маркетингу

Интеграция мои лендинги с Google Tag Manager

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

Как мне настроить интеграцию с Google Tag Manager?

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

Аккаунты в вехнем меню. Вы увидете список ваших аккаунтов. Скопируйте код из колонки Идентификатор контейнера. Если у вас нет аккаунта в Google Tag Manager:

  1. Перейдите на http://www.google.com/tagmanager для регистрации. Следуйте инструкциям во время настройки. Вы можете использовать ваш действующий аккаунт в Google. Как только вы это сделаете, вас сразу же перенаправят на настройку Tag Manager.
  2. Задайте имя аккаунта и нажмите Далее.

  1. Добавьте название контейнера. Вы можете, например, использовать название вашего лендинга для большего удобства.
  2. Выберите 
    Интернет, 
    в качестве ответа на вопрос — Где будет использоваться контейнер — и нажмите  Создать.

  1. Прочитайте правила и условия пользованием Google Tag Manager и примите их.
  2. Далее вы увидете код контейнера Google Tag Manager, содержащий его ID. Найдите его, скопируйте и вставьте в настройки вашего лендинга.

  1. После нажатия на OK, вы окажетесь в личном кабинете в Google Tag Manager. И теперь вы сможете создать ваш первый тег. Если вы не знаете, как начать и что делать, посетите это раздел помощи Tag Manager Help.

  2. Найдите ID вашего контейнера и скопируйте его. Он вам понадобится на последующих этапах.

Как мне добавить код отслеживания на мой лендинг?

Чтобы добавить код отслеживания Google Tag Manager на вашу целевую страницу:

  1. Авторизуйтесь в GetResponse и сделайте следующее:
  • Создайте новую целевую страницу.
  • Измените настройки существующего лендинга.
  1. Как только вы закончите с версткой вашего лендинга, нажмите на Следующий этап для перехода к Параметрам целевой страницы.
  2. Прокрутите страницу вниз и раскройте раздел Аналитика & ремаркетинг.
  3. Выберите Google Tag Manager из списка и введите ваш Google Tag Manager ID в следующем формате: GTM-12X34Y
    .
  4. Нажмите Сохранить, если вы изменили существующую посадочную страницу, или Опубликовать, если вы создали новую страницу.

Теперь вы сможете добавлять предопределенные теги в Google Tag Manager. Диспетчер тегов работает с Google Analytics, Google AdWords, AdRoll, LinkedIn и многими другими сервисами. Внимание: чтобы сделать данную интеграцию полезной для вас, вам нужно будет добавить один или более инструментов. Посмтрите пример с добавлением Google Analytics, How to implement Google Analytics tag in Google Tag Manager. Данное видео на английском, но вы без труда сможете найти аналогичное на русском языке.

Google Tag Manager, что это, и как он мне поможет с аналитикой по лендингам?

Google Tag Manager (Диспетчер тегов) является бесплатным инструментом, которые помогает избежать утомительной правки кода вашего сайта. Вы или кто-то из вашей команды сможет прямо в нем управлять кодами отслеживания. Вам больше не придется менять код сайта, чтобы им воспользоваться. Более продвинутые пользователи смогут добавлять теги своих сайтов.  Подобные пользовательские теги включают в себя, например коды JavaScript для отслеживания конверсии, аналитики или ремаркетинга/ретаргетинга. Они сделают всю работу за вас, высвободив вам время для другой важной работы. Посетите: http://www.google.com/tagmanager чтобы узнать больше о Google Tag Manager.

Как отслеживать конверсии через Google Tag Manager правильно?

Google Tag Manager в мире маркетинга не новинка. Его используют многие, но ошибок при этом меньше не становится. Например, в новых проектах мы часто видим, что в Google Analytics отображается одно количество заявок, а в CRM — другое. Иногда в GA их аж в пять раз больше! Хотя визуально все цели настроены правильно.

Я решила копнуть поглубже, применить смекалочку и наконец разобраться почему отслеживание форм не всегда работает как надо. И даже написала две подробные инструкции, которые помогут вам отслеживать конверсии через GTM правильно.

Почему статистика ошибается?

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

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

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

Отслеживание кликов на кнопке

Шаг 1

Чтобы настроить отслеживание кликов на кнопке, для начала заходим на сайт, нажимаем правой кнопкой мыши в любом месте, затем «Посмотреть код».

Нам нужно посмотреть код интересующей кнопки, чтобы потом отслеживать её в GTM. Сделать это можно с помощью соответствующей иконки в Web Inspector. Затем нажмите на интересующую кнопку — в инспекторе выделится её код. Нажмите правой кнопкой мыши на выделенный фрагмент кода — Copy — Copy selector.

Шаг 2

Заходим в Google Tag Manager, создаем новый триггер. Тип триггера: «Клик — все элементы». Условие активации — «Некоторые клики». Выбираем встроенную переменную «Click Element», во втором поле «Соответствует селектору CSS», а в третье вставляем селектор, который только что скопировали:

Шаг 3

Создаем тег, который будет активировать этот триггер. Тип тега: «Google Аналитика — Universal Analytics». Тип отслеживания — «Событие».

Затем нужно заполнить уникальные поля тега. Я обычно заполняю первые два — категорию и действие. Лучше вписать уникальное значение, соответствующее кнопке. Например, где она находится, какой у неё цвет или текст. Запомните значения этих полей. Они понадобятся при настройке цели в GA.

Шаг 4

Чтобы настроить цели в Google Analytics, создайте переменную, если ещё этого не сделали.

Для этого пролистайте страницу настройки тега чуть ниже и в разделе «Настройки Google Analytics» выберите «Новая переменная». Вставьте идентификатор отслеживания. Найти его можно так: в Google Analytics зайдите в раздел «Администратор», в столбце «Ресурс» выберите «Отслеживание» — «Код отслеживания».

Шаг 5

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

Нажимаем на кнопку и смотрим на обнаруженные теги:

 

Готово. Вы великолепны!

Шаг 6

Дело за малым: настроить цели в Google Analytics, чтобы отслеживать статистику.

Заходим в «Администратор», в столбце «Представление» выберите «Цели», добавьте новую цель. Вид цели — «Собственная». Задайте название, тип — «Событие». Дальше самое важное — введите те же категорию и действие, которые задали тегу.

Теперь проверим, регистрируются ли конверсии. Заходим на сайт, кликаем на кнопку. Затем в Google Analytics в раздел «Отчет в реальном времени» — «Конверсии». Наслаждаемся результатом:

 

Внимание!

Если вы настроите этот тег для отслеживания конверсии формы, могут быть проблемы. Например, человек просто кликнул, не заполнив поля. Google Analytics зафиксирует конверсию, которой не было. Пустые клики могут исказить статистику: вы приходите хвастаться, что у вас 20 конверсий, а в CRM пришло всего 5 заявок.

В этом случае вам пригодится второй способ.

Отслеживание отправки форм

Шаг 1

В Google Tag Manager включаем режим предварительного просмотра, идём на сайт, обновляем. Заполняем форму, отправляем. Заходим на вкладку Variables. Видим событие:

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

Важно!

В случае, если _event не равен gtm.formSubmit, триггер типа «Отправка формы» не будет регистрировать событие.

Шаг 2

Настроим триггер. Тип триггера — «Пользовательское событие». В «Имя события» вставляем данные переменной _event. Выбираем «Некоторые события». Выбираем встроенную переменную Event, селектор «Содержит» и вставляем соответствующие ей данные.

Дальше делаем все также, как в случае с кнопкой: настраиваем тег и цель в Google Analytics.

Как проверить?

Отправляем данные на сервер, обновляем сайт, отправляем форму. Кликаем на событие отправки формы, но теперь переходим на вкладку Tags. Выбираем нужный тег, смотрим на результат:

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

Например, если задали тип не «Пользовательское событие», а «Отправка формы», будет такой результат:

Поле _event не совпадает, значит нужно изменить тип триггера.

Отслеживание результата рекламных кампаний

Чтобы отследить эффективность рекламных кампаний напрямую из Google Ads, свяжите её с Google Analytics. Для этого зайдите в меню «Инструменты и настройки» — «Настройка» — «Связанные аккаунты».

Выбираете Google Analytics, затем нажимаете «связать» с нужным аккаунтом.

Важно!

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

Затем зайдите в раздел «Отслеживание» — «Конверсии».

Нажмите на плюс, нажмите на раздел «Импорт», затем выберите цели, которые нужно добавить в Google рекламу.


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

В первом случае достаточно узнать селектор кнопки и по нему настроить триггер Google Tag Manager.

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

Настраивайте теги правильно, интегрируйте сервисы Google и наслаждайтесь высокими конверсиями!

Гид по Google Tag Manager. Часть 1 — KINETICA

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

Содержание:

Что такое теги
Преимущества GTM
Контейнер GTM
Шаблоны тегов
Триггеры
Переменные
Папки
F. A. Q.

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

Тег — это часть JavaScript кода, которая собирает маркетинговые данные на сайте и в приложении, а затем пересылает их на сторонние сервисы — Google Analytics, Google AdWords, Twitter, Facebook, Comscore и другие.

Пример тега Google Analytics:

Пример тега Facebook Pixel:

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

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

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

Не нужно постоянно редактировать код сайта

Без GTM вы не сможете быстро активировать и выключать теги. Для выключения придется вручную вырезать код из template-файла, а для его повторной активации потребуется вновь вставлять код на сайт. Работы по изменению кода совсем немало, особенно если речь идет о крупном сайте с множеством тегов.

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

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

Богатые возможности управления тегами

Особенно в случаях использования более чем одной-двух сторонних служб. С помощью GTM вы сможете определять:

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

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

Это видео поможет лучше понять ключевые аспекты управления тегами в GTM:

Быстрое внедрение и тестирование тегов

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

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

Продвинутое отслеживание

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

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

Ускорение работы сайта

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

Экономия ресурсов

Если веб-разработчик не пользуется GTM, то для тех же задач ему придется работать упорнее и внимательнее. А к чему приводит увеличение рабочего времени IT-специалиста? Верно, к дополнительным издержкам обслуживания сайта.

Сколько же стоит внедрить GTM в повседневную практику? Нисколько. Сервис полностью бесплатен.

Контейнер GTM

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

Контейнер GTM состоит из двух частей. Ниже пример первой части, которая располагается в заглавной части каждой веб-страницы сайта между html-тегами <head>…</head>:

Вторая часть контейнера GTM располагается непосредственно после открывающего html-тега <body> на каждой веб-странице:

Чтобы посмотреть код GTM, который нужно внедрить на ваш сайт — откройте аккаунт GTM, зайдите во вкладку «Администрирование» → «Установить Диспетчер тегов Google». Часть кода, начинающаяся с символов GTM-TXAAA, называется ID-номером контейнера. Он нужен для идентификации всех уникальных контейнеров GTM.

Шаблоны тегов

В GTM есть десятки шаблонов, которые облегчают развертывание тегов на сайте.

Чтобы посмотреть этот список, зайдите в «Обзор» → «Добавить новый тег».

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

Триггеры

Триггер — это условие, при котором тег срабатывает или не срабатывает. Таким образом, невозможно создать тег без триггера. Сами триггеры создаются сразу совместно с тегами, либо в отдельном меню:

Триггеры в GTM делятся на две категории:

 триггеры активации;
 триггеры блокировки.

Триггер активации — это условие, при выполнении которого срабатывает тег. К примеру, вы хотите добавить кнопку обратной связи на все страницы каталога в вашем интернет-магазине. В таком случае триггер активации будет выглядеть так:

{{url}} содержит  /catalog/

Этот триггер активирует тег в том случае, когда URL-адрес страницы содержит раздел /catalog/.

Триггеры активации делятся на:

 встроенные триггеры — уже настроенные и готовые к использованию шаблоны;
 пользовательские триггеры — нужно настраивать вручную.

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

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

{{url}} содержит  /catalog/botinki/

Теперь ваша кнопка не будет отображаться ни на одной странице с ботинками.

Как создать триггер блокировки:

1. Создайте тег или начните редактировать существующий.

2. Переместитесь вниз к секции «Триггеры» и наведите на нее курсор. Должна появиться иконка редактирования.

3. При нажатии на иконку появится ссылка «Добавить исключение».

Важно: при конфликте триггеров активации и блокировки, приоритет отдается блокиратору.

Переменные

Переменная — это функция, которую можно вызвать внутри тега, триггера или другой переменной. Она указывает GTM, где следует активировать тег. Например:

{{url}} matches RegEx .* // активирует тег на любой странице, на которую зашел пользователь

В этом случае {{url}} — это переменная, которая содержит URL-адрес загружаемой страницы.

Переменные нужны для:

 хранения данных, используемых при определении триггера;
 передачи информации в тег — стоимость продукции, id аккаунта Google Analytics и так далее.

Источником информации могут быть:

 слои данных;
 переменные JavaScript;
 cookies сайта;
 объекты HTML DOM.

Синтаксис для вызова и выполнения переменной в GTM:

{{...}}

Переменную можно вызвать в любом текстовом поле GTM, в котором есть специальная кнопка:

Примечание: значение переменной вычисляется при выполнении тега.

В GTM есть два типа переменных:

 встроенные — уже настроенные и готовые к использованию шаблоны;
 пользовательские — создаются и настраиваются вручную.

Чтобы посмотреть список всех переменных, нажмите на соответствующую кнопку в меню:

По умолчанию в GTM активированы лишь некоторые переменные:

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

Папки

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

F. A. Q.

Может ли далекий от кодинга человек использовать GTM?

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

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

Может ли GTM стать причиной серьезных неполадок сайта?

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

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

Какие виды тегов могут нарушить работу моего сайта?

Настраиваемые HTML-теги. Будьте с ними особенно осторожны. Как можно чаще пользуйтесь шаблонами тегов, особенно если вы новичок в GTM.

Можно ли использовать одинаковый контейнер тегов на нескольких сайтах?

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

Возможно ли внедрить контейнер GTM при помощи другого инструмента для управления тегами?

Да. Но это может помешать корректной работе GTM. Главное правило — не использовать несколько таких инструментов.

Существуют ли теги, которые невозможно развернуть при помощи GTM?

Да. GTM не умеет разворачивать следующие виды тегов:

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

Необходимо ли передавать под управление GTM все теги сайта?

Нет. Тем не менее Google рекомендует сделать это для всех тегов, которые поддерживаются GTM.

Собирает ли GTM пользовательские или иные данные?

Нет. Сам по себе GTM не собирает данные. Это делают теги, которые он активирует.

Работает ли GTM на мобильных сайтах и в мобильных приложениях?

Да.

Способен ли GTM замедлить скорость работы сайта?

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

Можно ли использовать GTM одновременно с тегами, встроенными вручную?

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

Будет ли GTM работать, если развернуть его лишь на части сайта?

Да. Но работать он будет только на страницах со встроенными контейнерами.

Что означает фраза «GTM — протоколозависимый (protocol relative)»?

Это значит, что сервис работает как с защищенными (https), так и с незащищенными (http) страницами.

Что такое «Правило» в терминах GTM?

Это устаревшее название триггера.

Что такое «Макрос» в терминах GTM?

Это устаревшее название переменной.

Чем полезен API GTM?

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

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

Ваш маркетинг не получает должной оценки. Вот как это исправить с помощью Диспетчера тегов Google

Вы потратили много времени, запустив новых кампаний. .

Бесчисленные дни потрачены на планирование ваших целей, подготовку целевых страниц и настройку отслеживания.

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

Было установлено

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

Это слишком распространенный сценарий в мире маркетинга. Чтобы сторонний сервис мог подключиться к вашему сайту, вам потребуются скрипты.

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

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

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

Спишите это на счет «молва» или «последней тактики продаж», но вы знаете, что это неправда.

Это был ты. Твоя тяжелая работа. Но вы просто не получили за это должного.

К счастью, Диспетчер тегов Google поможет вам быстро решить все эти проблемы.

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

Что такое Диспетчер тегов Google и чем он полезен?

Долгое время Google Analytics был источником данных номер один для большинства предприятий.

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

.

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

Но затем, в 2012 году, Google анонсировала свою новую версию Диспетчера тегов Google .

Большинство людей теперь часто путают Диспетчер тегов Google и Google Analytics.Хотя панели мониторинга аналогичны , они являются полностью отдельными объектами.

Чтобы быть ясным, Google Tag Manager — это другой инструмент, чем Analytics, он работает с отдельным программным обеспечением и разными панелями мониторинга.

По сути, Диспетчер тегов — это именно то, на что он похож.

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

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

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

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

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

Оттуда он сделает всю работу за вас.

Вообще говоря, Диспетчер тегов состоит из трех частей:

  1. Тег: на страницу добавляется фрагмент кода, например скрипт отслеживания конверсий AdWords.
  2. Триггер: Затем вы определяете, когда и где будет выполняться код, например, когда кто-то попадает на страницу.
  3. Переменные: дополнительные модификаторы, используемые для получения или хранения данных из тегов.

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

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

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

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

Это требует редактирования жесткого кода, то есть это должен делать ваш разработчик.

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

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

Как настроить Диспетчер тегов для вашего сайта

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

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

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

Итак, приступим!

Перейдите на сайт Диспетчера тегов Google и создайте новую учетную запись (или добавьте к существующей).

Во-первых, назовите свою новую учетную запись, используя название вашей компании в первом поле:

Отсюда вы можете ввести URL своего веб-сайта в поле настройки «Контейнер»:

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

Например, вы хотите, чтобы этот контейнер Диспетчера тегов управлял фрагментами кода для AMP, мобильных приложений на iOS и Android или на вашем веб-сайте?

Контейнер Диспетчера тегов — это, по сути, один фрагмент кода, который вы устанавливаете в свой источник (веб-страницу, приложение, AMP), который содержит все ваши другие коды, вместо того, чтобы забивать ваш источник фрагментами.

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

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

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

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

Если вы не можете этого понять, воспользуйтесь их Quick Start Guide , чтобы получить дополнительную информацию.

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

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

Например, такие вещи, как скрипты AdWords, Analytics, Facebook Pixel и любое другое стороннее программное обеспечение, которое вы используете для отслеживания.

Итак, давайте вернем их обратно в Диспетчер тегов и уберем их с вашего существующего сайта.

Легко переключитесь с жестко запрограммированной аналитики на Диспетчер тегов Google

Инструменты управления тегами — одни из лучших инструментов для экономии времени на планете, когда дело доходит до маркетинга.

Особенно, если вы постоянно запускаете новые кампании и настраиваете скрипты под новые цели (а вы должны быть такими).

Но почему-то они все еще не так широко используются. У множества бывших маркетологов и клиентов, с которыми я разговаривал, пока нет этих простых инструментов.

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

Если на вашем сайте установлен следующий код Google Analytics, у вас есть жестко запрограммированные скрипты, которые можно передавать:

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

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

Повлияет ли это на отслеживание конверсий? Как мои данные остаются нетронутыми или не завышенными из-за переключения?

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

Приступим.

Шаг 1. Убедитесь, что тег контейнера Диспетчера тегов установлен.

Помните тег контейнера, с которым вы работали ранее в этом процессе?

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

Отличный способ проверить — использовать инструмент Google Tag Assistant , который можно установить в Google Chrome:

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

Как только вы это сделаете, переходите ко второму шагу.

Шаг 2. Создайте тег отслеживания просмотра страницы в Диспетчере тегов.

Войдите в свою учетную запись Диспетчера тегов и перейдите в раздел «Теги» в меню панели инструментов:

Отсюда нажмите «Создать», чтобы создать новый тег отслеживания:

Во время настройки начните с редактирования раздела «Конфигурация тегов», щелкнув поле:

В раскрывающемся меню выберите «Аналитика» в качестве типа тега, выбрав универсальный или классический, в зависимости от того, какой из них вы используете:

После выбора типа тега убедитесь, что вы включили тип дорожки «Просмотр страницы»:

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

Это позволит Analytics отслеживать каждый новый просмотр страницы, когда пользователь просматривает любую страницу вашего сайта.

Пришло время создать новую переменную.

Шаг 3. Создайте новую переменную в Диспетчере тегов.

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

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

Для начала перейдите в раздел «Переменные» на панели инструментов:

Щелкните раздел «Пользовательские переменные» и нажмите «Создать», чтобы создать новую переменную:

Отсюда щелкните на шаге «Конфигурация переменной» и щелкните в центре поля, чтобы выбрать переменную:

В списке переменных страницы выберите «Пользовательский JavaScript:»

Затем скопируйте и вставьте следующий код в поле JavaScript:

функция () {

if (jQuery («скрипт: содержит (google-analytics.com / ga.js) ”). length> 0) {

возвращает «ИСТИНА»;

}

if (jQuery («script: contains (google-analytics.com/analytics.js)»). Length> 0) {

вернуть «ИСТИНА»;

}

еще

вернуть «ЛОЖЬ»;

}

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

Шаг 4 . Создайте новый триггер в Диспетчере тегов.

Теперь, когда у вас установлена ​​эта переменная, вы можете создать новый триггер для блокировки отслеживания просмотров страницы Менеджера тегов, когда на сайте уже существует жестко запрограммированный скрипт Analytics.

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

Чтобы начать, перейдите на вкладку «Триггеры» на панели инструментов GTM:

Отсюда нажмите «New», чтобы создать новый триггер. Чтобы продолжить, снова выберите поле «Trigger Configuration»:

В раскрывающемся меню выберите «Просмотр страницы» в качестве типа триггера:

А теперь критический шаг. При настройке триггера убедитесь, что триггер срабатывает при «Некоторых просмотрах страниц:»

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

Затем установите для триггера значение «содержит ИСТИНА». В результате Диспетчер тегов не сможет отслеживать страницы, на которых жестко заданный скрипт Google Analytics уже активен, что предотвратит создание отчетов с двойными показателями.

Шаг 5. Измените существующий трекер просмотра страницы.

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

Здесь создайте новое исключение для тега с помощью жестко запрограммированного скрипта Google Analytics:

Шаг 6. Опубликовать!

Вуаля! Вы сделали это. Вы заслуживаете безмерного похлопывания по спине.

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

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

Как использовать Диспетчер тегов для упрощения маркетинговых корректировок

Сила Менеджера тегов заключается в удобном для пользователя программном обеспечении и панели инструментов.

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

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

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

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

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

Например, предположим, вы хотите отслеживать новый тег на своем сайте с помощью такого инструмента, как Crazy Egg :

Вы просто создаете новый тег в Диспетчере тегов и выбираете Crazy Egg в качестве источника.

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

Затем вы можете создать новые триггеры или переменные для каждого сценария, например, запускать сценарий Crazy Egg только для запуска, когда кто-то пролистывает указанную длину:

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

Чтобы добавить это без Диспетчера тегов, потребуется хорошее знание программирования.

Или, когда кто-то загружает определенное окно, вы можете включить отслеживание:

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

Заключение

Создание кампаний требует огромной работы. Особенно когда дело доходит до настройки правильных скриптов.

Все, от AdWords до Analytics и Crazy Egg, содержат скрипты, которые необходимо запускать на вашем сайте.И жесткое кодирование их на каждой странице может занять несколько часов.

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

А это значит, что все ваши упорные маркетинговые усилия могут остаться незамеченными. Базового отслеживания конверсий недостаточно. Он не расскажет вам всю историю.

Микроконверсии не будут аккредитованы. Только важные события, такие как заполнение анкет и телефонные звонки.

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

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

Наконец, вы можете начать настраивать все свои сценарии в соответствии с новыми кампаниями и сценариями, которые вы хотите протестировать.

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

Какие ваши любимые способы использования Диспетчера тегов Google?

Узнайте, как мое агентство может привлечь огромное количество трафика на ваш веб-сайт

  • SEO — разблокируйте огромное количество SEO-трафика. Смотрите реальные результаты.
  • Контент-маркетинг — наша команда создает эпический контент, которым будут делиться, получать ссылки и привлекать трафик.
  • Paid Media — эффективные платные стратегии с четким ROI.

Заказать звонок

Диспетчер тегов Google | Magento 2.4 Руководство пользователя

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

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

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

Если ваша компания регулируется положениями о конфиденциальности, такими как Общие правила защиты данных и / или Закон Калифорнии о конфиденциальности потребителей, см. Настройки конфиденциальности Google.

Шаг 1. Настройте учетную запись Google Analytics

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

  1. Войдите в свою учетную запись Google Analytics.

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

    • Перейдите к Выберите Просмотр > Просмотр настроек .

    • Установите для отслеживания поиска по сайту с на на .

    • Установите для параметра Query значение q .

    • По завершении Сохраните настройки.

  3. Чтобы включить функции отображения, выполните следующие действия:

    • Выберите Настройки свойств .

    • В разделе «Рекламные функции» установите Включить отчеты по демографии и интересам с до на .

    • Сохраните настройки.

  4. Чтобы включить отслеживание электронной торговли, сделайте следующее:

    • Перейдите к Выберите Просмотр > Настройки электронной торговли .

    • Установите Включить электронную торговлю с на на .

    • Установите Включить отчеты расширенной электронной торговли с на на .

    • Сохраните настройки.

  5. Перезагрузите страницу, чтобы убедиться, что все настройки остались. На .

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

Шаг 2. Настройте учетную запись Диспетчера тегов Google

Следующие инструкции показывают, как настроить новый контейнер с основными параметрами.Образец файла конфигурации Composer (.json) используется для упрощения процесса, импорта для создания тега в новом контейнере. В этом примере мы рекомендуем вам создать новый контейнер, а не изменять существующий контейнер.

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

  1. Загрузите связанный файл GTM_M2_Config_json.txt и выполните следующие действия:

    • Откройте файл в редакторе и сохраните как GTM_M2_Config.json .

    • Заархивируйте файл, чтобы получить архив с именем GTM_M2_Config.zip .

      Заархивированный файл будет загружен непосредственно в Диспетчер тегов Google, и его не нужно копировать на ваш сервер.

  2. Перейдите к Admin > Container > Import Container .

  3. Щелкните Выберите файл контейнера и выберите файл json.

  4. В разделе Выберите рабочее пространство , щелкните Новый .

  5. Введите заголовок и описание, затем нажмите Сохранить .

  6. Выберите одно из следующих действий, чтобы импортировать файл:

    • Для нового контейнера следует выбрать опцию Перезаписать .
    • Опция Merge должна быть выбрана, если вы используете существующий контейнер.
  7. Щелкните Preview , чтобы просмотреть теги, триггеры и переменные.

  8. Чтобы изменить идентификатор Google Analytics , на который ссылаются переменные, выполните следующие действия:

    • Перейдите к Variables > User-Defined Variables .

    • Выберите Google Analytics . Затем обновите заполнитель ( UA-xxxxxx-x ) своим собственным GA ID .

  9. Следуйте инструкциям Google, чтобы добавить теги, триггеры и переменные в новый контейнер.

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

  10. Щелкните Подтвердите по завершении.

  11. Следуйте инструкциям Google, чтобы опубликовать новый контейнер.

Шаг 3. Настройте свой магазин

  1. Войдите в систему с правами администратора вашего магазина Magento.

  2. На боковой панели администратора перейдите в Магазины > Настройки > Конфигурация .

  3. На левой панели разверните Продажи и выберите Google API .

  4. Разверните раздел Google Analytics и настройте следующее:

    Google API — Диспетчер тегов Google

    • Установить Включить на Да .

    • Установите Тип учетной записи на Диспетчер тегов Google .

    • В поле ID контейнера введите свой GTM ID ( GTM-xxxxxx ).

    • Если вы также используете Google Analytics для экспериментов с контентом, установите Включить эксперименты с контентом на Да .

    • Используйте значения по умолчанию для остальных полей.

  5. По завершении нажмите «Сохранить конфигурацию».

  6. Проверьте настройки Диспетчера тегов Google, чтобы убедиться, что все работает правильно.

Описание полей

..
Поле Область применения Описание
Включить Просмотр магазина Определяет, можно ли использовать расширенную электронную торговлю Google Analytics для анализа активности в вашем магазине.Варианты: Да / Нет
Тип счета Просмотр магазина Определяет код отслеживания Google, который используется для отслеживания активности и посещаемости магазина. Параметры: Google Analytics / Диспетчер тегов Google
Анонимный IP Просмотр магазина Определяет, удаляется ли идентифицирующая информация с IP-адресов, отображаемых в результатах Google Analytics.
Включить эксперименты с содержанием Просмотр магазина Активирует эксперименты с содержанием Google, которые можно использовать для тестирования до десяти различных версий одной и той же страницы.Варианты: Да / Нет
Идентификатор контейнера Просмотр магазина Если Диспетчер тегов Google уже установлен и настроен для вашего магазина, идентификатор контейнера автоматически отображается в этом поле.
Список объектов недвижимости для страницы каталога Просмотр магазина Определяет свойство Диспетчера тегов, связанное со страницей каталога. Значение по умолчанию: Страница каталога
Перечислить недвижимость для блока перекрестных продаж Просмотр магазина Определяет свойство Диспетчера тегов, связанное с блоком перекрестных продаж.Значение по умолчанию: перекрестные продажи
Перечислить недвижимость для блока up-sell Просмотр магазина Определяет свойство Диспетчера тегов, связанное с блоком дополнительных продаж. Значение по умолчанию: Up-sell
Свойство списка для блока связанных продуктов Просмотр магазина Определяет свойство Диспетчера тегов, связанное с блоком связанных продуктов. Значение по умолчанию: Сопутствующие товары
Список свойств для страницы результатов поиска Просмотр магазина Определяет свойство Диспетчера тегов, связанное со страницей результатов поиска.Значение по умолчанию: Результаты поиска
«Внутренние акции» для поля «Ярлык» промоакций Просмотр магазина Задает свойство Диспетчера тегов, связанное с ярлыками внутренних рекламных акций. Значение по умолчанию: метка

Руководство для начинающих по Диспетчеру тегов Google

Шеннон Данн

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

Итак, как вы используете Диспетчер тегов Google сегодня? Я расскажу вам, как создать тег, который поможет вам отслеживать поведение пользователей на вашем сайте, и расскажу о некоторых из новейших функций, которые теперь созданы в GTM для удобства и доступности.

Не стесняйтесь пропустить статью, чтобы начать изучать GTM!

  1. Как работает GTM?
  2. Настройка GTM
  3. Теги, триггеры и переменные
  4. Создание тега
  5. Давайте поговорим подробнее о переменных
  6. Тестирование с предварительным просмотром GTM и отладка вашего тега
  7. Заключение

Но прежде чем мы углубимся в детали…

Что такое Диспетчер тегов?

Полезно думать о Системе управления тегами (TMS), как о функционировании системы управления контентом (CMS).Оба могут вносить изменения во весь сайт через один портал интерфейса, без необходимости помощи разработчика для изменения кода для каждого тега. Разработчик нужен только для первоначальной установки фрагмента кода контейнера GTM.

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

Многие популярные аналитические платформы выпустили собственный тип диспетчера тегов, например Launch by Adobe Analytics.Эти различные менеджеры тегов, как и их аналоги из аналитической платформы, используют разную терминологию, но очень похожи по функциональности. Большинство решений TMS совместимы с популярными платформами и приложениями и созданы для беспроблемной интеграции без дополнительного программирования (по крайней мере, это то, что они рекламируют).

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

1. Как работает Диспетчер тегов Google?

GTM вставляет теги JavaScript и HTML, созданные из портала с удобным интерфейсом, в контейнер GTM, который жестко запрограммирован на каждой странице вашего веб-сайта.

Контейнер GTM — это фрагмент кода JavaScript (и не Javascript), который позволяет GTM запускать теги.

2. Настройка GTM

Создать учетную запись GTM для вашего веб-сайта довольно быстро.

Следуйте инструкциям на сайте Диспетчера тегов Google, введя свою информацию.

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

После нажатия на идентификатор контейнера вы увидите 2 фрагмента кода:

  1. Первый фрагмент кода использует javascript для активации тегов, и GTM предлагает вам вставить его в каждой страницы вашего веб-сайта.
  2. Второй фрагмент кода — это iframe HTML, который используется, когда javascript недоступен, и должен быть помещен после открывающего тега.

Таким образом, если пользователи отключили javascript, тег все равно будет активироваться из второго фрагмента кода.

Более подробную информацию о настройке контейнера GTM можно найти на сайте поддержки Google.

3. Теги, триггеры и переменные

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

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

  • Теги — Теги — это коды отслеживания и фрагменты кода, которые сообщают GTM, какое действие следует предпринять на этой странице.
    • Пример: отправка обращения о просмотре страницы в Google Analytics.
  • Триггеры — Триггеры определяют условия, при которых должен срабатывать тег.
    • Пример: триггер с условием активировать тег только тогда, когда пользователь просматривает URL-адреса, содержащие путь / blog /.
  • Переменные — Переменные — это значения, которые используются в триггерах и тегах для фильтрации при срабатывании определенного тега. GTM предоставляет встроенные переменные и позволяет создавать пользовательские переменные, определяемые пользователем.
    • Пример. Переменная класса click имеет имя значения (например, строку слов), назначенное кнопкам на веб-сайте.

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

4. Как создать тег

Я покажу вам простой пример создания тега для просмотра страницы на сайте.

Но сначала я должен предварять создание этого тега, объясняя, что вы должны , а не создать тег Pageview, если вы уже установили контейнер Google Analytics на свой сайт. Создание тега Pageview в GTM в дополнение к контейнеру GA вызовет дублирование обращений в pageview каждый раз, когда пользователь посещает страницу, искажая ваши данные . Чтобы уточнить, у вас может быть учетная запись GA, куда GTM отправляет данные, без установки контейнера GA на вашем сайте.

Чтобы понять, как работает GTM, использование универсальной концепции, такой как просмотр страницы, поможет проиллюстрировать использование тегов, триггеров и переменных.

Для начала мы перейдем в левую часть основного интерфейса и нажмем на раздел Теги .Затем щелкните Новый (Тег).

Затем мы можем назвать тег и выбрать тип тега как Google Analytics , куда мы будем отправлять данные из тега. Вы также можете увидеть ниже другие варианты типов тегов, если вы отправляете данные на другую платформу.

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

Ввод универсального идентификатора отслеживания Google Analytics

Эта часть имеет решающее значение для обеспечения отправки данных в ваш GA, поэтому убедитесь, что вводите правильную информацию!

Это можно сделать двумя способами:

  1. Получите идентификатор отслеживания Google Analytics, перейдя в Админ> Настройки ресурса> Идентификатор отслеживания .Нажмите «Разрешить переопределение настроек в этом теге» и введите идентификатор отслеживания.
  1. Или вы можете создать пользовательскую постоянную переменную, которая всегда будет содержать ваш UAID, поэтому вам никогда не придется ее запоминать.

Этот второй метод ведет нас дальше к концепции переменных.

5. Поговорим подробнее о переменных

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

Когда вы просматриваете окно «Переменные» в GTM, вы увидите 2 варианта: встроенные переменные и пользовательские переменные .

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

Я бы порекомендовал для начала добавить все переменные Click, Form и History.Нажмите «Настроить» и установите флажки слева, чтобы включить их.

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

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

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

Вы можете создать постоянную переменную GA ID, выбрав Пользовательские переменные Создать> Конфигурация переменной> Константа> Значение (введите свой идентификатор GA)> Сохранить .

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

Убедитесь, что сняли флажок «Включить переопределение настроек в этом теге» и используйте раскрывающийся список Настройки Google Analytics , чтобы выбрать идентификатор переменной.

Теперь мы можем создать триггер, который активирует наш тег Pageview!

Под конфигурацией тега щелкните поле Запуск . Появится меню с предложением «Выбрать триггер». Нажмите на знак + в правом верхнем углу.

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

Убедитесь, что выбрано Все просмотры страниц , чтобы наш тег активировался на каждой странице сайта, и нажмите «Сохранить».

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

6. Тестирование с предварительным просмотром GTM и отладка тега

Итак, вы создали свой тег, но как узнать, что он работает?

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

Далее откройте ваш сайт в новой вкладке. Теперь вы увидите внизу, как и в инструментах chrome dev, появится поле.

При ближайшем рассмотрении в левой части отображается сводка событий, которые сначала загружались на страницу в последовательном порядке: 1. Сообщение, 2. Сообщение, 3. Просмотр страницы, 4. Готовность DOM и т. Д. А вверху обозначено Теги , Переменные и Уровень данных .

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

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

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

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

То же самое можно увидеть в инструментах chrome dev, проверив элементы на странице. Разница в том, что GTM упрощает вам задачу, обнаруживая их, суммируя переменные HTML и их значения и помещая их в удобный для пользователя формат.

В инструментах разработчика Chrome:

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

Когда вы добавили тег в GTM, его еще нет на сайте. Здесь важно протестировать тег, чтобы убедиться, что он запускает и отправляет данные в GA.

Мы видим, просто загружая страницу, что запускается новый тег!

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

Теперь мы можем опубликовать новый тег!

Сначала нажмите кнопку «Отправить» в правом верхнем углу основного интерфейса.

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

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

Расширение для тестирования тегов GTM

Вероятно, наиболее полезным расширением браузера Chrome для GTM является отладчик GTM.

После загрузки нажмите F12 и F5, чтобы просмотреть данные о событиях и обращения Google Analytics.

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

Однако это расширение отображает информацию только для тегов, которые находятся в контейнере GTM.

7. Заключение

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

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

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

Надеюсь, вам понравилась эта статья, и вам нравится создавать свои теги!

Добавьте код Диспетчера тегов Google на свои страницы

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

Интеграция с Диспетчером тегов Google

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

  • В своей учетной записи HubSpot щелкните значок настроек Настройки на главной панели навигации.
  • В меню левой боковой панели перейдите на Веб-сайт > Страницы .
  • Щелкните вкладку Интеграции .
  • Установите флажок Интегрировать с Диспетчером тегов Google .
  • Введите свой идентификатор Google Tag Manager в текстовое поле. Узнайте, как найти это в своем аккаунте Диспетчера тегов Google.

  • Нажмите Сохранить , чтобы применить изменения.

Добавьте код Диспетчера тегов Google вручную

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

Скопируйте код из Google Tag Manager

  • Войдите в свою учетную запись Google Tag Manager .
  • Щелкните вкладку Администратор .
  • Щелкните раскрывающийся список Контейнер и выберите Контейнер , содержащий ваши теги.
  • Нажмите Установить Диспетчер тегов Google .
  • На следующем экране вы сможете скопировать оба фрагмента кода (1) и (2) для своего контейнера Диспетчера тегов Google.

Добавьте код Диспетчера тегов Google на страницы HubSpot

Google рекомендует разместить фрагмент кода Javascript (обозначенный цифрой 1 на приведенном выше снимке экрана) в страницы. Это можно сделать в настройках в HTML-поле заголовка сайта .

Google также рекомендует разместить фрагмент

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

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

  • Добавьте фрагменты кода, скопированные из Диспетчера тегов Google:
    • Добавьте фрагмент кода Javascript (1) в поле HTML заголовка сайта .
    • Добавьте фрагмент кода
  • Нажмите Сохранить , чтобы применить изменения.

Целевые страницы Блог Менеджер по дизайну Страницы веб-сайта

Как установить Clarity в Диспетчере тегов Google?

  • 2 минуты на чтение

В этой статье

Пошаговое руководство

Шаг 1

Войдите в Диспетчер тегов Google.Выберите Теги> Новый .

Шаг 2

Назовите тег Clarity Tag . Выберите Изменить в Конфигурации тегов.

Шаг 3

В разделе «Пользовательский» выберите « Пользовательский HTML-код «.

Шаг 4

Скопируйте код отслеживания Clarity с панели управления.

Шаг 5

Вставьте код в поле HTML. Выберите Сохранить .

Шаг 6

Во всплывающем окне No Triggers Selected выберите AddTrigger .

Шаг 7

Выбрать Все страницы .

Шаг 8

Триггер добавлен. Просмотрите и выберите Сохранить .

Шаг 9

Код отслеживания Clarity установлен.

Проверка

Есть два способа проверить, правильно ли работает Clarity на вашем веб-сайте. Проверьте подтверждение, чтобы узнать больше.

FAQ

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

Я не могу добавить код отслеживания. Что я должен делать?

Убедитесь, что вы следуете инструкциям и копируете правильный код отслеживания. Чтобы узнать больше, проверьте Устранение неполадок при установке.

Сколько времени потребуется Clarity, чтобы начать работу над моим веб-сайтом?

Подождите 2 часа, прежде чем Clarity начнет работать с вашим сайтом.

Будет ли Clarity вмешиваться в другой код JavaScript?

Нет. Код отслеживания ясности не мешает работе другого кода JavaScript.

Ясность посещений

Как настроить Диспетчер тегов Google | Отслеживание событий

Веб-разработка Лучшие практики

Так что же такое Диспетчер тегов Google? Диспетчер тегов Google — это инструмент, который позволяет вам организовать и поддерживать все ваши скрипты отслеживания в одном месте без необходимости редактировать код вашего веб-сайта. В этом видео я покажу вам, как настроить отслеживание событий для кликов по кнопкам добавления в корзину WooCommerce.

Это второе видео из серии Google Tag Manager How-To Series .


Шаг 1. Создание триггера
  • На левой боковой панели щелкните «Переменные», затем «Настроить».
  • Убедитесь, что на правой панели в разделе «Клики» установлен флажок «Классы кликов».
  • На левой боковой панели нажмите «Триггеры», затем «Создать» и назовите тег «Добавить в корзину».
  • В разделе «Конфигурация тега» в разделе «Щелкните» выберите «Все элементы».
  • Установить триггер на срабатывание при нескольких щелчках.
  • Задайте для триггера условие «Классы кликов» содержат «single_add_to_cart_button». * Обратите внимание, что класс single_add_to_cart_button специфичен для WooCommerce. Если ваша кнопка добавления в корзину имеет другой класс, замените его своим собственным классом.
  • Щелкните Сохранить.
Шаг 2. Создайте тег события
  • Нажмите «Тег», затем «Создать» и назовите тег «Событие GA — Добавить в корзину».
  • В разделе «Конфигурация тега» выберите «Google Analytics — Universal Analytics».
  • Для «Типа трека» выберите Событие.
  • Заполните поля «Категория», «Действие», «Ярлык» и «Значение» в соответствии с тем, как вы хотите просматривать и фильтровать отслеживание событий в Google Analytics.
  • В этом примере для Категории введите «Событие».
  • Для действия поставьте «В корзину»
  • Для метки выберите встроенную переменную «URL страницы». Эта переменная будет возвращать URL-адрес текущей страницы, чтобы в Google Analytics вы могли видеть, на каких страницах были нажаты кнопки «Добавить в корзину».
  • Для Value put 1.
  • Нажмите «Настройки Google Analytics» и создайте новую переменную для номера UA вашей учетной записи Google Analytics или выберите переменную, которую вы создали в первой части этой серии.
  • Для запуска выберите триггер «Добавить в корзину», который мы создали на шаге 1.
  • Нажмите «Сохранить»
Шаг 3. Запуск
  • Итак, теперь, когда мы создали триггер и настроили тег для запуска этих изменений, нажмите «Отправить» в правом верхнем углу.
  • Добавьте описательное имя версии, чтобы вы знали, для чего это изменение.
  • Нажмите «Опубликовать», и оно будет доступно.

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

В следующем видео я расскажу, как настроить отслеживание AMP в Диспетчере тегов Google.

Для справки, вот другие блоги из этой серии:
Часть первая — Серия инструкций по Диспетчеру тегов Google, часть 1
Часть третья — Серия инструкций по Диспетчеру тегов Google, часть 3

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

Справка по Диспетчеру тегов Google

Диспетчер тегов Google — Документация Hotjar

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


Hotjar — интеграция с GTM

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

Откройте панель управления и нажмите Войти в Диспетчер тегов Google .

Выберите учетную запись Google с контейнером GTM, в который вы хотите опубликовать Hotjar.

Видите несколько разных экранов?

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

Разрешите и подтвердите предоставленные разрешения, нажав Разрешить .

Выберите свою учетную запись GTM и контейнер тегов.

Щелкните Создать и опубликовать тег .

Убедитесь, что вы выбрали Контейнер, который установлен на вашем сайте!

Hotjar сообщит вам здесь, если у вас нет контейнеров в этой учетной записи. В противном случае следуйте инструкциям в официальной документации Google.

Нажмите Подтвердить и создать .

Подождите несколько минут, затем нажмите Проверить установку

Следуйте инструкциям по подтверждению установки.

Вы должны увидеть сообщение, подтверждающее установку. Если вы этого не сделаете, ознакомьтесь с нашим руководством по проверке установки Hotjar. Не стесняйтесь обращаться к нам, если вам понадобится помощь!

Вернуться к началу

Установка ГТМ

Как только вы создали сайт в Hotjar, вам будет представлен первый шаг, если Hotjar автоматически обнаружил, что ваш сайт имеет контейнер GTM.Если вы не видите первый шаг, используйте следующий метод установки из Диспетчера тегов Google.

Щелкните Добавить новый тег.

Щелкните значок тега и выберите из списка Hotjar Tracking Code .

Введите свой идентификатор сайта Hotjar в текстовое поле.

Чтобы получить свой идентификатор сайта Hotjar, просмотрите URL-адрес своего браузера, когда вы вошли в Hotjar: http://insights.hotjar.com/sites/**[SITE_ID visible**/dashboard.

Вы также можете перейти к своему списку Сайтов и организаций из меню Настройки . Отсюда вы увидите список сайтов и организаций, к которым у вас есть доступ, вместе с их идентификаторами.

Установите триггер для управления Hotjar.

Щелкнув область Запуск , вы можете выбрать, на каких страницах будет отображаться код отслеживания.

Выберите Все страницы для триггера.

Одностраничные приложения должны использовать только тип триггера «Просмотр страницы»

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

Сохраните свое рабочее пространство.

Нажмите кнопку Отправить в правом верхнем углу страницы.

Нажмите кнопку « Опубликовать », чтобы опубликовать тег.

Проверьте установку в Hotjar.

Помните код отслеживания при внесении изменений в дизайн

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

Вернуться к началу

Пользовательская установка HTML

В дополнение к установке Hotjar с использованием удобного типа тега «Hotjar Tracking Code», вы можете установить наш код отслеживания в GTM как пользовательский тег HTML.

Перейдите в список сайтов и нажмите кнопку «Код отслеживания» для сайта, который нужно отслеживать.

Щелкните Копировать в буфер обмена .

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

Щелкните там, где написано Выберите тип тега, чтобы начать настройку

Выберите Custom HTML из списка.

Вставьте код, который вы ранее скопировали из Hotjar, в текстовое поле.

Щелкните Выберите триггер, чтобы активировать этот тег

Щелкните Все страницы .

Автор записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *