Для тех, кто использует на своем ресурсе интернет-сервис от Яндекса, предназначенный для анализа посещаемости сайта — Яндекс Метрику, настройка целей имеет большое значение. Это помогает веб-мастеру или владельцу сайта анализировать статистику посещаемости и поведенческие факторы на любом этапе жизни проекта, отслеживать почему и сколько пользователей отказываются от чтения страниц, участия в обсуждениях, голосований и т. д. Вся эта информация помогает нам предпринять необходимые меры, чтобы улучшить привлекательность нашего проекта для читателей или потенциальных покупателей.

Яндекс цели на формах Chronoforms — вещь несложная, поэтому тех, кто более-менее знаком с компонентом, эта статья навряд ли заинтересует. А вот новичкам вполне пригодится.

Настройка цели в сервисе «Яндекс Метрика»

Первое, что нужно сделать — это создать счетчик «Яндекс Метрика» и установить его на свой ресурс. Если такой счетчик уже есть, переходим и авторизовываемся на сайте сервиса. Далее, переходим к настройкам соответствующего счетчика.

В данном случае у нас есть реальная задача: молодой медицинский сайт с целой категорией статей справочника и общей для них формой голосования Chronoforms 6 в самом низу каждого материала. Листать их все каждый день на предмет отслеживания пользовательской активности — так себе удовольствие. Здесь нам как раз и поможет настройка цели в сервисе «Яндекс Метрика».

Установка цели в Яндекс Метрике

Рис. 1

Выполняем по пунктам все, что описано на рис. 1:

  1. Кликаем по кнопке «Настройки» нужного счетчика.
  2. На странице настроек переходим во вкладку «Цели».
  3. Жмем на кнопку «Добавить цель».
  4. В открывшемся окне заполняем поле «Название» произвольно. Ограничений здесь нет.
  5. Далее выбираем в качестве цели «JavaScript-событие».
  6. Заполняем поле «Идентификатор цели».

Внимание!

Идентификатор Яндекс цели не должен совпадать с алиасом формы или содержаться где-либо в URL-адресах страниц сайта. В противном случае вся собранная статистика по таким целям будет некорректной, т. к. учитывает посещения страниц, адрес которых включает в себя идентификатор формы или установленной цели счетчика.

Есть так же ограничения в отношении использования спецсимволов и знаков пунктуации. Лучше, если будет указано просто слово на латинице.

  1. После заполнения всех полей текущего окна жмем на кнопку «Добавить цель».
  2. В открывшемся списке должна появиться новая созданная цель. Если нас все устраивает, жмем кнопку «Сохранить».

После сохранения счетчика, нужно обязательно обновить его код на сайте. Для этого переходим во вкладку «Счетчик» здесь же, в его настройках, копируем код и вставляем его на сайте вместо уже существующего, старого кода.

Теперь немного о том, где мы пропишем вызов функции, которая будет отправлять нашу цель в Яндекс Метрику для подсчета.

Сам yandex предлагает следующие варианты размещения:

  1. Установка на форму в качестве значения атрибута onsubmit.
  2. Установка на кнопку в качестве значения атрибута onclick.
  3. Установка на ссылку в качестве значения атрибута onclick.
  4. Установка на ссылку с передачей пользовательских параметров, где выше ссылки дополнительно располагается javascript код  функции с определением параметров. В этом случае цель также передается в качестве значения атрибута oncklick.
  5. Достижение цели при загрузке страницы. Здесь и сама функция, и вызов, размещаются во фрагменте кода javascript и обрабатываются при наступлении событий onload или load страницы, в зависимости от того, используется чистый javascript или библиотека jQuery.

Подробнее обо всех вариантах размещения можно почитать в справке Яндекса, а нас интересует самый первый вариант — «Установка на форму». Он наиболее оптимален из всех, т. к. вызовет функцию только тогда, когда форма будет отправлена. Это исключит многократное срабатывание цели при неудачной попытке отправки формы пользователем (не проходит валидацию или неправильно вводит капчу, например).

Итак, мы получили все, что нужно от «Яндекс Метрики». Пора заняться формой.

Подключение Яндекс цели к форме Chronoforms 6

Открываем нашу форму для редактирования в списке панели управления компонентом. Далее, в зависимости от того, который из режимов конструктора вы используете:

  1. Если «Классический режим CFv6», то нужно перейти во вкладку «Настройка» (Setup) и открыть там для редактирования вашу функцию «Display Form».
  2. Если «Новый режим CFv6.1», то во вкладке «Страницы» (Pages) у вас все содержимое формы, на onsubmit которой хотите повесить отправку цели, должно быть внутри контейнера «Form area».
  3. Если работаете в режиме «Базовый» (Basic), то  также помещаете все содержимое формы в контейнер «Form area» (если еще не сделали этого) и открываете его для редактирования.

И у «Display Form», и у «Form area» окно настроек выглядит примерно одинаково.

Ищем поле «Атрибуты тега формы» (Form tag attributes), оно расположено в самом низу окна редактирования, — и размещаем с новой строки следующее:

    onsubmit:ym(XXXXXX, 'reachGoal', 'TARGET');return true;

где XXXXXX — номер вашего счетчика, а TARGET — идентификатор цели.

Обратите внимание на то, что наименование атрибута и его значение должны отделяться друг от друга двоеточием. В остальном содержимое значения указывается точно так же, как бы вы прописывали его внутри тега form (только без общих кавычек на содержимое всего атрибута, разумеется).

В итоге содержимое поля должно выглядеть так:

Установка атрибутов на форму Chronoforms6

Рис. 2

Форму можно сохранять, закрывать и приступать к проверке (см. ниже).

Настройка Яндекс цели для форм Chronoforms 5

Следующий «подопытный» — наш любимый chronoforms.net. Здесь как раз установлен Chronoforms 5.

Нет, я не буду на сайте вешать форму «помогите», а с формой «спасибо» результатов ждать вообще придется долго , — просто возьмусь за единственную здесь, обычную форму обратной связи.

Для форм CF5, в отличии от «шестерки», прописать атрибут со значением в функции «HTML (Render form)» мы не сможем. А ведь в начале статьи собирались отправлять цель по событию submit формы. Раз собирались — сделаем, но через javascript функцию, которую пропишем в поле «Код JS» настроек обработчика «Load JavaScript», который поместим в такое место тела обработчика события «On submit», где форма гарантированно успешно выполнит свою задачу:

Настройка функционала формы Chronoforms5

Рис. 3

Посмотрим внимательно, что здесь есть (рис. 3).

Есть защита в виде «Check Security Question» (которой могло вообще не быть). Есть «Email» для отправки сообщения, чем тоже не всякая форма может «похвастаться»: на форме опроса или какой-нибудь «голосовалки», например, такая функция навряд ли будет присутствовать. Есть внизу и «Custom Code» — что вообще опционально.

На вашей форме обработчик события «On submit» может иметь совершенно отличный набор функций с совершенно отличными от описанных мной настройками.

Но абсолютно любая форма по сабмиту выполняет определенные манипуляции с данными, ради которых она создавалась. И в этом все формы одинаковы.

Задача конкретно нашей формы — отправить email админу при условии правильного ответа пользователя на рандомный вопрос. Следовательно, я располагаю несколькими вариантами размещения, при которых цель сработает, как надо:

  • В собственном событии «On success» обработчика «Check Security Queston»
  • Выше обработчика «Email»
  • Ниже «Email»
  • Выше «Custom Code», включая размещение скрипта с функцией внутри него самого.

А вот под «Custom Code» уже разместить не могу, исходя из наличия в нем кода, останавливающего обработку всей формы при срабатывании определенных условий.

Одним словом, некое множество одинаково правильных вариантов подбора места размещения этой функции на любой форме есть всегда. Главное, чтобы оно исключало вызов цели при неудачном результате обработки формы или после принудительной остановки всякой дальнейшей обработки (что вообще исключит срабатывание).

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

Если этот момент уяснили, приступаем к непосредственному размещению в поле «Код JS» обработчика «Load JavaScript» следующего кода:

	jQuery(function($) {
	
		 $(window).on('load', function() {
			ym(XXXXXX, 'reachGoal', 'TARGET'); 
			
		}); // End func
	
	}); //End mainfunc

где также XXXXXX — это номер счетчика, а TARGET — идентификатор цели.

В редакторе настройка выглядит следующим образом:

Код установки Яндекс цели на форму Chronoforms5

Рис. 4

Готово. Форму можно сохранить и закрыть. Приступим к проверке.

Проверка работы YandexGoal на форме обратной связи

При проверке работы цели придерживаемся рекомендаций Яндекса.

Открываем страницу формы на сайте и добавляем в конец URL, в адресной строке браузера, вот такой параметр:

    ?_ym_debug=1

Нажимаем «Enter» и открываем консоль браузера комбинацией «Ctrl + Shift + I» (вся панель инструментов разработчика) или «Ctrl + Shift + J» (отдельно консоль в новом окне). Результаты работы цели, при условии использования предложенного Яндексом режима отладки, будут выведены на консоль при отправке формы (см. рис. 5).

Также можно воспользоваться VPN и отправить форму без каких-либо дополнительных параметров.

Спустя некоторое время, цель поступит в статистику счетчика в «метрике». Посмотреть ее можно будет на странице отчета «Стандартные отчеты» — «Конверсия».

Проверка работы Яндекс цели на форме Chronoforms

Рис. 5

Подведем итог.

Получается, что разместить Яндекс цели на формах Chronoforms обеих версий можно где угодно (включая front-end часть) и как угодно… но принимая во внимание задачи самого проекта во избежание отсутствия срабатывания или же, наоборот, необоснованной накрутки.

 
Добавить комментарий