Описание
Плагин для настройки счётчика и целей Яндекс Метрики.
Функционал
Настройки счётчика:
- сбор данных для карты кликов;
- отслеживание кликов по исходящим ссылкам;
- включение/отключение точности показателей отказов;
- Вебвизор 2.0 (Вебвизор 1.0 — не поддерживается!);
- отслеживание хэша в адресной строке браузера.
Загрузка скрипта по событию:
- в момент начала прокрутки страницы (рекомендуется, если скрипт счётчика влияет на скорость сайта);
- после построения HTML-документа, но до начала загрузки внешних ресурсов: стили, скрипты, картинки и т.д.
Встраивание в HTML:
- добавление перед </head>;
- добавление после <body>;
- добавление перед </body>.
Настройка целей:
- телефон;
- форма;
- кнопка;
- ссылка;
- HTML-тег.
Контроль ошибок
При работе с целями на стороне пользователя, плагин отслеживает правильное указание CSS-селекторов.
JavaScript с нарушением синтаксиса не вызывает ошибки, а фиксирует её в консоли браузера (F12).
Goal #1. SyntaxError: Failed to execute ‘querySelectorAll’ on ‘Document’: ‘.class 777’ is not a valid selector.
Чтобы увидеть информацию об ошибках, в настройках плагина, включите опцию «Контроль ошибок в консоли браузера».
Скриншоты
Страница настроек
Установка
Панель управления WordPress
- Перейдите в раздел «Плагины > Добавить новый».
- Введите в строке поиска «Fast Yandex Metrika».
- Активируйте плагин со своей страницы плагинов.
- Перейдите в раздел «Настройки > Яндекс Метрика».
- Укажите номер счётчика.
WordPress.org
- Скачайте плагин «Fast Yandex Metrika».
- Загрузите каталог плагина в свой каталог «/wp-content/plugins/», используя (ftp, sftp, scp и т.д.).
- Активируйте плагин со своей страницы плагинов.
- Перейдите в раздел «Настройки > Яндекс Метрика».
- Укажите номер счётчика.
Нужна помощь?
Свяжитесь со мной в Telegram.
Часто задаваемые вопросы
-
Как настраивать цели?
-
Прежде чем добавить цель, нужно создать её в Яндекс Метрике.
Телефон
- В выпадающем списке выберите «Телефон (WhatsApp)».
- Укажите имя цели. Например: phone.
- Пропишите CSS-селектор в формате: tel:7XXXXXXXXXX.
<a href="tel:7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a>
WhatsApp
- В выпадающем списке выберите «Телефон (WhatsApp)».
- Укажите имя цели. Например: whatsapp.
- Пропишите CSS-селектор в формате: https://wa.me/7XXXXXXXXXX.
<a href="https://wa.me/7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a>
Если ваша WhatsApp-ссылка имеет вид «https://wa.me/7XXXXXXXXXX?text=Текст&source=&data=», в настройках цели укажите «https://wa.me/7XXXXXXXXXX». Скрипт всё равно найдёт нужную ссылку на странице.
Форма
- В выпадающем списке выберите «Форма».
- Укажите имя цели. Например: form.
- Пропишите CSS-селектор в формате: #id_form или .class-form.
<form id="id_form" class="class-form" … >…</form>
Кнопка
- В выпадающем списке выберите «Кнопка».
- Укажите имя цели. Например: button.
- Пропишите CSS-селектор в формате: #id_button или .class_button.
<button id="id_button" class="class-button">…</button>
Ссылка
- В выпадающем списке выберите «Ссылка».
- Укажите имя цели. Например: links.
- Пропишите CSS-селектор в формате: https://example.com/path/sub/?param=value¶m1=value.
<a href="https://example.com/path/sub/?param=value¶m1=value">example.com</a>
Ссылка может быть, как полная «https://example.com/path/sub/?param=value¶m1=value», так и короткая «https://example.com/path/sub/», скрипт всё равно найдёт её на странице. В качестве GET-параметров, не допускается использование кириллицы.
HTML-тег
Позволяет задавать сложные CSS-селекторы: header .contacts > div:nth-child(3) a[href="tel:7XXXXXXXXXX"].
-
Шапка
- В выпадающем списке выберите «HTML-тег».
- Укажите имя цели. Например: header_phone.
- Пропишите CSS-селектор в формате: header a[href="tel:7XXXXXXXXXX"].
<header> … <a href="tel:7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a> … </headre>
Футер
- В выпадающем списке выберите «HTML-тег».
- Укажите имя цели. Например: footer_phone.
- Пропишите CSS-селектор в формате: footer a[href="tel:7XXXXXXXXXX"].
<footer> … <a href="tel:7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a> … </footer>
Сайдбар
- В выпадающем списке выберите «HTML-тег».
- Укажите имя цели. Например: sidebar_phone.
- Пропишите CSS-селектор в формате: aside a[href="tel:7XXXXXXXXXX"].
<aside> … <a href="tel:7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a> … </aside>
Контент
- В выпадающем списке выберите «HTML-тег».
- Укажите имя цели. Например: article_phone.
- Пропишите CSS-селектор в формате: article a[href="tel:7XXXXXXXXXX"].
<article> … <a href="tel:7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a> … </article>
Вариаций может быть множество, не обязательно привязываться к header, footer, aside, article. Можно использовать .class или #id, главное чтобы селектор принадлежал родительскому элементу HTML-разметки.
.content a[href="tel:7XXXXXXXXXX"]
<div class="content"> … <a href="tel:7XXXXXXXXXX">+7 (XXX) XXX-XX-XX</a> … </div>
-
Таблица
- В выпадающем списке выберите «HTML-тег».
- Укажите имя цели. Например: order_table.
- Пропишите CSS-селектор в формате: table button.
<table> … <button>Заказать</button> … </table>
Блочная вёрстка
- В выпадающем списке выберите «HTML-тег».
- Укажите имя цели. Например: order_price.
- Пропишите CSS-селектор в формате: .price a.order.
<div class="price"> … <a class="order">Заказать</a> … </div>
Отзывы
Нет отзывов об этом плагине.
Участники и разработчики
«Fast Yandex Metrika» — проект с открытым исходным кодом. В развитие плагина внесли свой вклад следующие участники:
Участники
«Fast Yandex Metrika» переведён на 1 язык. Благодарим переводчиков за их работу.
Перевести «Fast Yandex Metrika» на ваш язык.
Заинтересованы в разработке?
Посмотрите код, проверьте SVN репозиторий, или подпишитесь на журнал разработки по RSS.
Журнал изменений
1.1.3
- Изменён способ вставки JS-кода счетчика после открытия тега body.
1.1.2
- Изменён способ вставки JS-кода счётчика.
1.1.1
- Не отображался счётчик на главной странице сайта. Ошибка устранена.
1.1
- Поддержка сложных CSS-селекторов.
- Контроль ошибок CSS-селекторов в консоли браузера.
- При нарушении синтаксиса JavaScript из-за указания неправильного CSS-селектора цели, данная часть скрипта не выполняется и не вызывает ошибки.
1.0
- Первая версия с базовыми функциями.