© Сергей Паршин 2021
Главная » Плагины » Fast Yandex Metrika

Fast Yandex Metrika

Fast Yandex Metrika: плагин для настройки счётчика и целей Яндекс Метрики.

WordPress-плагин для настройки счётчика и целей Яндекс Метрики.

Функционал

Настройки счётчика:

  • сбор данных для карты кликов;
  • отслеживание кликов по исходящим ссылкам;
  • включение/отключение точности показателей отказов;
  • Вебвизор 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

  1. Перейдите в раздел «Плагины > Добавить новый».
  2. Введите в строке поиска «Fast Yandex Metrika».
  3. Активируйте плагин со своей страницы плагинов.
  4. Перейдите в раздел «Настройки > Яндекс Метрика».
  5. Укажите номер счётчика.

WordPress.org

  1. Скачайте плагин «Fast Yandex Metrika».
  2. Загрузите каталог плагина в свой каталог «/wp-content/plugins/», используя (ftp, sftp, scp и т.д.).
  3. Активируйте плагин со своей страницы плагинов.
  4. Перейдите в раздел «Настройки > Яндекс Метрика».
  5. Укажите номер счётчика.

Часто задаваемые вопросы

Как настраивать цели?

Прежде чем добавить цель, нужно создать её в Яндекс Метрике.

Телефон

  1. В выпадающем списке выберите «Телефон (WhatsApp)».
  2. Укажите имя цели. Например: phone.
  3. Пропишите CSS-селектор в формате: tel:7XXXXXXXXXX.

<a href=»tel:7XXXXXXXXXX»>+7 (XXX) XXX-XX-XX</a>

WhatsApp

  1. В выпадающем списке выберите «Телефон (WhatsApp)».
  2. Укажите имя цели. Например: whatsapp.
  3. Пропишите 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». Скрипт всё равно найдёт нужную ссылку на странице.

Форма

  1. В выпадающем списке выберите «Форма».
  2. Укажите имя цели. Например: form.
  3. Пропишите CSS-селектор в формате: #id_form или .class-form.

<form id=»id_form» class=»class-form» … >…</form>

Кнопка

  1. В выпадающем списке выберите «Кнопка».
  2. Укажите имя цели. Например: button.
  3. Пропишите CSS-селектор в формате: #id_button или .class_button.

<button id=»id_button» class=»class-button»>…</button>

Ссылка

  1. В выпадающем списке выберите «Ссылка».
  2. Укажите имя цели. Например: links.
  3. Пропишите CSS-селектор в формате: https://example.com/path/sub/?param=value&param1=value.

<a href=»https://example.com/path/sub/?param=value&param1=value»>example.com</a>

Ссылка может быть, как полная «https://example.com/path/sub/?param=value&param1=value», так и короткая «https://example.com/path/sub/», скрипт всё равно найдёт её на странице. В качестве GET-параметров, не допускается использование кириллицы.

HTML-тег

Позволяет задавать сложные CSS-селекторы: header .contacts > div:nth-child(3) a[href=»tel:7XXXXXXXXXX»].

Как разграничить клики по телефону (шапка, футер, сайдбар, контент)?

Шапка

  1. В выпадающем списке выберите «HTML-тег».
  2. Укажите имя цели. Например: header_phone.
  3. Пропишите CSS-селектор в формате: header a[href=»tel:7XXXXXXXXXX»].

<header> … <a href=»tel:7XXXXXXXXXX»>+7 (XXX) XXX-XX-XX</a> … </headre>

Футер

  1. В выпадающем списке выберите «HTML-тег».
  2. Укажите имя цели. Например: footer_phone.
  3. Пропишите CSS-селектор в формате: footer a[href=»tel:7XXXXXXXXXX»].

<footer> … <a href=»tel:7XXXXXXXXXX»>+7 (XXX) XXX-XX-XX</a> … </footer>

Сайдбар

  1. В выпадающем списке выберите «HTML-тег».
  2. Укажите имя цели. Например: sidebar_phone.
  3. Пропишите CSS-селектор в формате: aside a[href=»tel:7XXXXXXXXXX»].

<aside> … <a href=»tel:7XXXXXXXXXX»>+7 (XXX) XXX-XX-XX</a> … </aside>

Контент

  1. В выпадающем списке выберите «HTML-тег».
  2. Укажите имя цели. Например: article_phone.
  3. Пропишите 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>

Как отследить клики по кнопкам заказать в прайсе?

Таблица

  1. В выпадающем списке выберите «HTML-тег».
  2. Укажите имя цели. Например: order_table.
  3. Пропишите CSS-селектор в формате: table button.

<table> … <button>Заказать</button> … </table>

Блочная вёрстка

  1. В выпадающем списке выберите «HTML-тег».
  2. Укажите имя цели. Например: order_price.
  3. Пропишите CSS-селектор в формате: .price a.order.

<div class=»price»> … <a class=»order»>Заказать</a> … </div>

Версия

1.1

  • Поддержка сложных CSS-селекторов.
  • Контроль ошибок CSS-селекторов в консоли браузера.
  • При нарушении синтаксиса JavaScript из-за указания неправильного CSS-селектора цели, данная часть скрипта не выполняется и не вызывает ошибки.

1.0

  • Первая версия с базовыми функциями.