Добрый день, уважаемые читатели.
Когда новый сайт запущен на орбиту, думаю, любому разработчику интересно узнать, как часто и кем его сайт посещается. Хорошо бы при этом знать и сопутствующую статистику сайта по посещениям.
Для сайтов на 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/).
Работает на 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 и связанных с ними ссылок.