Categories
Wordpress

Установка счетчиков Метрики и Аналитики в Вордпресс без плагинов – метод для новых версии шаблонов

Как устанавливать счетчики аналитики в Вордпресс мы уже описывали в статье пару лет назад – прочесть можно тут: Правильная установка кодов счетчиков для Google Analytics и Метрики. Но та статья описывала процесс для движка WordPress до версии 5.

С приходом новой шестой версии многое изменилось как в настройках тем для CMS, настройках стилей и файлов, куда устанавливаются коды счетчиков.

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

Плагин Header, Footer Injection имеест смысл использовать в тех случаях, если помимо счетчиков вы используете другие скрипты. Но не на всех страницах, а только там где требуется их функционал. Например, для отображения карт или специальных форм. Зачем грузить скрипт и увеличивать время загрузки при каждом открытии страницы? Плагин позволит гибко настроить загрузку только на нужные страницы сайта.

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

Сразу стоит сказать, что перед установкой счетчиков лучше создать “дочернюю” тему для вашей основной и уже в ней делать установку.

Главная причина для чего нужна “дочерняя” тема, это чтобы весь ваш рукописный код, а также настройки CSS стилей не исчезли после обновления основной используемой темы. При загрузке обновления, многие вещи могут затереться. Так что ставьте дочернюю тему к основной – это не сложно. Инструкцию можно найти на этой странице Что такое дочерняя тема и почему настройки нужно делать в ней.

Процесс установки кода Google Analytics и Метрики через functions.pho

Если в предудущей версии WordPress код можно было установить прямо в файл header.php в настройках темы, то сейчас этого файла просто нет. В разделе редактирования файлов темы нам предлагают только style.css (кстати, по умолчанию и его нет), файлы functions.php и theme.json.

Именно в файле functions.php мы и будем вписывать наш код счетчиков. Причем мы сделаем это сразу и для кода, который устанавливается между тегами <head></head> и между <body>…</body>.

<?php

function add_style() {
	wp_enqueue_style( 'style', get_stylesheet_uri() );
}

add_action( 'wp_enqueue_scripts', 'add_style' );

function hook_links() {
    ?>
<!-- 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-XXXXX');</script>
<!-- End Google Tag Manager -->
    <?php }
add_action('wp_head', 'hook_links');

function hook_body() {
	?>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

<!-- Yandex.Metrika counter -->
<script type="text/javascript" >
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();
   for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
   k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(92000000, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true
   });
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/92XXXXX" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

	<?php }
add_action('wp_body_open', 'hook_body');
?>

Первые строчки с функцией add_style() предназначены для того, чтобы Вордпресс использовал в работе наш файл стилей style.css.

А вот далее идет функция hook_links. Мы ее объявляем и тут же закрываем код скрипта php закрывающейся скобкой с вопросо ?>

Мы это делаем для того, чтобы просто вставить код от Google или Метрики и не маскировать его внутри кода php. Далее снова открываем код <?php и объявляем команду add_action где и вставляем содержимое функции с кодом Google. 

 <?php } add_action('wp_head', 'hook_links');

Следующая функция идентичная, только она отвечает за простановку кода внутри тегов body. Назовем ее hook_body

Объявляем ее и закрываем код php ?>. Далее вставляем все, что нужно из кодов Гугла и Яндекса, Потом снова открываем код <?php и выводим весь код через add_action. 

add_action('wp_body_open', 'hook_body');