Что такое Google Tag Manager (GTM) и зачем он нужен?
Google Tag Manager (GTM) – это мощная система управления тегами, позволяющая добавлять и обновлять теги отслеживания (например, Google Analytics, пиксели Facebook, код ремаркетинга) на вашем сайте без необходимости редактировать код напрямую. Он упрощает процесс внедрения и управления аналитикой, маркетингом и другими скриптами, снижая зависимость от разработчиков.
Зачем он нужен? GTM повышает гибкость и скорость развертывания тегов, централизует управление тегами, предоставляет инструменты для тестирования и отладки. Он позволяет быстро реагировать на изменения в требованиях аналитики и маркетинга.
Преимущества ручной установки кода GTM
Хотя для WordPress существуют плагины для интеграции GTM, ручная установка дает несколько преимуществ:
- Полный контроль: Вы точно знаете, где и как размещен код GTM.
- Минимализм: Избегаете установки лишних плагинов, которые могут замедлить сайт.
- Оптимизация: Можно тонко настроить размещение кода для оптимальной производительности.
Подготовка к установке Google Tag Manager в WordPress
Получение кода Google Tag Manager
- Создайте аккаунт в Google Tag Manager (https://tagmanager.google.com/).
- Создайте контейнер для вашего веб-сайта. Укажите тип контейнера «Веб-сайт».
- После создания контейнера GTM предоставит вам два фрагмента кода: один для размещения в
<head>, а другой – сразу после открывающего тега<body>.
<!-- 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 -->
<!-- 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) -->
Замените GTM-XXXXXXX на ваш идентификатор контейнера GTM.
Создание резервной копии вашего сайта WordPress (обязательно!)
Перед внесением каких-либо изменений в файлы темы WordPress крайне важно сделать резервную копию вашего сайта. Это позволит вам восстановить сайт в случае возникновения проблем.
Доступ к файлам темы WordPress (через FTP или файловый менеджер)
Для ручной установки кода GTM вам потребуется доступ к файлам вашей темы WordPress. Это можно сделать двумя способами:
- FTP (File Transfer Protocol): Используйте FTP-клиент (например, FileZilla) для подключения к вашему веб-серверу. Вам понадобятся имя хоста, имя пользователя и пароль, предоставленные вашим хостинг-провайдером.
- Файловый менеджер: Большинство хостинг-провайдеров предоставляют файловый менеджер в панели управления хостингом. Он позволяет редактировать файлы непосредственно через веб-интерфейс.
Обычно файлы темы WordPress находятся в папке /wp-content/themes/[название вашей темы]/.
Пошаговая инструкция: ручная установка кода GTM
Шаг 1: Редактирование файла header.php вашей темы WordPress
Найдите файл header.php в папке вашей темы WordPress. Этот файл содержит информацию о заголовке каждой страницы вашего сайта.
Шаг 2: Вставка первого фрагмента кода GTM в раздел <head>
Откройте файл header.php в текстовом редакторе. Найдите открывающий тег <head>. Вставьте первый фрагмент кода GTM сразу после этого тега.
<!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">
Сохраните файл header.php.
Шаг 3: Редактирование файла footer.php вашей темы WordPress
Найдите файл footer.php в папке вашей темы WordPress. Этот файл содержит информацию о нижнем колонтитуле каждой страницы вашего сайта.
Шаг 4: Вставка второго фрагмента кода GTM в раздел <body>
Откройте файл footer.php в текстовом редакторе. Найдите открывающий тег <body>. Если его нет, найдите <html> в header.php. Вставьте второй фрагмент кода GTM сразу после этого тега. Однако, более правильный способ — это вставить этот код непосредственно в footer.php перед закрывающим тегом </body>.
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Nineteen
* @since Twenty Nineteen 1.0
*/
?>
</main><!-- #main -->
</div><!-- #content -->
<footer id="colophon" class="site-footer">
...
</footer><!-- #colophon -->
</div><!-- #page -->
<!-- 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 wp_footer(); ?>
</body>
</html>
Сохраните файл footer.php.
Проверка установки Google Tag Manager
Использование режима предварительного просмотра в GTM
- Войдите в свой аккаунт Google Tag Manager.
- Выберите свой контейнер.
- Нажмите кнопку «Предварительный просмотр» в правом верхнем углу.
- Перейдите на свой веб-сайт. В нижней части экрана должна появиться панель отладки GTM. Это означает, что GTM установлен правильно и работает.
Проверка наличия контейнера GTM на страницах сайта
- Откройте любую страницу вашего сайта в браузере.
- Нажмите правую кнопку мыши и выберите «Просмотр кода страницы» (или аналогичный пункт в зависимости от браузера).
- Найдите в коде страницы ваш идентификатор контейнера GTM (например,
GTM-XXXXXXX). Если он присутствует, это означает, что код GTM установлен правильно.
Устранение неполадок и часто задаваемые вопросы
Что делать, если код GTM установлен неправильно?
- Проверьте правильность размещения кода: Убедитесь, что первый фрагмент кода размещен сразу после открывающего тега
<head>в файлеheader.php, а второй – сразу после открывающего тега<body>или перед закрывающим</body>в файлеfooter.php. - Проверьте правильность идентификатора контейнера: Убедитесь, что в коде GTM указан правильный идентификатор вашего контейнера.
- Очистите кэш браузера и WordPress: Иногда проблемы с отображением сайта могут быть связаны с кэшированием.
Как проверить, работает ли GTM после установки?
- Используйте режим предварительного просмотра в GTM: Это самый надежный способ проверить, правильно ли настроены теги и триггеры.
- Проверьте данные в Google Analytics (или другой системе аналитики): Убедитесь, что данные собираются и отображаются корректно.
Преимущества и недостатки ручной установки по сравнению с плагинами
- Ручная установка: Преимущества – полный контроль, минимализм, оптимизация. Недостатки – требует навыков редактирования кода.
- Плагины: Преимущества – простота установки и настройки. Недостатки – возможная избыточность, ограниченный контроль, потенциальные конфликты с другими плагинами.