Как создать и настроить цель типа «JavaScript-событие» в «Яндекс.Метрике»?
Яндекс.Метрика не нуждается в представлении. Ведь это один из мощнейших инструментов для веб-аналитики. Сам по себе сервис включает в себя множество инструментов для сбора данных, одним из которых являются «Цели».
Цель – это некий сценарий, при успешном прохождении которого поставленная цель считается достигнутой.
Всего на момент написания статьи Яндекс.Метрика содержит в себе 4 типа целей. Это:
- Количество просмотров страниц.
- Посещение определенных страниц.
- JavaScript-событие.
- Составная цель.
Сегодня мы поговорим о JavaScript-событии, в следующих же статьях, по отдельности, рассмотрим остальные типы целей.
Этот тип цели считается достигнутым, когда при определенных условиях (их мы рассмотрим ниже) вызывает специальный код.
Для начала – давайте получим этот код.
1. Зайдите в Яндекс.Метрику.
2. Далее, напротив нужного вам счетчика, нажмите на шестеренку (она вызывает страницу настроек).
3. На открывшейся странице настроек переключитесь на вкладку «Цели» и нажмите на кнопку «Добавить цель».
4. В открывшейся форме выбираете «JavaScript-событие», где вводите название цели и ее идентификатор.
И нажимаете «Добавить цель».
После чего, при успешном создании цели, она появиться в общем списке целей:
Где вы нажимаете «Сохранить». Если этого не произошло – пишите об этом в комментариях.
Теперь нам нужно сохранить номер счетчика (не путайте с номером цели) и идентификатор цели:
Они нам потребуются для уже финальной установки цели на наш сайт.
Во всех случаях мы будем вызывать следующую функцию:
yaCounterXXXXXX.reachGoal("TARGET_NAME");Где «XXXXXX» – как раз номер вашего счетчика, а «TARGET_NAME» – идентификатор цели. А теперь примеры.
Установка цели на форму
Если вы на своем сайте имеете форму без технологии AJAX, то есть в ней присутствует часть похожая на эту:
<form action="" method="get">То в этот тег вы можете вставить код цели. Пример:
<form action="" method="get" onsubmit="yaCounterXXXXXX.reachGoal('TARGET_NAME'); return true;">В таком случае, при успешной отправке формы – цель будет считаться достигнутой.
Установка цели на кнопку, ссылку или другой элемент HTML
Этот способ установки цели подойдет для различных кнопок, таких как «скачать» – если, например, на вашем сайте есть прайс и вы хотите отследить, сколько человек заинтересовались вашими услугами.
Пример установки кода на кнопку:
<input type="button" onclick="yaCounterXXXXXX.reachGoal('TARGET_NAME'); return true;" value="Купить" />Пример установки на ссылку:
<a href="/price.zip" onclick="yaCounterXXXXXX.reachGoal('TARGET_NAME'); return true;">Наш прайс</a>Пример установки кода на простой div:
<div onclick="yaCounterXXXXXX.reachGoal('TARGET_NAME'); return true;">Hello, world!</div>Во всех случаях, как вы заметили, код идентичен.
Установка цели на просмотр страницы
Код, который представлен ниже, вы вставляете на нужные вам страницы в секции BODY.
<script>
window.onload = function() {
yaCounterXXXXXX.reachGoal("TARGET_NAME");
}
</script>В таком случае, если человек посетил страницу, где размещен этот код, цель считается достигнутой.
Установка цели на время нахождения на странице
В отличие от предыдущего варианта, пользователь должен не просто посетить страницу, но и еще пробыть на ней некоторое время.
Реализация:
<script>
setTimeout(function() {
yaCounterXXXXXX.reachGoal("TARGET_NAME");
}, 180000); // 3 минуты
</script>Код вы также вставляете на нужные вам страницы или сразу на весь сайт.
Подведя итог всему написанному выше, можно сказать, что ключевым в этой цели является функция:
yaCounterXXXXXX.reachGoal("TARGET_NAME");Ее вы уже используете так, как только посчитаете нужным. Возможно, я описал не все варианты составления целей типа «JavaScript-событие», и если вам чего-то не хватает или возникают трудности – пишите об этом в комментариях.
