Как подключить Яндекс Метрику на Landing Page

Пошаговая и понятная инструкция интеграции Метрики с сайтом.

Яндекс Метрика — бесплатный интернет-сервис компании Яндекс, предназначенный для оценки посещаемости веб-сайтов, и анализа поведения пользователей. Счётчик «Яндекс.Метрика» работает по принципу обычного счетчика посещений: JS (JavaScript)-код — устанавливается веб-мастером на страницах сайта и собирает данные о каждом посещении.

Другими словами, ЯМ предоставит тебе детальный анализ всех посещений.

Скриншот сводки на примере разрабатываемого лендинга
Скриншот сводки на примере разрабатываемого лендинга

Инструкция

  1. Регистрируемся в Яндексе, т.е регаем почту. Авторизовываемся
  2. Переходим по ссылке: https://metrika.yandex.ru/list? или напиши в поисковике «Яндекс метрика» и кликни на официальный сайт
  3. По умолчанию открывается раздел «счетчики», если у вас не так, откройте ее. Далее → Добавить счетчик.
Счетчики → добавить счетчик
Счетчики → добавить счетчик

4. Имя счетчика можно указать любое, главное понимать с какого это сайта. Домен — домен твоего сайта. Клик на «создать счетчик».

Как подключить Яндекс Метрику на Landing Page, image #3

5. После нужно добавить код метрики к себе на сайт. В зависимости от платформы твоего сайта выбери нужный раздел и следуй понятной инструкции.

Как подключить Яндекс Метрику на Landing Page, image #4

У меня сайт написан руками, поэтому покажу как это делал я:

Скопировал код счетчика.

В html коде в файле index.html перед закрывающим тегом </head> я вставил код своего счетчика, который был предоставлен после создания счетчика.

Как подключить Яндекс Метрику на Landing Page, image #5

6. Вернемся в раздел «счетчики».

Как подключить Яндекс Метрику на Landing Page, image #6

Слева окружность оранжевого цвета, это значить, что идет проверка.

Зеленый — метрика успешно подключена.

Вот и все, ЯМ успешно припаркована.

Поклацай по разделам, блокам, изучи эту зверюгу)

Установи цели для сайта, подробная документация тут:

https://yandex.ru/support/metrika/

Также здесь найдешь инструкцию по всей метрике.

Пример цели на клик по кнопке

Сорян за кривые цифры, рисовал прямо в инструменте «ножницы»
Сорян за кривые цифры, рисовал прямо в инструменте «ножницы»

После всплывает модалка, сделай все как на скрине, название и идентификатор цели можешь указать свой. После → добавить цель.

Как подключить Яндекс Метрику на Landing Page, image #8

Открываем html-код нашей кнопки и добавляем вот такой атрибут:

onclick="ym(xxxxxxxx, 'reachGoal', 'ident'); return true;»

  • Вместо xxxxxxx — номер счетчика, можно чекнуть тут:
Как подключить Яндекс Метрику на Landing Page, image #9
  • Вместо ident — тот самый идентификатор цели, который добавили при создании цели — headerBtn.

У меня получился вот такой вот код:

<button class="btn-popup header-phone__btn_o" onclick="ym(52954111, 'reachGoal', 'topBtn'); return true;" data-button="Заявка с шапки" aria-label="Перезвоните мне" type="button">

Ознакомься с документацией, добавь цели на кнопки, заполнение форм. Создай составную цель.

Если нужна помощь, обращайся:

  • Email: ilmaz.dev@yandex.ru

P.S. Понравилась статья? Сохрани, чтобы не потерять.

462 views·1 share