Супербыстрый хостинг на SSD от 115р в месяц   •   Реклама
13 694 просм
12 комм
Поделиться:

Как создать и настроить цель типа «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>

	window.onload = function() {

		yaCounterXXXXXX.reachGoal("TARGET_NAME");

	}

</script>

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

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

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

Реализация:

<script>

	setTimeout(function() {

		yaCounterXXXXXX.reachGoal("TARGET_NAME");

	}, 180000); // 3 минуты

</script>

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

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

yaCounterXXXXXX.reachGoal("TARGET_NAME");

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

12
комментариев
Гостям запрещено участвовать в обсуждениях сайта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.

Екатерина, не видя сайт трудно помочь. Полагаю, что wpcf7mailsent - это ID. Тогда попробуйте так:

<script>

window.onload = function () {

document.getElementById("wpcf7mailsent").onclick = function() {

yaCounterXXXXXXXX.reachGoal("feedback");

}

}

</script>

Скрипт вставлять желательно после кода счетчика.

  • 0
27.10 в 10:34

Доброе утро, Артем ! Да я заменила и идентификатор тоже.

  • 0

Екатерина, XXXXXXXX заменили на номер счетчика?

onclick точно не устарел.

  • 0
27.10 в 01:53

Я вставила вот такой код. А я изучала информацию и где - то написано, что onsubmit и onclick устарели так заверяли производители. Я делала через сниппеты.

<script type="text/javascript">

document.addEventListener( 'wpcf7mailsent', function( event ) {

yaCounterXXXXXXXX.reachGoal('feedback');

}, false );

</script>

  • 0

Екатерина, какую цель именно делаете из описанных в статье?

  • 0
26.10 в 16:18

Здравствуйте, Артём ! Я пытаюсь настроить цель событие JavaScript на сайт вордпресс, но она у меня не отображается(не достигается) в Яндекс Метрике ?

  • 0

Никита, полностью скопировал ваш код - скрипт работает, то есть открываются телефон и почта при клике.

  • 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
8.08 в 15:19

Нет такая же фигня. тоже самое делаю библиотеки все подключены метрика стоит- нифига не работает

еиднственное может переставить счечик метрики прямо в самый конец, но по-моему это разводка какая-то

  • -1

Константин, только что проверил цель на вашем коде - ошибок не обнаружил. В HEAD подключена библиотека jq:

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

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

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

yaCounter48376946.reachGoal('callbackclick');

Вы указали ID счетчика и название цели.

  • -1
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
12.04 в 14:08

Хорошая статья по теме. Все понятно и без лишней воды. Спасибо.

  • 2
Подняться наверх
«Pandoge» - помощник веб-мастера