Цели Яндекс Метрики javascript событие — создание и настройка

Цели Яндекс Метрики javascript событие — создание и настройка

Сегодня продолжим настраивать цели Яндекс Метрики, а именно javascript событие. Мы создадим данный тип цели в Метрике, вставим его в сайт и настроим. А сперва разберёмся для чего нам нужны такие цели.

Ранее в этой статье: Цели Яндекс Метрики, мы разбирались зачем вообще нужны цели для сайта, рассмотрели типы целей и настроили их.

В этой статье мы подробно рассмотрим цели Яндекс Метрики javascript событие.

Зачем вам нужна цель Яндекс Метрики javascript событие?

Этот тип целей довольно сложен, стоит найти программиста для установки кода на сайт. Данный тип целей зачастую и не нужен. Но бывают моменты, когда без них никак. Есть сайты, где сценарии происходят на одной странице даже для форм подписки, а не как обычно в новой странице. Для таких событий такой тип целей, как посещение страницы, не подойдёт. А значит у нас не будет возможности отследить, кто и по каким запросам и объявлениям воспользовался данной формой или кнопкой на сайте. И мы потеряем возможность улучшить эффективность нашей рекламы или любого другого типа продвижения сайта в интернете.

А ведь нам стоит отслеживать и формы подписки и формы обратного звонка, заказать звонок, JQuery и Java-формы, различные кнопки на сайте. Тип целей javascript событие, подходит тогда, когда нет возможности отследить событие методом — посещение страницы. То есть, если нет смены URL-адреса, то кроме как настройки javascript событие, другого способа отследить посетителей нет.

Довольно часто, на простых сайтах, типа блогов, лендингов и даже интернет-магазинов можно обойтись без настройки цели javascript событие. Но не всегда, иногда такой возможности нет и без настойки цели типа javascript событие, просто никак. Думаю, я достаточно объяснил, зачем нам нужно настраивать цели типа javascript событие.

Для примера, с помощью цели javascript событие можно отслеживать нажатие на кнопку «заказать товар» и только изменив цвет кнопки, можно увеличить конверсию до 10-15%.

Создание цели типа javascript событие

Входим в Яндекс Метрику.

Счетчик Яндекс Метрики

Жмём справа значок шестерёнки серого цвета. Попадаем в настройки целей Метрики.

Цели Яндекс Метрики

Жмём «Добавить цель».

Цели Яндекс Метрики

Выбираем тип цели: javascript событие. Вбиваем Название, например кнопка заказать. Вбиваем Идентификатор цели, например zakazat_01.

Стоит уточнить, в качестве идентификатора цели нельзя указывать URL-адрес любой страницы сайта и даже часть URL. Идентификатор цели пишется только латинскими буквами, числами и нижним пробелом.

Всё, цель Метрики javascript событие, мы создали.

Настройка цели типа javascript событие

В Метрике мы всё сделали. Теперь нам нужно установить код javascript события в код сайта в нужном нам месте. Без знания html, не обойтись.

Шаги настройки цели:

  1. Найти нужный нам элемент в коде сайта, например кнопку «подробнее» в файле Index.php.
  2. Далее мы выясняем какой код Метрики нам нужен в данном случае.
  3. Вставляем данный код в нужное место, а в этом коде меняем переменную Идентификатор цели.
  4. Проверяем работоспособность сайта и вставленного кода.

Ещё стоит шаг 0 добавить: сохранить предварительно редактируемый файл у себя на компьютере или перенести весь код в другой файл. Чтобы на случай, что сайт откажется показываться, мы сможем восстановить то, что было до правок.

Мы нашли, куда ставить будем наш код. Это может быть тег <script> или onclick или onsubmit.

Рассмотрим типы кодов

Во всех случаях мы будем вызывать функцию:

yaCounterXXXXXX.reachGoal(‘TARGET_NAME’);

Где, хххххх — номер счётчика Метрики, а target_name — идентификатор цели.

Типы кодов:

Код для кнопок, ссылок и других элементов html:

onclick=»хххххххх.reachGoal (‘Nazvanie_Identifikatora’); return true;»

Весь код для кнопки:

<input type=»button» onclick=»yaCounterXXXXXX.reachGoal(‘TARGET_NAME’); return true;» value=»Купить» />

Весь код для ссылки:

<a href=»/price.zip» onclick=»yaCounterXXXXXX.reachGoal(‘TARGET_NAME’); return true;»>Наш прайс</a>

Весь код для дивов:

<div onclick= «yaCounterXXXXXX.reachGoal(‘TARGET_NAME’); return true;» >Hello, world! </div>

Код для форм, где пользователь отправляет данные с сайта:

onsubmit=»хххххххх.reachGoal (‘Nazvanie_Identifikatora’, function () {alert (‘Данные отправлены’)}); return true;»

Весь код:

<form action=»» method=»get» onsubmit=»yaCounterXXXXXX.reachGoal(‘TARGET_NAME’); return true;»>

Код для ссылки с передачей параметров пользователя:

onclick=»ххххххх.reachGoal (‘Nazvanie_Identifikatora’, goalParams, goalCallback); return true;»

Это может быть кнопка/ссылка запроса обратного звонка.

Код для цели просмотр пользователем страницы

< script type = «text/javascript» > window .onload = function() { yaCounterXXXXXX.reachGoal( ‘TARGET_NAME’ ); } </ script >

Цель будет достигнута, если человек зашёл на страницу.

Код для цели определить время нахождения пользователя на странице

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

Цель будет достигнута, если посетитель пробыл на странице 3 минуты и больше.

Пошаговый процесс вставки кода цели Яндекс Метрики javascript событие в сайт

Теперь нужно разобраться со всеми этими кодами по шагам:

  1. Определяем на какой элемент сайта мы будем ставить цель.
  2. Находим этот элемент на сайте в браузере, жмём правую кнопку мыши: Просмотреть код элемента. Копируем нужный нам код.
  3. Открываем файл, куда нужно вставить код цели javascript событие по FTP, например Index.php или Index.html
  4. Находим нужный кусок кода нажав комбинацию: Ctrl + f и вставив в окно поиска скопированный код или честь кода. Это может быть из вышеперечисленных: onclick, onsubmit или script.
  5. Вставляем внутрь найденного кода код цели из вышеперечисленных: хххххххх.reachGoal (‘Nazvanie_Identifikatora’) или yaCounterXXXXXX.reachGoal(‘TARGET_NAME’)
  6. Заменяем хххххххх или yaCounterXXXXXX на номер нашего счётчика Яндекс.Метрики. И Nazvanie_Identifikatora или TARGET_NAME на Идентификатор цели, который мы написали в Яндекс.Метрики при создании данной цели.
  7. Сохраняем файл и закачиваем его по FTP.

И не забываем проверить работоспособность сайта и проверить в Яндекс Метрике работоспособность настроенной цели, то есть фиксирует ли Метрика данную цель.

Вот и всё. Тема сложная, надеюсь понятно объяснил :-)

Удачи вам в настройках целей Метрики и рекламных кампаний!

 

Если статья понравилась или хочешь сохранить её – поделись ею, жми кнопки под статьёй — Поделиться.
Получай все статьи и новости сайта в свой Вконтакте, Facebook или на электронную почту — подпишись на статьи сайта, Подпишись на Мини-курс: Настройка Яндекс Директ пошагово (справа сверху).
Поделись своим мнением в комментариях, так статьи будут интереснее и ценней!