Как разработчик, вы, вероятно, в какой-то момент настроите теги и триггеры в GTM. Если вы ищете простые инструкции о том, как инициировать триггер клика в GTM для проекта на основе React, вы попали по адресу. Давайте изучим это шаг за шагом!
Эта статья проведет вас через шаги, необходимые для настройки триггера клика в приложении на базе React. Как только вы освоите основные концепции, связанные с GTM, вам останется всего несколько шагов настройки до использования желаемых возможностей управления тегами. Итак, что такое Google Tag Manager и какую пользу вам приносят функции Тегов (Tags) и Триггеров (Triggers)?
Диспетчер тегов Google – что такое GTM и как его использовать?
Google Tag Manager (GTM) — это система управления тегами, которая после базовой настройки кода обеспечивает простую интеграцию тегов на любой веб-сайт или мобильное приложение. Основным преимуществом использования GTM является возможность изменять настройки тегов непосредственно из интерфейса веб-панели. При этом при работе с GTM следует понимать три фундаментальные идеи:
- Теги — это фрагменты кода или пиксели отслеживания (такие как пиксель Facebook), которые собирают и передают аналитические данные, полученные с вашего веб-сайта или мобильного приложения.
- Триггеры отслеживают события и определяют, когда выполнять теги.
- Переменные относятся к дополнительным данным, которые могут потребоваться тегам или триггерам (например, выполнить этот тег, когда URL — /some/url).
Какие преимущества дает использование Google Tag Manager?
Поскольку Диспетчер тегов Google — это интуитивно понятный и комплексный инструмент для веб-сайтов и цифрового маркетинга, он предлагает ряд преимуществ для вашего бизнеса и команды. Ниже приведены четыре основных преимущества использования Google Tag Manager.
1. GTM НЕ ТРЕБУЕТ ЗНАНИЙ КОДИРОВАНИЯ
Диспетчер тегов Google позволяет любому, включая маркетологов, внедрять теги без особых технических навыков. Удобный интерфейс позволяет пользователям изменять, удалять или добавлять код отслеживания GTM без помощи веб-разработчиков, однако рекомендуется иметь опыт работы в этой области. Это позволяет небольшим фирмам с недостаточной технической помощью максимизировать отслеживание через Интернет.
2. GTM ОБЕСПЕЧИВАЕТ ГИБКОСТЬ И ЭКСПЕРИМЕНТИРОВАНИЕ
Поскольку GTM не требует веб-разработчика, он позволяет маркетологам экспериментировать и тестировать различные методы и концепции. Он позволяет внедрять испытания и совершенствовать маркетинговые планы в соответствии с новыми тенденциями цифрового маркетинга без необходимости во внешней поддержке.
3. GTM ПОДДЕРЖИВАЕТ БЫСТРУЮ СКОРОСТЬ ЗАГРУЗКИ СТРАНИЦ
Диспетчер тегов Google настроен на асинхронное, а не синхронное выполнение тегов. Это означает, что каждый тег развертывается сразу после загрузки, а не ждет загрузки всех тегов перед активацией. Это исключает возможность того, что тег с низкой скоростью загрузки может препятствовать развертыванию других.
4. GTM УПРАВЛЯЕТ ВСЕМ В ОДНОМ МЕСТЕ
GTM упрощает и улучшает весь процесс использования тегов, поскольку весь код отслеживания GTM хранится в одном месте, а не разрабатывается и управляется на отдельных платформах. Возможность генерировать и просматривать все развернутые теги из единого интерфейса позволяет избежать дублирования и потенциальных ошибок, что приводит к значительному повышению производительности.
Для чего нужен Google Tag Manager?
GTM способен отслеживать бесконечное количество веб-сайтов и действий цифрового маркетинга, но большинство организаций используют лишь несколько из них.
- Загрузки
- Прокрутка
- Клики
- Формы
- Видео
1. МОНИТОРИНГ ЗАГРУЗКИ PDF-файлов
В рамках своей стратегии цифрового маркетинга ряд компаний предлагают на своих веб-сайтах загружаемые PDF-файлы, такие как руководства и официальные документы. Однако если у вас нет доступа к статистике загрузок, эффективный план существенно затруднен.
Диспетчер тегов Google используется для мониторинга загрузок PDF-файлов и оценки их производительности. Как только вы сможете отслеживать загрузки, вы преобразуете собранные данные в полезную информацию.
- Определите свои самые высокие и самые низкие загрузки.
- Определите, почему загрузка прошла успешно или неудачно.
- Подумайте о стратегиях улучшения загрузки и используйте GTM для отслеживания прогресса.
2. ПОВЕДЕНИЕ ПРОКРУТКИ ДОРОЖКИ
Способность GTM обнаруживать активность прокрутки на вашем веб-сайте и страницах является еще одним стимулом для его использования.
Понимание того, как люди просматривают ваш сайт и взаимодействуют с его контентом, дает ценную информацию об активности сайта.
- Какие области страниц посещаются чаще всего?
- Какая информация является более или менее вовлекающей?
- Где большинство посетителей перестают прокручивать страницу
Собранные данные GTM позволяют составить подробную картину того, как большинство посетителей просматривают страницы сайта. На этой основе можно разработать стратегию улучшения пользовательского опыта.
- Как вы структурируете свой сайт
- Каким материалом вы делитесь?
- области, требующие улучшения
3. СТАТИСТИКА И ЗАПИСЬ КЛИКОВ ПО ССЫЛКАМ
Способность Диспетчера тегов Google отслеживать клики по ссылкам, а именно URL-адреса, по которым посетители нажимали на ваш сайт, является преимуществом. Знание не только поведения пользователя при прокрутке, но и активности его кликов дает существенное представление об его путешествии по вашему веб-сайту.
- Как посетитель вашего сайта переходит с одной страницы на другую?
- Какие призывы к действию (CTA) получают больше всего кликов?
Используйте Google Tag Manager не только для анализа переходов по ссылкам, но и для принятия решений на основе этих данных.
- Обновляйте сайты в несколько кликов или изучайте страницы с помощью нескольких кликов, чтобы максимизировать конверсию.
- Узнайте, какие факторы способствуют высокому показателю кликабельности (CTR) CTA, и пересмотрите тексты для CTA с низким показателем кликабельности.
4. ОТСЛЕЖИВАНИЕ ОТПРАВКИ ФОРМ
Подписка на рассылку, заполнение анкеты или регистрация на мероприятие — все это примеры форм, которые имеют определенную цель и функцию на веб-сайте. GTM гарантирует точное отслеживание отправки форм.
Зачем использовать Google Tag Manager для отслеживания форм:
- Отчет по лидам на сайте, полученным через формы.
- Рассчитайте рентабельность инвестиций в кампанию на основе количества отправленных форм.
5. МОНИТОРИНГ ВИДЕОДЕЯТЕЛЬНОСТИ
Видео — это все более популярная и растущая тактика цифрового маркетинга. С распространением видеоматериалов необходимо понимать, как люди взаимодействуют с информацией.
- Как люди увидели видео
- Как долго они смотрят клип?
- Если или когда они закончили просмотр видео
Данные, полученные из ваших видео, могут лечь в основу видеостратегии вашей организации.
- Как будут создаваться будущие видео
- Какой контент предпочитает ваша аудитория
- Идеальная длина видео для клиентов вашей компании
Создание учетной записи GTM
Создание бесплатной учетной записи — это простая двухэтапная процедура, но она отличается от ваших существующих аккаунтов Google Analytics и Gmail. Чтобы облегчить вам процесс настройки, мы задокументировали нашу процедуру создания учетной записи. Интерфейс должен выглядеть следующим образом:
Вот как действовать:
Шаг №1 Зарегистрируйтесь для создания аккаунта.
Нажмите зеленую кнопку «Зарегистрироваться бесплатно» на странице Диспетчера тегов Google. Он запросит имя вашей учетной записи (компанию), страну и URL-адрес веб-сайта, а также места, где вы хотите использовать Диспетчер тегов Google (веб-сайт, iOS, Android, AMP). Когда закончите, нажмите синюю кнопку «Создать».
Шаг №2 Вставьте JS-коды на свой сайт
Затем вы получите код и инструкции: один фрагмент следует разместить в начале раздела head> страницы, а другой — после открывающего тега body>. Это можно сделать сразу или добавить код на сайт позже; он доступен в панели управления. По завершении нажмите «ОК».
Шаг №3 Создайте тег
Как только у вас появится аккаунт Google Tag Manager, вам захочется понять, как немедленно установить тег.
Диспетчер тегов Google позволяет использовать бесконечное количество настроек тегов.
Это полезно для разработки углубленных отчетов о поведении вашей аудитории, но может стать неэффективным, если ваши теги плохо организованы.
Google предлагает следующий стандарт именования тегов: тип тега – название приложения – сведения.
Возможно, вы идентифицируете одну настройку тега как «Конверсии AdWords – iOS – кампания февраль 2018», а другую как «Google Analytics – CTA – страница О нас»."
Таким образом, вы можете точно идентифицировать и собирать данные, относящиеся к определенным кампаниям или сайтам.
Например, второй тег «Google Analytics – CTA – страница «О нас»» указывает на эффективность вашей кнопки призыва к действию «О нас». Эта информация важна и может быть потеряна, если вы назовете свои теги более общими словами, например «Кнопка с призывом к действию».
Теперь, когда мы все прояснили, давайте посмотрим, как создать тег:
Шаг №3.1 Создайте новый тег в панели управления Google Tag Manager.
На панели управления Диспетчера тегов Google нажмите «Добавить новый тег» (обведено красным ниже).
Шаг №3.2 Настройте свой тег.
Нажмите в любом месте поля «Конфигурация тега» в верхней части страницы, чтобы выбрать тип тега.
Вы можете добавить свой код прямо ниже или на следующем шаге начать с шаблона.
Шаг №3.3 Выберите тип тега.
Существует несколько типов тегов (не все они отображаются здесь, вы также можете настроить тип тега). Пожалуйста, выберите "Google Analytics 4", если вы хотите настроить мониторинг посетителей веб-страниц Google Analytics для вашего приложения и сайта.
Шаг №3.4 Свяжите с GA4 вашего веб-сайта
Появится поле для ввода вашего идентификатора измерения (Measurement ID). Скопируйте свой Measurement ID из своего аккаунта и вставьте его в это поле.
*Перед этим необходимо выполнить настройку GA4 для вашего сайта.
Шаг №3.5 Определите, когда тег должен записываться, выбрав триггер.
Выберите триггер (триггер — это когда вы хотите, чтобы тег записывался, например «каждый раз, когда пользователь просматривает страницу»). Я выбрал «Все страницы», чтобы получать данные при каждом просмотре любой из моих веб-страниц, но ваш выбор может варьироваться в зависимости от ваших целей.
Шаг №3.6 Сохраните свой тег.
Нажмите синюю кнопку «Сохранить» после того, как вас устроит информация в полях «Конфигурация тега» и «Триггер».
Шаг №4 Активируйте свой тег, нажав кнопку «Отправить».
После этого нажмите синюю кнопку «Отправить». Ваш тег не будет работать, если вы этого не сделаете.
Когда вы нажмете «Отправить», загрузится эта страница «Конфигурация отправки». Доступные варианты: «Опубликовать и создать версию» и «Создать версию». Я выбрал «Опубликовать и создать версию», а затем нажал синюю кнопку «Опубликовать» в правом верхнем углу экрана, так как был готов внедрить тег на все страницы моего сайта.
Шаг №5 Добавьте имя и описание к вашим тегам для их упорядочивания. [ОПЦИОНАЛЬНО]
Наконец, будет показано «Описание версии контейнера». Чтобы сохранить структуру тегов, дайте каждому тегу имя и описание, объясняющее, что вы пытаетесь с его помощью захватить.
Диспетчер тегов Google для WordPress
Если ваша организация использует WordPress для размещения своего веб-сайта, интеграция Google Tag Manager в WordPress — это простая процедура без кода.
Site Kit — это официальный плагин WordPress, созданный Google. Site Kit упрощает установку и настройку основных инструментов Google, таких как Google Tag Manager, и предоставляет авторитетные, актуальные рекомендации о том, как успешно развиваться в сети. Ознакомьтесь со списком продуктов Google, которые поддерживает Site Kit.
Вот как действовать:
1. Войдите в свою учетную запись WordPress.
2. Убедитесь, что ваш сайт общедоступен, то есть он не находится в режиме обслуживания и не защищен паролем.
3. В меню слева нажмите Плагины.
4. В верхней части страницы «Плагины» нажмите «Добавить новый», затем найдите «Site Kit».
5. Нажмите «Установить сейчас» на странице Google Site Kit.
6. После установки плагина выберите Плагины в меню слева.
7. Нажмите «Активировать» под «Site Kit от Google».
8. После активации плагина нажмите Site Kit слева.
9. Войдите в свою учетную запись Google, нажав «Войти через Google».
10. Пройдите через мастер и включите Google Tag Manager и Google Analytic 4.
11. Нажмите «Продолжить», чтобы подтвердить право собственности на сайт после предоставления разрешения.
12. Разрешите доступ к данным учетной записи Google, выбрав Разрешить.
13. Чтобы добавить сайт в Search Console, нажмите кнопку «Добавить сайт».
14. Вы успешно установили плагин.
15. Нажмите «Перейти к моей панели управления», чтобы продолжить.
16. В меню слева выберите Site Kit и Dashboard.
17. Нажмите «Подключить службу» под заголовком «Аналитика».
18. Продолжайте предоставлять дополнительные разрешения, нажав Продолжить. Как предоставить Site Kit расширенный доступ к вашей учетной записи Google и продолжить интеграцию WordPress с Google Analytics.
19. Выберите уже существующее свойство аналитики и нажмите «Настроить аналитику».
Теперь аналитика настроена.
Подведение итогов
Google Analytics 4 и Диспетчер тегов Google позволяют принимать более обоснованные маркетинговые решения и значительно улучшают отслеживание активности клиентов.
Внедрите эту более свежую версию с помощью GTM и используйте гибкость, которую предлагает GA4.
Нужна помощь в установке GA4 и GTM? Или при миграции Google Tag с GA3 на GA4? Мы здесь, чтобы помочь, пожалуйста, не стесняйтесь Связаться с нами с нами!