Быстрый и надёжный хостинг на SSD-дисках от 165р в месяц   •   Реклама
15 537 просм
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.
    • 0
    778
      •  Администратор
    28 окт в 21:24

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

    <script>
    
    	window.onload = function () {
    
    		document.getElementById("wpcf7mailsent").onclick = function() {
    
    			yaCounterXXXXXXXX.reachGoal("feedback");
    
    		}
    
    	}
    
    </script>

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

    • 0
    679
      •  Гости
    27 окт в 10:34

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

    • 0
    778
      •  Администратор
    27 окт в 02:33

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

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

    • 0
    679
      •  Гости
    27 окт в 01:53

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

    <script type="text/javascript">

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

    yaCounterXXXXXXXX.reachGoal('feedback');

    }, false );

    </script>

    • 0
    778
      •  Администратор
    26 окт в 18:00

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

    • 0
    679
      •  Гости
    26 окт в 16:18

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

    • 1
    778
      •  Администратор
    10 сен в 16:19

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

    • 0
    679
      •  Гости
    9 сен в 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>

    Подскажите как правильно установить цель

    • -1
    679
      •  Гости
    8 авг в 15:19

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

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

    • -1
    778
      •  Администратор
    29 мая в 01:07

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

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

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

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

    yaCounter48376946.reachGoal('callbackclick');

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

    • 0
    679
      •  Гости
    28 мая в 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)

    • 2
    679
      •  Гости
    12 апр в 14:08

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

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