Как добавить код Google Tag Manager в WordPress Elementor: подробное руководство

  •   
  •   17151
  •   5 мин
  •   794

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

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

Саммари статьи
ChatGPT ChatGPT
Google AI Google AI
Grok Grok
Perplexity Perplexity

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

Почему использовать GTM с WordPress и Elementor?

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

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

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

Необходимые условия: аккаунт GTM, сайт на WordPress и Elementor

Перед началом работы убедитесь, что у вас есть:

  1. Аккаунт Google Tag Manager. Если у вас его еще нет, создайте его на https://tagmanager.google.com/.
  2. Сайт на WordPress с установленным и активированным плагином Elementor. Убедитесь, что ваш Elementor обновлен до последней версии.

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

Регистрация аккаунта Google Tag Manager

Перейдите на сайт Google Tag Manager и войдите в свою учетную запись Google. Если у вас еще нет аккаунта, зарегистрируйтесь.

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

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

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

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

  • Первый фрагмент: Необходимо добавить как можно выше в раздел <head> страницы.
  • Второй фрагмент: Необходимо добавить сразу после открывающего тега <body>.

Сохраните эти фрагменты кода – они понадобятся вам на следующем шаге.

Добавление кода Google Tag Manager в WordPress Elementor

Есть несколько способов добавить код GTM в WordPress Elementor. Рассмотрим наиболее распространенные.

Способ 1: Использование плагина Insert Headers and Footers

Это самый простой и рекомендуемый способ. Он не требует редактирования файлов темы.

  1. Установите и активируйте плагин «Insert Headers and Footers» (например, от WPBeginner) из репозитория WordPress.
  2. Перейдите в раздел «Настройки» -> «Insert Headers and Footers» в панели управления WordPress.
  3. Вставьте первый фрагмент кода GTM в поле «Scripts in Header».
  4. Вставьте второй фрагмент кода GTM в поле «Scripts in Body».
  5. Нажмите кнопку «Save».

Способ 2: Добавление кода GTM непосредственно в тему WordPress (functions.php)

Внимание! Этот способ требует осторожности. Неправильное редактирование файла functions.php может привести к поломке сайта. Рекомендуется использовать дочернюю тему.

  1. Подключитесь к серверу по FTP или используйте файловый менеджер в панели управления хостингом.
  2. Найдите файл functions.php вашей темы WordPress (обычно находится в /wp-content/themes/название-вашей-темы/). Рекомендуется создать дочернюю тему и редактировать файл functions.php дочерней темы.
  3. Отредактируйте файл functions.php, добавив следующий код:
<?php
/**
 * Добавляет код Google Tag Manager в раздел <head>
 */
function add_gtm_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 -->
    <?php
}
add_action( 'wp_head', 'add_gtm_head' );

/**
 * Добавляет код Google Tag Manager сразу после <body>
 */
function add_gtm_body() {
    ?>
    <!-- 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) -->
    <?php
}
add_action( 'wp_body_open', 'add_gtm_body' );
Реклама
  1. Замените GTM-XXXXXXX на ID вашего контейнера Google Tag Manager.
  2. Сохраните изменения в файле functions.php.

Замечание: Функция wp_body_open появилась в WordPress 5.2. Если вы используете более старую версию, вам потребуется добавить хук в шаблон body.php вашей темы.

Способ 3: Использование Elementor Custom Code

Elementor Pro предоставляет возможность добавления произвольного кода на страницы сайта.

  1. Убедитесь, что у вас установлена и активирована версия Elementor Pro.
  2. Перейдите в Elementor -> Custom Code в панели управления WordPress.
  3. Нажмите кнопку «Add New».
  4. Вставьте первый фрагмент кода GTM в поле «Edit Custom Code».
  5. Укажите местоположение «Head — Start». Укажите правила отображения, например, «Entire Site».
  6. Нажмите кнопку «Publish».
  7. Создайте еще один Custom Code.
  8. Вставьте второй фрагмент кода GTM в поле «Edit Custom Code».
  9. Укажите местоположение «Body — Start». Укажите правила отображения, например, «Entire Site».
  10. Нажмите кнопку «Publish».

Важные замечания при добавлении кода через Elementor

  • Убедитесь, что вы выбрали правильное местоположение кода («Head — Start» и «Body — Start»).
  • Проверьте правила отображения кода, чтобы теги GTM загружались на всех страницах сайта.
  • Не добавляйте оба фрагмента кода в один блок Custom Code.

Проверка правильности установки Google Tag Manager

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

Использование режима предварительного просмотра Google Tag Manager

  1. В интерфейсе Google Tag Manager нажмите кнопку «Предварительный просмотр».
  2. Введите URL вашего сайта и нажмите кнопку «Connect».
  3. Откроется новая вкладка браузера с вашим сайтом. Внизу страницы вы увидите панель отладки Google Tag Manager.
  4. Проверьте, что контейнер GTM загрузился и теги срабатывают правильно. Обратите внимание на теги, которые должны активироваться на конкретных страницах.

Проверка с помощью расширения для браузера Tag Assistant Legacy

  1. Установите расширение Tag Assistant Legacy для Chrome.
  2. Активируйте расширение.
  3. Перейдите на ваш сайт.
  4. Tag Assistant покажет, какие теги Google установлены на странице, включая GTM.
  5. Проверьте, что GTM отображается без ошибок.

Устранение распространенных проблем и ошибок

  • GTM не отображается в Tag Assistant: Проверьте правильность установки кода GTM. Убедитесь, что код добавлен на все страницы сайта.
  • Теги не срабатывают: Проверьте правильность настройки триггеров и тегов в Google Tag Manager.
  • Ошибки в консоли браузера: Проверьте код тегов на наличие синтаксических ошибок.

Настройка базовых тегов в Google Tag Manager

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

Настройка тега Google Analytics (GA4)

  1. В Google Tag Manager нажмите «Теги» -> «Создать».
  2. Выберите «Google Analytics: GA4 Configuration».
  3. Укажите ваш Measurement ID (идентификатор потока данных GA4).
  4. Выберите триггер «Initialization — All Pages».
  5. Сохраните тег.

Затем создайте тег для отслеживания просмотров страниц:

  1. В Google Tag Manager нажмите «Теги» -> «Создать».
  2. Выберите «Google Analytics: GA4 Event».
  3. В поле «Event Name» введите page_view.
  4. В поле «Configuration Tag» выберите созданный ранее тег «GA4 Configuration».
  5. Выберите триггер «Page View — All Pages».
  6. Сохраните тег.
  1. В Google Tag Manager нажмите «Теги» -> «Создать».
  2. Выберите «Google Ads Conversion Tracking».
  3. Укажите ID конверсии и ярлык конверсии, полученные из аккаунта Google Ads.
  4. Настройте триггер, который будет срабатывать при совершении конверсии (например, при посещении страницы подтверждения заказа).
  5. Сохраните тег.

Создание триггеров для отслеживания событий

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

  • Клик по кнопке: Создайте триггер типа «Just Links» и укажите условия срабатывания (например, URL кнопки или класс элемента).
  • Отправка формы: Создайте триггер типа «Form Submission» и укажите условия срабатывания (например, ID формы).
  • Просмотр определенной страницы: Создайте триггер типа «Page View» и укажите URL страницы.

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

Метки:

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

Реклама
Как построить точечную диаграмму в Matplotlib: Отображаем только маркеры без линии?
В мире анализа данных визуализация — это не просто красивый рисунок, это способ извлечь скрытые закономерности из сырых чисел.
  •  2
  •   2026
Как работает Google Cloud BigQuery Хранилище v1 и почему это важно для ваших данных?
В эпоху экспоненциального роста объемов данных, традиционные реляционные базы данных часто оказываются неэффективными для задач глубокой аналитики.
  •  2
  •   2026
Как эффективно использовать Matplotlib imshow для отображения изображений и матриц в Python?
Функция imshow — это краеугольный камень визуализации двумерных данных в Matplotlib.
  •  2
  •   2026