YandexMetrikaHelper

Плагин для быстрого добавления целей(JavaScript-событие) яндекс.метрики на сайт.

Разработка студии OWL Agency.
Для вопросов и предложений: [email protected]

<script src="https://unpkg.com/@owlagency/yandexmetrika/dist/index.min.js"></script>

npm i @owlagency/yandexmetrika

Оглавление

Основные

1. Сборка и файлы
2. Инициализация плагина
3. Методы плагина

Цели

1. Цель по клику на элемент
2. Цель при доскралливании страницы на определенное количество пикселей
3. Цель при доскралливании страницы до элемента
4. Цель при входе на определенную страницу, конкретный урл
5. Цель при входе на определенную страницу, по вхождению урла
6. Цель при уходе с определенной страницы, конкретный урл
7. Цель при уходе с определенной страницы, по вхождению урла
8. Цель при установке фокуса в инпут/текстарею

Сборка и файлы

• Сборка работает через babel
• Установить зависимостей: npm i
• Команда для сборки: npm run build
• После сборки в папку dist собирается два файла: index.js и index.min.js

scr/index.js - исходный файл
dist/index.js - после сборки через babel
dist/index.min.js - сжатый файл после сборки через babel

Инициализация плагина для работы с метрикой

var yaHelperOld = new YandexMetrikaHelper({
    'idСounter': 88345790, // id метрики, обязательный параметр
    'typeСounter': 'old', // тип метрики: new|old, по умолчанию new
    'debug': true // включить дебаг
});

Другой вариант, упрощенный:

var yaHelperNew = new YandexMetrikaHelper({
    'idСounter': 88345790, // id метрики
});

• @param idСounter - Обятельный параметр, id счетчика яндекс.метрики
• @param typeСounter - тип счетчика: new|old, по умолчанию new.
• @param debug - режим дебага, выводит в консоль отладочную информацию, по умолчанию выключен

Методы

общий метод для действий setAction(action, actionTarget, targetId)

• action метод, который хотим вызвать, обятельный параметр
• actionTarget элемент к которому действие применяется, обятельный параметр
• targetId Идентификатор цели яндекс.метрики, обятельный параметр

yaHelper.setAction('clickEl', '.class-btn', 'id-click-btn')

Установка цели по клику на элемент: clickEl

Пример использования:

  yaHelper.setAction('clickEl', '.class-btn', 'id-click-btn')

• Событие: clickEl
• Идентификатор элемента: .class-btn
• Идентификатор цели в яндекс.метрике: id-click-btn

При доскралливании страницы на определенное количество пикселей: scrollPx

Пример использования:

  yaHelper.setAction('scrollPx', 1000, 'id-scrollPx')

• Событие: scrollPx
• Количество пикселей от верха страницы: 1000
• Идентификатор цели в яндекс.метрике: id-scrollPx

При доскралливании страницы до нужного элемента: scrollToEl

Пример использования:

  yaHelper.setAction('scrollToEl', '.class-el', 'id-scrollToEl')

• Событие: scrollToEl
• Идентификатор элемента, до которого нужно доскроллить: .class-el
• Идентификатор цели в яндекс.метрике: id-scrollPx

При входе на определенную страницу, конкретный урл: matchUrl

Пример использования:

  yaHelper.setAction('matchUrl', 'https://test.ru/test-page', 'id-matchUrl')

• Событие: matchUrl
• Урл страницы, которую нужно отловить: https://test.ru/test-page
• Идентификатор цели в яндекс.метрике: id-matchUrl

При входе на определенную страницу, по вхождению урла: matchUrlPart

Пример использования:

  yaHelper.setAction('matchUrlPart', '/test-page', 'id-matchUrlPart')

• Событие: matchUrlPart
• Часть урла, который нужно отловить: /test-page
• Идентификатор цели в яндекс.метрике: id-matchUrlPart

При уходе с определенной страницы, конкретный урл: leaveUrl

Пример использования:

  yaHelper.setAction('leaveUrl', 'https://test.ru/test-leave-page', 'id-leaveUrl')

• Событие: leaveUrl
• Урл страницы, которую нужно отловить: https://test.ru/test-leave-page
• Идентификатор цели в яндекс.метрике: id-leaveUrl

При уходе с определенной страницы, по вхождению урла: leaveUrlPart

Пример использования:

  yaHelper.setAction('leaveUrlPart', '/test-leave-page', 'id-leaveUrlPart')

• Событие: leaveUrlPart
• Часть урла, который нужно отловить: /test-leave-page
• Идентификатор цели в яндекс.метрике: id-leaveUrlPart

Фокус в инпут/текстарею: focusInput

Пример использования:

  yaHelper.setAction('focusInput', '.class-input', 'id-focusInput')

• Событие: focusInput
• Идентификатор элемента: .class-input
• Идентификатор цели в яндекс.метрике: id-focusInput