Установка цели JS событие Яндекс Метрики на формы компонента Convert Forms

Установка цели JS событие Яндекс Метрики на формы компонента Convert Forms

Разбираю функционал нового аддона JStart Target Metrika для установки целей Яндекс Метрики на формы компонента Convert Forms.

Как ставить правильно цель Яндекс метрики JavaScript событие на кнопку отправки формы Convert Forms.

Мы будем работать с компонентом который создает формы - Convert Forms

 

Почему Convert Forms?

 

Потому что  у разных форм есть свои особенности. Наиболее удобный конструктор форм в связке с joomla по моему мнению Convert Forms. 

Поэтому в первую очередь мы сделали интеграцию аддона Replacer с Convert Forms чтобы можно было считать цели.

 

Что нам понадобится:

 

Напоминаю, что все наши аддоны работают в связке с компонентом ReReplacer от Regular Labs.

 

Краткая напоминалка по установке компонента ReReplacer


Как установить компонент ReReplacer

Админ панель joomla 4 “Система” ❯ В разделе “Установка” нажимаем “Расширения” ❯ на вкладке “Загрузить и установить”, перетягиваем файл установщика в поле загрузки. Компонент установлен.

Установка аддона в компонент ReReplacer

Теперь надо зайти в компонент ReReplacer и установить аддон Replacer “ARJ_Add_JS_Target_Metrika_(CF)_v1.0.0.json”

 

Скачать аддон JStart Target Metrika (CF) v1.0.0

 

В левой части панели управления joomla, в разделе “Компоненты” кликаем по Regular Labs - ReReplacer. Откроется страница “ReReplacer: Элементы”.

Кликаем по кнопке “Импорт”

 

Ustanovka tseli JS sobytiye Yandeks Metriki na formy komponenta Convert Forms 1 09c6d

 

Всплывет меню “Импортировать объекты”, кликаем по кнопке “Выберите файл” выбираем установщик аддона. Далее нажать кнопку Импорт

 

Ustanovka tseli JS sobytiye Yandeks Metriki na formy komponenta Convert Forms 2 82c67

 

После установки аддон будет уже опубликован.

 

После установки всего необходимого для работы нужно сделать три шага.

 

Шаг 1 Указываем в настройках аддона name и id формы  

Кликаем по заголовку аддона, так мы попадем в его настройки.

 

Ustanovka tseli JS sobytiye Yandeks Metriki na formy komponenta Convert Forms 3 637ea

 

Для того чтобы сработала цель на форме в поле “Поиск” надо указать name и id формы заменив значение - .*?

 

Код строки в которой надо указать name и id формы:

(<form name=".*?" id=".*?" [^\>]+>.*?)<button (type="submit" [^\>]+)>\s*(.*?)\s*</button>(.*?</form>)

 

Ustanovka tseli JS sobytiye Yandeks Metriki na formy komponenta Convert Forms 4 3681b

 

Где взять name и id формы?

Эти данные берутся на вашем сайте из опубликованной формы через панель разработчика.

 

Открываем страницу с формой. Навели мышку на форму, кликаем правой кнопкой мыши ❯ посмотреть код. Нам откроется панель разработчика. 

 

Ustanovka tseli JS sobytiye Yandeks Metriki na formy komponenta Convert Forms 5 01e19

 

В открывшемся коде находим имя и id формы.

Эти данные генерируются автоматически в Convert Forms. Их просто надо найти и скопировать.

Далее прописываем в Аддоне в поле “Поиск”.

 

Ustanovka tseli JS sobytiye Yandeks Metriki na formy komponenta Convert Forms 6 5a60e

 

Пример:

Имя формы - cf2;

Id формы - сf2.

 

Код строки в которой указали name и id формы:

(<form name="cf2" id="cf2" [^\>]+>.*?)<button (type="submit" [^\>]+)>\s*(.*?)\s*</button>(.*?</form>)

 

Ustanovka tseli JS sobytiye Yandeks Metriki na formy komponenta Convert Forms 7 7896b

 

Шаг 2 Создаем цель в Яндекс метрике JS событие

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

В сервисе Яндекс Метрика создаем цель. Нажимаем на кнопку “Добавить цель”

Пишем название цели

Тип условия* - выбрать “JavaScript событие”

Идентификатор цели - например kontakt

 

! Важно идентификатор цели писать на английском языке. 

 

После заполнения поля “Идентификатор цели” появится поле “Код цели для сайта” он будет состоять из номера метрики и названия идентификатора. 

Нажимаем на кнопку “Добавить цель”

 

Ustanovka tseli JS sobytiye Yandeks Metriki na formy komponenta Convert Forms 8 07916

Для шага № 3 Вам понадобятся:

Номер созданной метрики и название идентификатора.

 

Ustanovka tseli JS sobytiye Yandeks Metriki na formy komponenta Convert Forms 9 7844f

 

Шаг 3 - Прописываем в аддон номер метрики и данные идентификатора цели

Возвращаемся в настройки аддона ARJ_Add_JS_Target_Metrika_(CF)_v1.0.0

В поле “Замена” надо указать код цели для сайта из настроек цели в Я.Метрике 

Строка кода по умолчанию.

\1<button onclick="ym(XXXXXX, 'reachGoal', 'TARGET_NAME'); return true;" \2>\3</button>\4

 

Строка кода с прописанным номером метрики и идентификатора.

\1<button onclick="ym(89459718, 'reachGoal', 'kontakt'); return true;" \2>\3</button>\4

 

Ustanovka tseli JS sobytiye Yandeks Metriki na formy komponenta Convert Forms 10 511d9

 

Ustanovka tseli JS sobytiye Yandeks Metriki na formy komponenta Convert Forms 12 c0cc8

 

Осталось только сохранить и закрыть.

 

Что делать когда необходимо поставить несколько целей на несколько форм?

Например, у Вас на сайте пять форм и по каждой форме надо собрать статистику.

 

  1. Создаем для каждой формы свою цель в Яндекс метрике. Если пять форм, то создаем пять целей.
  2. Дальше надо продублировать аддон и настроить его под каждую форму. Опубликовать. Настраиваем аддон выполняя шаги 1,2,3.

 

Ustanovka tseli JS sobytiye Yandeks Metriki na formy komponenta Convert Forms 12 c0cc8

 

Ustanovka tseli JS sobytiye Yandeks Metriki na formy komponenta Convert Forms 13 6453c



Рекомендую сразу менять название заголовка в аддоне под каждую цель.

 

Ustanovka tseli JS sobytiye Yandeks Metriki na formy komponenta Convert Forms 14 3ea26