Добавление счётчиков в WordPress

Добрый день, уважаемые читатели.
Когда новый сайт запущен на орбиту, думаю, любому разработчику интересно узнать, как часто и кем его сайт посещается. Хорошо бы при этом знать и сопутствующую статистику сайта по посещениям.

Для сайтов на WordPress есть специальные плагины для анализа посещений. Вроде бы такую услугу и хостер предоставляет. Я эти способы почти не использую. Может быть позже поделюсь опытом. Стараюсь обходиться обычными средствами, т. е. ставить счётчики от поисковых систем. В первую очередь, ставлю счётчики Гугла и Яндекса. В интернете есть много статей о том, как установить счётчики посещений сайта от Google и Yandex. Как зарегистрировать свой сайт в поисковых системах и получить коды счётчиков для установки на свой сайт - этого я излагать не буду - попробуйте самостоятельно - это несложно. Если интересно, могу рассказать отдельно. А пока опишу практическую часть.

Допустим, код счётчика мы получили и думаем о том, как внедрить этот счётчик на свой сайт. Разберём пример.

Код счётчика от Яндекса

Вот такой код моему сайту достался (ещё информер можно было выбрать, но о нём - позже):

<!-- Yandex.Metrika counter -->
<script type="text/javascript">
    (function (d, w, c) {
        (w[c] = w[c] || []).push(function() {
            try {
                w.yaCounter36483216 = new Ya.Metrika({
                    id:36483216,
                    clickmap:true,
                    trackLinks:true,
                    accurateTrackBounce:true
                });
            } catch(e) { }
        });

        var n = d.getElementsByTagName("script")[0],
            s = d.createElement("script"),
            f = function () { n.parentNode.insertBefore(s, n); };
        s.type = "text/javascript";
        s.async = true;
        s.src = "https://mc.yandex.ru/metrika/watch.js";

        if (w.opera == "[object Opera]") {
            d.addEventListener("DOMContentLoaded", f, false);
        } else { f(); }
    })(document, window, "yandex_metrika_callbacks");
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/36483216" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->

Этот код счётчика состоит как бы из двух частей:
скриптовой -

<script>между тегами</script>

и нескриптовой -

<noscript><div>блочная часть</div></noscript>

Яндекс рекомендует разместить счётчик ближе к началу страницы. И другие рекомендуют то же. Согласимся: пусть лучше нам посещение зачтут ещё до загрузки "телесной части" (<body>), которая с контентом, футерами-подвалами и боковыми панелями-виджетами может грузиться долго, и до счётчика очередь загрузки может и не дойти.

Вставка кода счётчика в WordPress

Смотрим, как устроены наши страницы, генерируемые кодом WordPress. В теме Nirvana, которую я использую, часть java-скриптов загружается и описывается в заголовке страницы (между тегами <head></head>): см. объявления типа <script type= … - в результирующем html-коде.

Будет логично и скриптовую часть счётчика поместить тут же (в заголовок страницы). Для этого открываем в редакторе файл header.php нашей WordPress-темы и вставляем скриптовую часть кода, например, перед закрывающим тегом </head>. Не забудьте обрамить вставленный код комментариями (см. например, как в оригинале от Yandex.Metrika), чтобы потом не путаться: позже в это место добавятся коды других счётчиков или ещё какие-нибудь нужные скрипты.

Что касается нескриптовой части счётчика: её в заголовке лучше не размещать. Это, правда, не запрещается - размещать блоки div внутри head, но валидатор (http://validator.w3.org/) на это будет ругаться и посчитает за ошибку. В теме Nirvana, установленной на моем сайте, прописано в самом начале страницы <!DOCTYPE html>, то есть подразумевается использование стандарта HTML 5, но в валидаторе этот стандарт вроде как в стадии эксперимента, и я оставляю в его опциях - автоопределение. Поэтому, чтобы соблюсти "чистоту кода", лучше разместить нескриптовую часть счётчика внутри тегов <body> страницы </body>. Для этого можно отредактировать тот же файл header.php, потому что в его коде как раз открывается тело страницы тегом <body>. Но я решил "загнать" нескриптовые половинки счётчика в самую конечную часть страницы - поближе к её закрытию (перед закрывающим тегом </body>). Для этого я прописал нескриптовую часть счётчика в файл подвала WordPress-темы: footer.php.

Кстати, а что если нескриптовую часть совсем удалить, а скриптовую часть оставить? Оказывается, при определенных условиях, даже "половина" счётчика будет работать, т. е. засчитывать посещение. Детальней о работе счётчика читайте у разработчика здесь https://yandex.ru/support/metrika/general/how-it-works.xml

Что делать с информером? Для сбора статистики информер не нужен. Статистика будет собираться тем кодом, который приведен выше. А информер обычно используется для отображения числа посещений прямо на страницах сайта, ну или так, красоты ради или понтов. Где и как его размещать я расскажу ниже.

Код счётчика от mail.ru

Имеет похожую структуру: есть скриптовая и нескриптовая части - как и у счётчика Яндекса. Поэтому я его тоже разделил на две части, которые поместил в заголовок и тело страницы, соответственно.

Код счётчика Google

Этот код состоит полностью из скрипта:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-69548327-2', 'auto');
  ga('send', 'pageview');

</script>

Поэтому я разместил его в заголовке страницы, прописав в header.php.

Код счётчика LiveInternet

Я выбрал раздельный вариант кода: одна часть - сам счётчик (невидимая часть), вторая часть - логотип. Сервис LiveInternet нам тоже подсказывает, где лучше разместить код невидимого счётчика: для более точного учета посещаемости его нужно вставить как можно ближе к началу страниц, но после тега <body> - это я прописываю в header.php:

<!--LiveInternet counter--><script type="text/javascript"><!--
new Image().src = "//counter.yadro.ru/hit?r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random();//--></script><!--/LiveInternet-->

Видимая часть - представляет собой логотип (информер):

<!--LiveInternet logo--><a href="//www.liveinternet.ru/click"
target="_blank"><img src="//counter.yadro.ru/logo?45.13"
title="LiveInternet"
alt="" border="0" width="31" height="31"/></a><!--/LiveInternet-->

- его буду размещать с другими информерами в отдельном месте.

Код счётчика Rambler

Рамблер рекомендует поместить свой код перед закрывающим тегом </body>

<!-- begin of Top100 code -->
<script id="top100Counter" type="text/javascript" src="http://counter.rambler.ru/top100.jcn?4421078"></script>
<noscript>
<a href="http://top100.rambler.ru/navi/4421078/">
<img src="http://counter.rambler.ru/top100.cnt?4421078" alt="Rambler's Top100" border="0" />
</a>
</noscript>
<!-- end of Top100 code -->

Разделять такой script на две части и помещать их раздельно в заголовок и body-часть страницы не рекомендуется: в этом коде уже прорисовывается информер (логотип) - поэтому буду помещать этот код в то место, где размещу остальные информеры.

Размещение информеров

Пока пойду простым путём и размещу информеры в отдельном виджете в правой колонке.

Для этого использую виджет типа "Текст" (с некоторых пор стало возможным использовать виджет типа HTML), в который просто вставлю коды информеров (пока только Rambler, mail.ru и LiveInternet). Например вот так, тупо - сплошняком (вставив лишь между счетчиками пробелы), без форматирования:

<!-- begin of Top100 code --><script id="top100Counter" type="text/javascript" src="http://counter.rambler.ru/top100.jcn?4421078"></script><noscript><a href="http://top100.rambler.ru/navi/4421078/"><img src="http://counter.rambler.ru/top100.cnt?4421078" alt="Rambler's Top100" border="0" /></a></noscript><!-- end of Top100 code --> <!-- Rating@Mail.ru logo --><a href="http://top.mail.ru/jump?from=2771881"><img style="border: 0;" src="//top-fwz1.mail.ru/counter?id=2771881;t=476;l=1" alt="Рейтинг@Mail.ru" width="88" height="31" /></a><!-- //Rating@Mail.ru logo --> <!--LiveInternet logo--><a href="//www.liveinternet.ru/click" target="_blank" rel="noopener"><img title="LiveInternet" src="//counter.yadro.ru/logo?58.1" alt="" width="88" height="31" border="0" /></a><!--/LiveInternet-->

Смотрим визуально - как выглядит страница со счётчиками - вроде "не страшно" - для начала сойдёт. Так пока и оставляем. На всякий случай проверяем, не накосячили ли мы с кодом страницы - всё тем же валидатором (http://validator.w3.org/).

2 комментария

  1. Работает на Nirvana WordPress. как убрать эту запись из футера? все что пишут в интернете-не получается, надписи вордпресс в коде нет!

    • Надпись в футере выводится через cryout_footer_hook() (\themes\nirvana\footer.php), а сам код текста генерируется функцией nirvana_site_info() в файле темы \themes\nirvana\includes\theme-functions.php
      Править код прямо в этом файле - нехорошо (изменения затрутся при последующем обновлении файлов темы nirvana, если о них забыть).

      Надо в папку дочерней темы скопировать файл functions.php из папки родительской темы \themes\nirvana\
      и в конец этого файла добавить такую строку:
      remove_action('cryout_footer_hook','nirvana_site_info',15);
      - которая отменит вывод лишнего текста "Powered by nirvana", WordPress и связанных с ними ссылок.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *