Как добавить Google Tag Manager на WordPress: Полное руководство для начинающих

Что такое Google Tag Manager (GTM) и зачем он нужен WordPress сайту?

Краткое описание Google Tag Manager

Google Tag Manager (GTM) – это система управления тегами (TMS), позволяющая быстро и легко обновлять коды отслеживания и фрагменты кода (теги) на вашем веб-сайте или в мобильном приложении, не изменяя код напрямую. Он действует как посредник между вашим сайтом и различными платформами аналитики и маркетинга, такими как Google Analytics, Google Ads, Facebook Pixel и другими.

Саммари статьи

ChatGPT

Google AI

Grok

Perplexity

Преимущества использования GTM на WordPress

Использование GTM на WordPress предоставляет ряд значительных преимуществ:

• Централизованное управление тегами: Управляйте всеми маркетинговыми и аналитическими тегами в одном месте.
• Быстрое развертывание: Развертывайте и обновляйте теги без необходимости редактировать код сайта.
• Улучшенная скорость сайта: GTM асинхронно загружает теги, что потенциально может повысить скорость загрузки страницы.
• Встроенные инструменты отладки: Предварительный просмотр и отладка тегов перед их публикацией.
• Контроль версий: Отслеживайте изменения тегов и возвращайтесь к предыдущим версиям.
• Интеграция с другими инструментами Google: Легкая интеграция с Google Analytics, Google Ads и другими продуктами Google.

Основные термины GTM: теги, триггеры, переменные

• Теги: Фрагменты кода, выполняющие определенную задачу, например, отслеживание просмотров страниц или конверсий. Примеры тегов: Google Analytics tracking code, Facebook pixel, Google Ads conversion tracking tag.
• Триггеры: Условия, при которых срабатывает тег. Триггеры определяют, когда и при каких обстоятельствах тег должен быть активирован. Примеры триггеров: просмотр страницы (Page View), клик по ссылке (Click), отправка формы (Form Submission).
• Переменные: Именованные контейнеры для хранения данных, которые могут использоваться в тегах и триггерах. Переменные позволяют динамически получать информацию, такую как URL страницы, ID продукта или пользовательские данные. Примеры переменных: URL страницы (Page URL), ID клика (Click ID), значение Data Layer.

Создание учетной записи Google Tag Manager и контейнера

Регистрация в Google Tag Manager

1. Перейдите на сайт Google Tag Manager.
2. Войдите в свою учетную запись Google.
3. Нажмите «Создать аккаунт».

Создание нового контейнера для вашего WordPress сайта

1. Заполните информацию об аккаунте (название компании, страну).
2. Укажите название контейнера (например, «Мой WordPress сайт»).
3. Выберите платформу «Веб-сайт».
4. Нажмите «Создать».
5. Примите условия использования Google Tag Manager.

Получение кода GTM контейнера

После создания контейнера вы увидите два фрагмента кода. Первый код необходимо добавить в <head> вашего сайта, а второй – сразу после открывающего тега <body>. Эти коды необходимы для работы GTM.

Способы добавления Google Tag Manager на WordPress

Вставка кода GTM непосредственно в файлы темы WordPress (рекомендуется для опытных пользователей)

1. Найдите файлы темы: Подключитесь к вашему серверу через FTP или используйте файловый менеджер в панели управления хостингом. Найдите папку с вашей текущей темой WordPress (обычно находится в /wp-content/themes/[название_вашей_темы]/).
2. Отредактируйте header.php: Откройте файл header.php и вставьте первый фрагмент кода GTM (из раздела <head>) сразу после открывающего тега <head>. Важно! Сделайте резервную копию файла header.php перед внесением изменений.
3. Отредактируйте footer.php или index.php: Откройте файл footer.php или, если его нет, то index.php, и вставьте второй фрагмент кода GTM (из раздела <body>) сразу после открывающего тега <body>. Убедитесь, что вы не пропустите этот шаг!
4. Сохраните изменения: Сохраните измененные файлы.

<?php
/**
 * Пример вставки кода GTM в header.php
 *
 * @package WordPress
 * @subpackage MyTheme
 */
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
    <!-- End Google Tag Manager -->
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="http://gmpg.org/xfn/11">

    <?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    <div id="page" class="site">

Использование плагинов WordPress для интеграции GTM (простой способ)

Существует множество плагинов WordPress, которые упрощают интеграцию GTM. Вот несколько популярных вариантов:

• Insert Headers and Footers: Простой плагин, позволяющий добавлять коды в <head> и <body>.
• Google Tag Manager for WordPress by Thomas Geiger: Более продвинутый плагин с поддержкой Data Layer.
• DuracellTomi’s Google Tag Manager for WordPress: Еще один популярный плагин с множеством настроек.

Как использовать плагин:

1. Установите и активируйте плагин: Найдите плагин в репозитории WordPress, установите и активируйте его.
2. Настройте плагин: Перейдите в настройки плагина и вставьте код GTM контейнера.
3. Сохраните изменения: Сохраните настройки плагина.

Рекомендации по выбору подходящего способа

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

Настройка и проверка установки Google Tag Manager

Предварительный просмотр и отладка GTM контейнера

1. В интерфейсе GTM нажмите кнопку «Предварительный просмотр».
2. Перейдите на свой сайт WordPress.
3. В нижней части экрана должна появиться панель отладки GTM. Эта панель показывает, какие теги срабатывают на странице.

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

• Установите расширение Google Tag Assistant для Chrome.
• Активируйте Tag Assistant.
• Перезагрузите страницу своего сайта.
• Tag Assistant покажет, установлен ли GTM на странице и есть ли какие-либо ошибки.

Публикация контейнера GTM

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

1. В интерфейсе GTM нажмите кнопку «Отправить».
2. Выберите «Опубликовать и создать версию».
3. Укажите название версии и описание (опционально).
4. Нажмите «Опубликовать».

Базовая настройка Google Tag Manager на WordPress

Настройка отслеживания просмотров страниц

1. Создайте новый тег типа «Google Analytics: Universal Analytics».
2. Выберите тип отслеживания «Просмотр страницы».
3. Укажите ваш ID отслеживания Google Analytics.
4. Создайте триггер типа «Просмотр страницы» (Page View) — «Все страницы».
5. Сохраните тег и опубликуйте контейнер.

Настройка отслеживания кликов по ссылкам

1. Включите встроенные переменные «Click URL» и «Click Text» (Раздел «Переменные» -> «Встроенные переменные» -> «Настроить»).
2. Создайте новый тег типа «Google Analytics: Universal Analytics».
3. Выберите тип отслеживания «Событие».
4. Укажите категорию (например, «Клики по ссылкам»), действие (например, «URL ссылки») и ярлык (например, «Текст ссылки»). Используйте переменные {{Click URL}} и {{Click Text}} для динамического заполнения этих полей.
5. Создайте триггер типа «Клик» (Click) — «Только ссылки». Можно настроить фильтры для отслеживания кликов по определенным ссылкам.
6. Сохраните тег и опубликуйте контейнер.

Интеграция с Google Analytics через GTM

GTM позволяет легко интегрировать Google Analytics на ваш сайт WordPress. Просто создайте тег Google Analytics, настройте триггеры и переменные, и опубликуйте контейнер. Это гораздо проще и гибче, чем вставка кода Google Analytics непосредственно в файлы темы.