Что такое Google Tag Manager (GTM) и зачем он нужен?
Google Tag Manager (GTM) — это система управления тегами (TMS), которая позволяет быстро и легко обновлять теги отслеживания и фрагменты кода на вашем веб-сайте или в мобильном приложении, не изменяя непосредственно код сайта. Теги используются для сбора данных, анализа трафика, ремаркетинга и других целей. GTM упрощает управление этими тегами, предоставляя централизованный интерфейс.
Вместо того, чтобы вручную добавлять и изменять код каждого тега на сайте, вы управляете ими через GTM. Это позволяет маркетологам и аналитикам самостоятельно вносить изменения, не прибегая к помощи разработчиков, что значительно ускоряет процесс внедрения новых маркетинговых и аналитических инструментов.
Преимущества использования GTM на сайте Squarespace
Использование GTM на Squarespace предоставляет ряд преимуществ:
- Централизованное управление тегами: Все теги хранятся и управляются в одном месте.
- Ускорение процесса внедрения: Добавление и изменение тегов не требует изменения кода сайта.
- Снижение зависимости от разработчиков: Маркетологи могут самостоятельно управлять тегами.
- Улучшенное тестирование и отладка: Режим предварительного просмотра позволяет протестировать теги перед публикацией.
- Версионность: Возможность отката к предыдущим версиям контейнера GTM.
Необходимые условия: учетная запись Google и сайт Squarespace
Прежде чем начать, убедитесь, что у вас есть:
- Учетная запись Google. (Если у вас есть аккаунт Gmail, YouTube или любой другой сервис Google, вы можете использовать его.)
- Действующий веб-сайт на платформе Squarespace с правами администратора.
Создание контейнера Google Tag Manager
Регистрация и настройка аккаунта Google Tag Manager
- Перейдите на сайт Google Tag Manager.
- Войдите в свою учетную запись Google.
- Нажмите кнопку «Создать аккаунт».
- Укажите название вашей компании или организации.
Создание нового контейнера для вашего сайта Squarespace
- После создания аккаунта вам будет предложено создать контейнер.
- Введите название контейнера (например, «Squarespace Website»). Имя контейнера должно отражать сайт, на котором он будет использоваться.
Выбор типа контейнера: Web
При создании контейнера необходимо выбрать тип контейнера. Для веб-сайта Squarespace выберите тип «Web». Это необходимо для того, чтобы GTM правильно обрабатывал теги и триггеры, специфичные для веб-сайтов.
Добавление кода Google Tag Manager в Squarespace
Способ 1: Использование поля Code Injection в Squarespace (рекомендуется)
Squarespace предоставляет встроенную функцию Code Injection, которая позволяет добавлять код в разделы <head> и <body> вашего сайта. Это наиболее простой и рекомендуемый способ добавления кода GTM.
Как найти код GTM: ID контейнера и фрагменты кода
После создания контейнера GTM вам будет предоставлен код, который необходимо добавить на сайт. Этот код состоит из двух частей:
- Фрагмент кода для раздела
<head>: Этот код должен быть помещен в раздел<head>каждой страницы вашего сайта. - Фрагмент кода для раздела
<body>: Этот код должен быть помещен сразу после открывающего тега<body>.
Вы можете найти эти фрагменты кода, нажав на ID своего контейнера (GTM-XXXXXXX) в интерфейсе GTM. Откроется окно с инструкциями по установке.
Вставка кода GTM в раздел <head> и <body> в настройках Code Injection
- Войдите в свою учетную запись Squarespace.
- Перейдите в раздел Settings (Настройки) -> Advanced (Дополнительно) -> Code Injection (Внедрение кода).
- Скопируйте фрагмент кода GTM для раздела
<head>и вставьте его в поле Header. - Скопируйте фрагмент кода GTM для раздела
<body>и вставьте его в поле Footer. - Сохраните изменения.
Обратите внимание: Squarespace перемещает код из Footer в автоматически. Не беспокойтесь, если в Footer ничего не отображается после сохранения.
Способ 2: Добавление кода GTM через сторонние расширения (не рекомендуется)
Существуют сторонние расширения для Squarespace, которые позволяют добавлять код GTM. Однако использование Code Injection является более простым и надежным способом, поэтому использование расширений не рекомендуется, если нет особых причин для этого.
Проверка установки Google Tag Manager
Использование режима предварительного просмотра в GTM
- В интерфейсе GTM нажмите кнопку Preview (Предварительный просмотр).
- Перейдите на свой сайт Squarespace в новой вкладке браузера.
- В нижней части экрана должна появиться панель отладки GTM. Это означает, что GTM успешно установлен и работает.
Установка расширения Google Tag Assistant для Chrome
Установите расширение Google Tag Assistant для Chrome. Это расширение поможет вам проверить, правильно ли установлены теги Google, включая GTM.
Проверка срабатывания тегов и событий
В режиме предварительного просмотра перейдите по нескольким страницам вашего сайта и убедитесь, что теги, которые вы настроили в GTM, срабатывают правильно. Вы увидите информацию о срабатывающих тегах и событиях в панели отладки GTM.
Настройка основных тегов в Google Tag Manager для Squarespace
Настройка тега Google Analytics: отслеживание просмотров страниц
Первым делом рекомендуется настроить тег Google Analytics для отслеживания просмотров страниц.
- В GTM создайте новый тег.
- Выберите тип тега Google Analytics: Universal Analytics или Google Analytics: GA4 Configuration (в зависимости от вашей версии Google Analytics).
- Укажите свой идентификатор отслеживания Google Analytics.
- Выберите тип отслеживания Просмотр страницы.
- Создайте триггер типа All Pages (Все страницы). Это обеспечит срабатывание тега на каждой странице вашего сайта.
- Сохраните тег и опубликуйте контейнер.
// Пример конфигурации тега Google Analytics (GA4) в GTM
function createGA4PageViewTag(ga4MeasurementId: string, triggerName: string = "All Pages") {
// Функция создает конфигурацию тега Google Analytics (GA4) для отслеживания просмотров страниц.
const tagConfig = {
"tagName": "GA4 Page View",
"type": "ga4",
"measurementId": ga4MeasurementId,
"trigger": triggerName // Триггер, определяющий, когда срабатывает тег
};
return tagConfig;
}
// Пример использования функции
const myGA4Tag = createGA4PageViewTag("G-XXXXXXXXXX", "My Custom Trigger");
console.log(myGA4Tag); // Вывод конфигурации тега в консоль
Примеры других полезных тегов: Facebook Pixel, Google Ads Conversion Tracking
Кроме Google Analytics, вы можете настроить другие полезные теги, такие как:
- Facebook Pixel: Для отслеживания конверсий и ретаргетинга на Facebook.
- Google Ads Conversion Tracking: Для отслеживания конверсий с рекламы Google Ads.
- Hotjar: Для записи сессий пользователей и создания тепловых карт.
Важность тестирования и отладки тегов
Перед публикацией контейнера всегда тестируйте и отлаживайте теги в режиме предварительного просмотра. Убедитесь, что теги срабатывают правильно и отправляют корректные данные в соответствующие системы аналитики и рекламы. Это поможет избежать ошибок и неточностей в данных.