Счетчик Яндекса — как настроить и вставить информер (видимую часть) и скрипт на сайт WordPress

Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! В достаточно объемном мануале, посвященном описанию регистрации в Метрике и настройкам своего аккаунта на этом сервисе, я коснулся процесса установки счетчика Яндекс (в том числе его видимой части — информера) на вебсайт WordPress.

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

Yandex счетчик и информер для сайта Вордпресс

На своем блоге я уже посвятил немало материалов по вставке самых различных счетчиков посещаемости (здесь — о размещении каунтера LiveInternet, тут — TOP Mail.ru, а здесь — Рамблер и Openstat). Механизмы внедрения их на WordPress практически идентичны, включая Яндекс Метрику, однако сегодня я добавлю некоторые нюансы.

Как настроить информер и получить Яндекс счётчик для сайта WP

До недавнего времени, безусловно, самым функциональным и популярным в рунете был каунтер от Лайвинтернета. Статистика на LI многогранная и всеобъемлющая. Однако, в данном аспекте на современном этапе счетчик посещений на сайт от Метрики Яндекса этому сервису, пожалуй, ни в чем не уступает.

Более того, превосходит его в красочности и удобстве отображения аналитических данных. Можно даже сказать, что по сумме качеств Метрика стремительными темпами приближается к супер мега крутому центру аналитики и статистики своего главного конкурента Google Analytics, о котором мы еще поговорим в дальнейшем.

Но даже уже сейчас Metrika мне нравиться больше, например, по простоте восприятия интерфейса, особенно это касается обновленного варианта. Возможно, для крупных коммерческих проектов на данный момент больше подходит Гугл Аналитикс, но меня вполне устраивает функционал сервиса статистики от «зеркала рунета».

Яндекс информер, который мы будем вставлять на свой проект, начнет отображать основные данные Метрики о посещаемости, причем вполне правдивые, если корректно установлен код. Ну а теперь перейдем вплотную к практическим действиям.

Сразу скажу, что ежели вы получаете доход от размещения объявлений рекламной сети Яндекса (РСЯ), то вместе с контекстными блоками будет загружаться и Метрика. Таким образом, можно считать, что в данном случае вы уже зарегистрированы в системе. Для проверки можете перейти на страничку статистики из своей учетной записи РСЯ:

Однако, вы должны проверить, выводятся ли рекламные объявления на абсолютно всех вебстраницах вашего ресурса. Если это не так, то статистика посещаемости будет не совсем верна. В этом случае следует зарегистрироваться в Яндекс Metrika (как это сделать, подробно описано в статье, ссылка на которую дана в самом начале настоящей публикации).

По сути процесс регистрации можно считать завершенным, если вы получаете электронный ящик на почтовом сервере Yandex. Тогда вы приобретаете Паспорт и доступ ко всем сервисам вам будет открыт. Итак, после регистрации переходите на вебстраницу проектов, где вы можете добавить счётчик посещения сайта:

Опять же отсылаю вас к началу сегодняшней статьи, где присутствует ссылка на подробный материал о добавлении каунтера Яндекса. Напомню только, что во вкладке «Общие» вы имеете возможность настроить в том числе уведомления о случаях нарушения доступности сайта (в этой публикации о проверке аптаймов подробности):

Но нас в рамках сегодняшней темы больше интересует вкладка «Код счетчика», где можно предварительно дополнить настройки и получить непосредственно фрагмент для его вставки на вебсайт Вордпресс:

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

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

Настройка информера Яндекс

Ну а теперь подредактируем информер, который будет отражать визуально основную статистику посещаемости вебресурса. Для этого нужно щелкнуть по кнопке «Настроить»:

Фон видимого счётчика посетителей для сайта выбираем из палитры, которая появится после нажатия на соответствующий квадратик:

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

  • Размеры, варианты которых даны в левом верхнем углу;
  • Установить градиентную заливку (не сплошной однородный цвет, а с плавным переходом степени насыщенности, дающий эффект освещения);
  • Цвет текста (черный или белый) в зависимости от насыщенности фона;
  • Цвет стрелки (левая часть информера);

Ну, и наконец можно выбрать расширенный вариант информера. Тогда после размещения его на вебсайте он будет предоставлять дополнительную информацию в виде диаграмм, если щелкнуть по нему левой кнопкой мышки:

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

Вставка счётчика Яндекс на сайт или блог Вордпресс

Итак, после проведения всех описанных выше действий в личном кабинете Metrika вы получаете код, который будет состоять из двух частей (если вы активировали показ информера в настройках):

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

Установка скрипта счетчика Yandex

Сначала разместим скриптовую часть (на скриншоте выше она выделена в красную рамку). Схематически этот фрагмент, который располагается между открывающим и закрывающим тегами SCRIPT, можно представить так:

<script>yandex metrika counter</script>

Скрипт любого счетчика посетителей для сайта обычно рекомендуется размещать между тегами BODY для обеспечения корректных показаний. Однако, для того, чтобы зависший скрипт не мешал загрузке других элементов вебстраницы, лучше вставить его перед закрывающим тегом. Для этого нужно открыть шаблон FOOTER.PHP вашей текущей темы Вордпресс.

Замечу, что наиболее оптимальным вариантом является редактирование любых файлов через специальный редактор (например, NotePad++). Для этого необходимо подсоединиться к серверу хостинга по ФТП, где «живут» файлы вашего вэбсайта.

Использование Нотпад++ максимально уменьшает число вероятных ошибок, поскольку там созданы для этого все условия (подсветка синтаксиса для комфортной работы, возможность восстановления старого содержания файлов путем возврата на сколь угодное количество шагов назад и т.п.). Итак, внедряем скрипт, открыв на редактирование FOOTER.PHP:

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

Идея состоит в размещении всех скриптовых фрагментов в едином месте. Это позволит уменьшить количество запросов к базе данных и очистить HTML код страниц. С этой целью создаете на сервере хостинга своего вебсайта файл с расширением .js, применив уже упомянутой мной выше Нотпад++, и помещаете туда все скрипты, включая Yandex Метрику:

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

<script src="/wp-content/themes/tiny-forge/js/codes.js"></script>

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

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

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

Хотя, конечно, в шапке он будет выглядеть несколько нелепо. Существуют области вэбстраниц, где обычно размещают видимый Yandex счетчик (скажем, sidebar либо footer), эти варианты мы сейчас и рассмотрим. Сделать это можно двумя способами.

1. Вставляем первую часть кода в виджет сайдбара либо футера (подвала), если, конечно, ваша тема WordPress поддерживает эти элементы оформления. Заходим в админ панель и проследуем по пути «Внешний вид» — «Виджеты»:

2. Ежели вы по каким-то причинам не желаете задействовать виджеты, можно то же самое сделать через шаблоны WP, отвечающие за отображение боковой панели или подвала. Сначала размещаем код информера в SIDEBAR.PHP для его вывода в боковой панели:

В случае размещения информера в подвале нужно открыть на редактирование FOOTER.PHP и вписать код в этот шаблон:

Я продемонстрировал эти действия на примере своей темы и разместил информер над блоком Copyright (защиты авторских прав). Однако, универсального метода не существует. Вам придется немного поэкспериментировать и методом случайных итераций найти наиболее подходящее место для видимого счётчика. В любом случае, надеюсь, вам понятно направление, в котором необходимо двигаться.

Далее нелишним будет еще красиво оформить месторасположение информера в выбранной области вебстраницы. Для этого нужно заключить его код в тег DIV и прописать этому контейнеру class (тут о CSS классах статья), задав соответствующие отступы. Для счетчика, расположенного в футере моего блога, правило CSS для класса «count» выглядит так:

.count {margin-top: 25px;}

Пожалуй, на этом буду заканчивать. Спасибо.

Поделиться с друзьями
Игорь Горнов

Создатель и администратор сайта Goldbusinessnet.com. Участник нескольких успешных проектов и автор более 1000 статей о работе в интернете, создании сайтов, полезных программах и сервисах.

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

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

  1. Людмила Лао

    Послушала видео внизу. Знает кто-нибудь, сейчас вообще пейдж ранк от гугл как и когда обновляет данные? Установила виджет, чтоб следить за обновлениями данных от яндеса с гуглом, а гугловские данные вообще будто на месте померли.

    Ответить
    1. Игорь Горнов автор

      Людмила, Google прекратил обновление публичной информации о тулбарном значении Page Rank. Думаю, что сделано это неспроста. Видимо, они предпочитают такой расклад в силу действия некоторых алгоритмов ранжирования.

      Ответить
  2. Андрей

    Игорь здравствуйте! Как то всё мудрёно. Вставлял код на блог от рамблер топ-100, там всё просто, сгенерированный код вставил в footer.php перед закрывающим тегом body прям в редакторе темы.
    Вы описываете вставку через Notepad++, у меня в теме через эту программу ничего не изменяется. Поэтому не могу применить Ваши рекомендации, пожалуйста объясните, какой код мне вставить в footer.php.
    И ещё вопрос: после настроек, внизу, самая последняя строка (рекомендации Яндекс) — После изменения настроек кода счётчика не забудьте заменить код на всех страницах сайта! — Это что за рекомендация? У меня метрика настроена, теперь после подключения информера мне необходимо изменить что-то в том коде?
    Заранее благодарен, с уважением Андрей.

    Ответить
    1. Игорь Горнов автор

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

      Странно, мне казалось, что в статье все ясно расписано. Хорошо, повторю еще раз. Вторую часть кода (скрипт) вставляете в файл FOOTER.PHP (неважно, через админку или с помощью программы NotePad++) прямо перед закрывающим тегом BODY.

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

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

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

      Но, как я понял, Вы все-таки поставили галочку активации информера в настройках счетчика Метрики, который уже установлен на сайте? В этом случае вторую часть (скрипт) нужно вставить вместо той, что стояла раньше, а код информера (первую часть) размещаете в том месте вебстраницы, где пожелаете.

      Ответить