1 авг 2022 в 01:02

Простая Yandex metrika + React

Ожидает приглашения

Это будет статья с простым и понятным подключением к yandex metrika к вашему проекту написанному на React.

Не будем тянуть и сразу к делу, первое что не обходимо сделать - это создать аккаунт на https://metrika.yandex.ru, там все достаточно просто.

Далее можете скачать у меня, либо создать свой тестовый проект, который будет использоваться в аналитике.

git clone https://github.com/Katsiaryna-Yaravaya/react-Y.Analytics.git

Для запуска, заходим в корень проекта и выполняем две команды последовательно.

npm install
npm start

Как вы можете видеть, все достаточно просто.

Теперь мы можем начать интегрировать в наш проект yandex metrika. Переходим на https://metrika.yandex.ru
Нажимаем кнопку "Добавить счетчик"

Заполняем форму:

Имя счетчика - любое имя к примеру "my-project"
Адрес сайта - "test.com"
Ставим галочку напротив "Я принимаю условия"
И кликаем на кнопку "Создать счетчик"

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

Копируем код

Идем в наш проект папка public/index.html вставляем часть <script>code</script> в head и <noscript>code</noscript> в body

Пример подключение кода yandex metrika в проект

Перезагружаем проект нажимаем F12 или просмотреть код страницы (после клика на правую кнопку мыши)- вкладка Network (или Сеть), и у нас появится запрос для получения кода от yandex.

Если tag.js имеет статус blocked и в консоли показывает ошибку ERR_BLOCKED_BY_CLIENT эта проблема решается отключением Adblock или программ, подобных ему в настройках расширения.

Отключили, перезагрузили, и вот мы получили наш скрипт

Возвращаемся на сайт metrika.yandex нажимаем на кнопку "Начать пользоваться" и видим наш счетчик, то нажав на него, мы можем увидеть статистику по нашему сайту (данные не обновляются моментально, так что если сразу не увидели результат, немного подождите)

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

Нажимаем на кнопку "Добавить цель", для создание цели

Придумываем название, в моем случае это "Нажатие"
Тип условия JavaScript-событие
Создаем идентификатор цели для уникальности нашего нажатия
Яндекс генирирует нам код для использовния, который мы копируем
и нажимаем "Добывить цель"

Вставляем код предоставленный Яндексом в наш код

      <button type="button" className={'fill'} onClick={()=>{
          ym(89673753,'reachGoal','btn-click-me')
          console.log('click');
        }}>click me
      </button>

Проверяем что в Network наш запрос благополучно отправляется

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

Теги:

Хабы: