X

Размещаем код GTM в WordPress без плагинов

👁2 891 просм.

Один из важных аспектов настройки любого сайта, — возможность установки и настройки различных счетчиков для аналитики поведения пользователей. Это счетчики таких известных сервисов как Google Analytics и Яндекс Метрика, пиксель Facebook и другие.

Как настроить Google Analytics, Яндекс Метрику и пиксель Facebook мы рассмотрим в отдельной теме, а сейчас я покажу, как установить на сайт WordPress инструмент для публикации этих счетчиков, — Google tag manager или сокращенно GTM, без применения плагинов.

Регистрация в сервисе GTM

Для этого нам нужно зарегистрироваться в Диспетчере тегов от Google перейдя по ссылке www.google.com/intl/ru/tagmanager. После чего перед вами откроется страница добавления нового аккаунта.

В поле «название аккаунта» вписываем любое понравившееся название, жмем кнопку далее. В следующем окне, в названии контейнера вводим название нашего сайта, чтоб потом было его легче искать, если необходимо будет добавить новые контейнеры для других доменов. Выбираем кнопку «Веб-сайт» и жмем «создать».

Принимаем условия «Соглашения об Условиях использования Диспетчера тегов Google», вуаля, перед нами открывается окно с кодом Диспетчера тегов Google, который нам нужно установить на наш сайт, работающий под CMS WordPress.

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

Далее этот код нам нужно установить на страницы нашего сайта.

Для этого необходимо отредактировать файл header.php, который содержит в себе раздел <head> и тег <body>. Есть два пути для редактирования этого файла: 1 — отредактировать его непосредственно в нашей теме из админ. панели управления сайтом; 2 — создать дочернюю тему и отредактировать это файл в ней.

Преимущество первого способа в том, что не нужно углубляться в код и копаться в структуре файлов на хостинге. Однако, если обновится установленная нами тема, то возможно что обновится и файл header.php этой темы, что приведет к потере всех внесенных нами изменений. Таки образом упустив из внимания обновление этого файла можно потерять дальнейшую статистику по сайту до тех пор, пока мы не внесем код GTM в файл header.php заново.

Установка кода GTM на сайт через встроенный редактор

Если вы все же решились пойти эти более легким путем, то в панели управления сайтом нужно перейти по пути: Внешний вид → Редактор. Перед вами откроется следующая страница (содержание страницы может отличаться в зависимости от темы, которая у вас установлена, но структура будет подобной):

В колонке «шаблоны» находим файл header.php и нажимаем на него для перехода к редактированию. Находим в файле тег <head> и тег <body> (в нашем шаблоне он выглядит так: <body <?php body_class(); ?>>) и размещаем код Диспетчера тегов Google в соответствующем порядке, код из первого окна после тега <head>, второго после <body <?php body_class(); ?>>. Должно получиться вот так:

После чего нажимаем кнопку «Обновить файл», и вуаля, Диспетчер тегов Google установлен на наш сайт. Его наличие можно проверить обновив любую страницу сайта и выбрав в выпадающем окне, после нажатия правой кнопки мышки, пункт «Посмотреть код страницы». Если все сделано правильно, то в коде страницы вы найдете две установленных части кода GTM.

Однако установка подобным образом кода Диспетчера тегов чревато не только его исчезновением после очередного обновления темы WordPress, но и возможными ошибками при самой установке. Если вы не правильно вставите код или что то пойдет не так, то после нажатия кнопки «Обновить файл» есть возможность потерять доступ к панели управления сайтом из — за ошибки в коде, и соответственно таким образом и «поломать» весь сайт.

Поэтому я рекомендую делать все изменения в коде только непосредственно через доступ к ним на хостинге. При этом обязательно сохранив перед любыми изменениями исходный файл у себя на компьютере, чтоб если что то пойдет не так, то всегда можно было бы вернуться к исходной версии и не навредить сайту в целом.

Установка кода GTM путем изменения файлов на хостинге

Более надежный способ, это создать дочернюю тему WordPress и проводить все изменения в коде файлов темы уже непосредственно на хостинге. Как создавать дочернюю тему WordPress я рассмотрю в отдельной статье. Сейчас рассмотрим установку Диспетчера тегов в дочерней теме.

Для этого нам нужно скопировать файл header.php из родительской темы (обычно находится в корневой папке wordpress по пути: wp-content → themes → название вашей темы → header.php), в папку с дочерней темой. Поскольку файлы дочерней темы загружаются перед файлами родительской темы и перекрывают их, то этот способ изменения файла header.php гарантирует нам, что после обновления родительской темы он останется неизменным.

Сохраняем копию исходного файла у себя на компьютере, для возможности восстановления его исходного состояния. Открываем файл header.php на своем хостинге (я это делаю при помощи редактора Sublime Text 3) и видим примерно следующее:

Далее находим теги <head> и <body> по аналогии с выше описанным способом установки GTM, и вставляем необходимый код из окна Диспетчера тегов Google. Должно получиться примерно так:

Сохраняем и проверяем наличие кода на сайте после обновления страницы через функцию браузера «Просмотр кода страницы».

Обратите внимание, что код вашего файла header.php может немного отличаться от моего, в зависимости от темы, которую вы используете. Но структурно они будут похожи.

Теперь у нас все готово для дальнейшей работы с Диспетчером тегов от Google. В следующих публикациях мы рассмотрим как установить код счетчиков Google Analytics, Яндекс Метрики и Пиксель Facebook.

Задавайте свои вопросы по теме, оставляйте комментарии, подписывайтесь на обновления блога.

Благодарю за внимание! 🙂

Категории: WordPress Уроки
Сергей Коваленко: @BlessSergeyКонсультирую и делюсь своим опытом Поисковой оптимизации (SEO), WEB разработки, настройки контекстной рекламы и рекламы в соцсетях. С 2007 года я занимаюсь работой в сфере информационных технологий. Начинал с работы мастером по ремонту компьютеров и компьютерной техники в небольшой компании. Затем, повысив уровень своих знаний и навыков, занялся удаленным администрированием информационно технических сетей предприятий. Побывал на должности руководителя отдела инженерно технических средств безопасности. Сейчас нашел себя в такой многофункциональной среде как WEB разработка. Развиваю свои навыки в проектировании и обслуживании сайтов на различных платформах. Изучаю WEB разработку на популярной CMS Wordpress, занимаюсь SEO оптимизацией сайтов, контекстной рекламой в поисковых системах Google и Yandex, а так же в социальных сетях Facebook и Vkontakte.