Выберите страну:

Написать нам

Напишите нам

+38 (068) 795-42-24 +7 (977) 267 71 49 связаться с нами
photo
Аналитика

Как подключить в Modx цели аналитики к форме formit и formajax

28.11.2020 18:42:44 0

Типичная задача целей аналитики для любого сайта.


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

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

Событие submit не решает данную задачу?


Многие начинающие разработчики решают данную задачу посредсвом события submit для form.
Такой код будет работать, отправлять цели в аналитику, но количество реально отправленных заявок будет значительно меньше, чем событий, которые поступят в аналитику. Событие submit будет срабатывать всегда, когда посетитель будет нажимать на кнопку отправить, не зависимо от результата валидации полей.

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

Как собирать цели для аналитики на Modx Revolution?


Для Modx Revolution сбор целей в аналитику можно реализовать несколькими способами.
 Чаще всего для разработки форм используют компоненты FormIt и FormAjax которые идут в сборке Modx Revolution.

Данные компоненты имеют событие отправки сообщения af_complete, которое можно отловить и узнать его статус.
В зависимости от статуса (успешная отправки или нет) можно будет передавать событие в аналитику. Через данное событие можно получить идентификатор формы, чтобы определить какая форма срабатывает.

 Наглядный пример сбора событий для форм Modx:

 
$(document).on('af_complete', function(event, response) { 
   var form = response.form; 
   if (form.attr('id') == 'master') { // определяем идентификатор формы
        if (response.success) { // проверяем форма отправлена успешно или нет
             dataLayer.push({'event':'form_quote'}) // событие для целей аналитики
         } 
     } 
}); 

Сам идентификатор формы задается в тег form через атрибут id.


Не забывайте, данный пример написан через jquery, код надо вставлять после подключения библиотеки.
Если у вас возникли сложности или дополнительные вопросы, пишите в комментарии или оставляйте заявку на сайте о сотрудничестве, мы поможем решить задачу!

((0))

Дмитрий Тищенко

Комментарии

Загрузка комментариев...

Еще хорошие статьи

Битрикс
Интернет магазины

Подписаться на обновления

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

Выбрать раздел

Выбрать категорию