Генератор устойчивых к взлому паролей   •   Online-инструменты
6 182 просм
6 комм
Поделиться:

Как создать и настроить цель типа «JavaScript-событие» в «Яндекс.Метрике»?

Яндекс.Метрика не нуждается в представлении. Ведь это один из мощнейших инструментов для веб-аналитики. Сам по себе сервис включает в себя множество инструментов для сбора данных, одним из которых являются «Цели».

Цель – это некий сценарий, при успешном прохождении которого поставленная цель считается достигнутой.

Всего на момент написания статьи Яндекс.Метрика содержит в себе 4 типа целей. Это:

  1. Количество просмотров страниц.
  2. Посещение определенных страниц.
  3. JavaScript-событие.
  4. Составная цель.

Сегодня мы поговорим о JavaScript-событии, в следующих же статьях, по отдельности, рассмотрим остальные типы целей.

Этот тип цели считается достигнутым, когда при определенных условиях (их мы рассмотрим ниже) вызывает специальный код.

Для начала – давайте получим этот код.

1. Зайдите в Яндекс.Метрику.

2. Далее, напротив нужного вам счетчика, нажмите на шестеренку (она вызывает страницу настроек).

Как создать и настроить цель типа «JavaScript-событие» в «Яндекс.Метрике»?

3. На открывшейся странице настроек переключитесь на вкладку «Цели» и нажмите на кнопку «Добавить цель».

Как создать и настроить цель типа «JavaScript-событие» в «Яндекс.Метрике»?

4. В открывшейся форме выбираете «JavaScript-событие», где вводите название цели и ее идентификатор.

Как создать и настроить цель типа «JavaScript-событие» в «Яндекс.Метрике»?

И нажимаете «Добавить цель».

После чего, при успешном создании цели, она появиться в общем списке целей:

Как создать и настроить цель типа «JavaScript-событие» в «Яндекс.Метрике»?

Где вы нажимаете «Сохранить». Если этого не произошло – пишите об этом в комментариях.

Теперь нам нужно сохранить номер счетчика (не путайте с номером цели) и идентификатор цели:

Как создать и настроить цель типа «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 type="text/javascript">
	window.onload = function() {
		yaCounterXXXXXX.reachGoal('TARGET_NAME');
	}
</script>

В таком случае, если человек посетил страницу, где размещен этот код, цель считается достигнутой.

Установка цели на время нахождения на странице

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

Реализация:

<script>
	setTimeout(function() {
		yaCounterXXXXXX.reachGoal('TARGET_NAME');
	}, 180000); // 3 минуты
</script>

Код вы также вставляете на нужные вам страницы или сразу на весь сайт.

Подведя итог всему написанному выше, можно сказать, что ключевым в этой цели является функция:

yaCounterXXXXXX.reachGoal('TARGET_NAME');

Ее вы уже используете так, как только посчитаете нужным. Возможно, я описал не все варианты составления целей типа «JavaScript-событие», и если вам чего-то не хватает или возникают трудности – пишите об этом в комментариях.

6
комментарий
Дмитрий
12.04 в 14:08
Хорошая статья по теме. Все понятно и без лишней воды. Спасибо.
  • 2
Константин
28.05 в 17:37
Здравствуйте, у меня yaCounterXXXXXX. reachGoal('TARGET_NAME'); находится внутри функции jQuery.ajax({
type: "POST",
url: "form.php",
data: data,
success:function(){
swal("Отлично!", "Ваша заявка успешно отправлена, мы свяжемся с вами в самое ближайшее время, спасибо :)!", "success")
$('input[type="text"],input[type="tel"]').val('');
$.arcticmodal('close');

yaCounter48376946.reachGoal('callbackclick');

},error:function(){
sweetAlert("Ошибка!", "Форма не отправлена, пожалуйста обновите страницу и попробуйте снова!", "error");
}
});

при отправке в отладке JS пишет в Uncaught ReferenceError: yaCounter48376946 is not defined, вроде как фунция не объявлена, но почему, она же прописана в html <javascript> контейнере яндекс метрики

еще в консоле Uncaught ReferenceError: yaCounter48376946 is not defined
at Object.success (common.js:67)
at j (jquery-1.11.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-1.11.1.min.js:2)
at x (jquery-1.11.1.min.js:4)
at XMLHttpRequest.b (jquery-1.11.1.min.js:4)
  • 0
Константин, только что проверил цель на вашем коде - ошибок не обнаружил. В HEAD подключена библиотека jq:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

Перед </body> сам счетчик.

Перепроверьте, верно ли здесь:

yaCounter48376946.reachGoal('callbackclick');

Вы указали ID счетчика и название цели.
  • -1
Павел
8.08 в 15:19
Нет такая же фигня. тоже самое делаю библиотеки все подключены метрика стоит- нифига не работает
еиднственное может переставить счечик метрики прямо в самый конец, но по-моему это разводка какая-то
  • -1
Никита
9.09 в 09:45
Здравствуйте! Проблема с установкой цели
Есть код скрытие номера и емеила
<p>
<script>
jQuery(document).ready(function($){
$.fn.textToggle = function(cls, str) {
return this.each(function(i) {
$(this).click(function() {
var c = 0, el = $(cls).eq(i), arr = [str,el.text()];
return function() {
el.text(arr[c++ % arr.length]);
}}());
})};
$(function(){
$('.sh_nmr').textToggle(".sh_nmr","").click();
$('.sh_nmr').textToggle(".num_hide","XXXX").click();

});
});
</script>

<div class="u phone">+7 (922) 13-<span class="num_hide">95-219</span> <span class="sh_nmr">показать</span></div>

<a href="mailto:NikitaJolobov@yandex.ru" title="NikitaJolobov@yandex.ru" rel="">NikitaJolobov@<span class="num_hide">yandex.ru</span></a><span class="sh_nmr">показать</span>
</p>

Устанавливаю цель на емеил
<p>
<a href="mailto:NikitaJolobov@yandex.ru" title="NikitaJolobov@yandex.ru" rel="">NikitaJolobov@<span class="num_hide" onclick="yaCounter49889***.reachGoal('kliktem'); return true;">yandex.ru</span></a><span class="sh_nmr">показать</span> </p>
скрипт работает

Устанавливаю цель на тел, скрипт перестает работать
<p>
<div class="u phone">+7 (922) 13-<span class="num_hide">95-**</span> <span class="sh_nmr" onclick="yaCounter49889***.reachGoal('kliktel'); return true;">показать</span></div></p>

Подскажите как правильно установить цель
  • 0
Никита, полностью скопировал ваш код - скрипт работает, то есть открываются телефон и почта при клике.
  • 0
Оставить комментарий:
Нажимая кнопку «Отправить» вы даете согласие на обработку своих персональных данных.
Имя и фамилия
E-mail
Текст комментария