Analytics
Сейчас в сети: 425
Сейчас в сети: 425
Вопросы настройки тегов, правила и макросы, администрирование GTM
Подсказки
star_border
Ответить

Отслеживание отправки форм

Бакалавр ✭

Добрый день.

 

Возникла проблема настройки прослушивания форм на сайте http://smartwatch-bog.ru/

Отслеживать нажатие кнопок "Заказать часы со скидкой 50%" удалось настроить, с помощью триггера:

Тип: Клик Все элементы

Активация: Click URL содержит button1.png

 

А вот отследить нажатие на кнопку "Заказать сейчас" в форме на первом экране и на остальных всплывающих формах (при нажатии на кнопки "Заказать часы со скидкой 50%" и др. кнопки на сайте) не удается.

Форма везде одна (при нажатии на любые кнопки). Для работы формы используется библиотека Jquery.

Отследить параметры элементов формы с помощью GTM (триггер, который ловит все клики) не удается.

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

Как это сделать? Какой код этого обработчика может быть и куда его нужно разместить?

 

Пробовал размещать так

<input id="indexButton25" name="" onclick = "dataLayer.push({

'eventCategory':'OrderFormNow', '

eventAction':'Click',
'eventLabel':'OrderForm_Click',
'event':'UAevent'
})" value="Заказать сейчас" style="position: absolute; left: 30px; top: 274px; width: 280px; height: 60px; z-index: 1;" type="submit">

не работает!

данные переменные не передаются в dataLayer?

 

данный код находится в файле smartwatch-bog.ru/zakaz-zayavka.html

и для каждой из 4 формы есть такой файл zakaz-zayavka2.html , zakaz-zayavka3.html , zakaz-zayavka4.html

 

Как правильно настроить отслеживание отправки форм?

Буду очень благодарен за помощь. 
Спасибо.

1 Ответ экспертаverified_user

Утвержденные решения
Лучший ответ.
Решение
Утвердил автор темы Роман К
декабря 2016

Отслеживание отправки форм

Ведущий участник

лучше не на клик, а на onsubmit формы в файле /zakaz-zayavka/zakaz_zayvka.html
Будет выглядеть так: <form name="contact" method="post" action="send.php" onsubmit="window.top.dataLayer.push({'eventCategory':'OrderForm_Now','eventAction':'Click','eventLabel':'OrderForm_Click','event':'UAevent'});return true;" enctype="multipart/form-data" accept-charset="UTF-8">

Просмотреть решение в исходном сообщении


Все ответы

Отслеживание отправки форм

Магистр ✭

Проверьте "Конфигурация встроенных переменных "

Более подробно на странице https://support.google.com/tagmanager/answer/6106899?hl=ru

Настроить можно в разделе "переменные"

Отслеживание отправки форм

Бакалавр ✭

Спасибо
вроде бы все пользовательские новые переменные и события создал

Переменные уровня данных:
1. eventCategory

2. eventAction

3. eventLabel

И пользовательское событие UAevent

 

нужно ли в моем случае использовать dataLayer.push() и куда его вставлять если нужно?

 

 

Отслеживание отправки форм

Бакалавр ✭

Определил с помощью GTM следующий код для отслеживания успешной отправки формы. Создал следующий тег

 http://prntscr.com/dlwvii 

Как понять работает ли данный код и тег соответсвенно?

С таким триггером

 http://prntscr.com/dlww2r

Правильный ли триггер или нужен другой?

Для передачи данных, полученных прошлым тегом создал следующий тег

http://prntscr.com/dlwwo7

С таким триггером

http://prntscr.com/dlwx4r

Определил пользовательское событие ajaxSuccess

http://prntscr.com/dlwzdr

Правильный ли триггер в последнем случае? Понимает ли GTM с таким условием, что тег срабатывает когда event = ajaxSuccess ?


Данные настройки в GTM не позволяют отследить отправку форм (нажатие на кнопку "Заказать сейчас" в форме). 

При прослушивании в GTM debug не видно изменения названия события event на ajaxSuccess после отправки формы (после заполнения формы и нажатия на кнопку "Заказать сейчас"). В чем может быть проблема? Как я понял в форме установлена валидация, может этот функционал мешать процессу отслеживания или как-то работать по-другому из за этого?

Форма заказа на сайте

http://prntscr.com/dlx0lp
После заполнения и отправки формы появляется такое сообщение на этой же странице в этом же фрейме
http://prntscr.com/dlx2ec

В чем может быть проблема, подскажите пожалуйста?
Спасибо!

 

Отслеживание отправки форм

Бакалавр ✭

Коллеги, если не сложно подскажите, как можно решить данную проблему?  Так и не удается настроить отслеживание форм на http://smartwatch-bog.ru 

Детали описаны в прошлых сообщениях. 
Буду благодарен за помощь.

Отслеживание отправки форм

Ведущий участник

Добрый день.
GTM ставит прослушиватель форм в текущее "окно" браузера, в котором он установлен. Форма у вас загружается через iframe - это по сути другой документ и другое окно. То что вы там передали в dataLayer - для браузера вообще ошибка, так как там нет его. Посмотрите ошибки в консоле браузера. 
Внутри фрейма используете следующую команду для передачи данных в dataLayer: window.top.dataLayer.push()

Отслеживание отправки форм

Бакалавр ✭

Андрей, добрый день.

Спасибо за ответ.
Подскажите, а как правильно использовать данную команду в iframe? Как она должна быть там описана?

В файле index.html нашел следующую строчку:

<iframe name="InlineFrame1" id="InlineFrame1" style="position:absolute;left:710px;top:262px;width:340px;height:360px;z-index:27;" src="zakaz-zayavka/zakaz_zayvka.html" scrolling="no">
</iframe>

 

Куда именно и как правильно описать данную команду в данном случае?
Так?

<iframe name="InlineFrame1" id="InlineFrame1" style="position:absolute;left:710px;top:262px;width:340px;height:360px;z-index:27;" src="zakaz-zayavka/zakaz_zayvka.html" scrolling="no" window.top.dataLayer.push({'eventCategory':'OrderFormNow','eventAction':'Click','eventLabel':'OrderForm_Click','event':'UAevent'})>
</iframe>

или 

<iframe name="InlineFrame1" id="InlineFrame1" style="position:absolute;left:710px;top:262px;width:340px;height:360px;z-index:27;" src="zakaz-zayavka/zakaz_zayvka.html" scrolling="no" >

window.top.dataLayer.push({'eventCategory':'OrderFormNow','eventAction':'Click','eventLabel':'OrderForm_Click','event':'UAevent'})

</iframe>

Никак не разберусь как правильно установить данную команду в iframe. 

Спасибо за помощь!

Отслеживание отправки форм

Ведущий участник

её не нужно в iframe, делаете все как и при обычном отслеживании, добавка window.top просто указывает, что нужно записать в объект верхнего уровня (основную страницу), а не в windows текущего фрейма. 

Отслеживание отправки форм

Бакалавр ✭

если не сложно, можете подсказать куда именно нужно вставить эту конструкцию?
в моем случае конструкция отслеживания формы может выглядеть так?
window.top.dataLayer.push({
'eventCategory':'OrderForm_Now',
'eventAction':'Click',
'eventLabel':'OrderForm_Click',
'event':'UAevent'
});

если да, то куда необходимо ее поместить и как правильно ее имплементировать, т.е. нужно ли этот код заключить в тег <script></script>?
- в index.html,
- в zakaz_zayvka.html, страница которая подгружается в iframe, как я понял, причем их всего 4 штуки, так как на ленде 4 места, где вызывается данная форма
- в каком-нибудь js скрипте, в каком-то файле?

Спасибо!

Лучший ответ.
Решение
Утвердил автор темы Роман К
декабря 2016

Отслеживание отправки форм

Ведущий участник

лучше не на клик, а на onsubmit формы в файле /zakaz-zayavka/zakaz_zayvka.html
Будет выглядеть так: <form name="contact" method="post" action="send.php" onsubmit="window.top.dataLayer.push({'eventCategory':'OrderForm_Now','eventAction':'Click','eventLabel':'OrderForm_Click','event':'UAevent'});return true;" enctype="multipart/form-data" accept-charset="UTF-8">