Для того, чтобы отслеживать какие-либо события на сайте – важно работать с точки зрения системного подхода. В противном случае вы будете постоянно вносить корректировки и терять драгоценное время. Предлагаем вашему вниманию схему, что позволит быстро настраивать отслеживание событий. Плюс в том, что в будущем вы сможете вносить минимальные изменения лишь в тегах, не прибегая к участию веб-разработчиков и дизайнеров. Ну, или почти не прибегая. Рассмотрим процесс в виде трех основных этапов:
Одним из самых популярных целевых действий на посадочной странице считается отправка информации с лид-форм. По этой причине целесообразно рассмотреть работу приведенной схемы на примере отслеживания данных событий.
Существует 2 вида форм:
Работа пользователя с формой в схеме выглядит вот так:
Настройка отслеживания форм произойдет с выполнением одного из таких действий:
Поговорим детально о каждом из случаев.
Если события отправляются в систему после клика на клавишу «Отправить» или Enter, настройка в Google Tag Manager будет иметь такой вид.
В случае использования jQuery (с версией не меньше 1.7)
<script>
var form = $('#pretty_form'); // В данном примере pretty_form - идентификатор формы на странице
var dataLayer = window.dataLayer || [];
form.on('submit', function(){
dataLayer.push({
'event': 'submitted_pretty_form'
});
});
</script>
Если вы не работаете с jQuery:
<script>
var form = document.querySelector('#pretty_form'); // В данном примере pretty_form - идентификатор формы на странице
var dataLayer = window.dataLayer || [];
form.addEventListener('submit', function(){
dataLayer.push({
'event': 'submitted_pretty_form'
});
});
</script>
Тег после этого будет иметь такой вид:
Если настройки сделаны правильно, то панель отладки будет выглядеть так:
Теперь поговорим о настройке отслеживания по заданному условию и 2 варианта действий:
Если человек попадет на страницу благодарности, то настройку будет сделать легко. Сделаем предположение: после того, как форма заполнится, пользователь окажется на странице http://site.ru/ty.php, к URL прибавим GET-параметр как имя из формы, к примеру:
Череда действий будет таковой:
function (){
return decodeURI(
(RegExp('name=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
);
}
Если же сообщение об успешной отправке будет показано, то необходима настройка обработки событий после показа данных сообщений .
Если пользователь допустил ошибку при заполнении данных, то он увидит такое окно:
Если отправка информации будет успешной, то окно будет иметь такой вид:
Текст может быть немного другим, поэтому стоит показать механизм отслеживания иконки успешной отправки.
Если вы работаете с jQuery:
<script>
dataLayer = window.dataLayer || []
var checker_stop = 0;
var checkerSubmitPopup = setInterval(function(){
if($('.sweet-alert.showSweetAlert').hasClass('visible') && !checker_stop)
{
// Попап отображается
if($('.sweet-alert.showSweetAlert .icon.success').css('display') == 'block')
{
// Это попап успешной отправки данных
dataLayer.push({'event' : 'form_submit_success'})
clearInterval(checkerSubmitPopup)
checker_stop = 1
}
}
}, 100)
</script>
Если вы не работаете с jQuery:
<script>
dataLayer = window.dataLayer || []
var checker_stop = 0;
var alert = document.querySelector('.sweet-alert.showSweetAlert');
var alert_icon = document.querySelector('.sweet-alert.showSweetAlert .icon.success');
var checkerSubmitPopup = setInterval(function(){
if(alert.classList.contains('visible') && !checker_stop)
{
// Попап отображается
if(alert_icon.style.display == 'block')
{
// Это попап успешной отправки данных
dataLayer.push({'event' : 'form_submit_success'})
clearInterval(checkerSubmitPopup)
checker_stop = 1
}
}
}, 100)
</script>
Протестить правильность работы настроек можно во время работы в режиме предварительного просмотра в Google Tag Manager. Подробное описание найдете в справке.
Отслеживание первого типа возможно с точки зрения прозрачности решения. В реальной жизни чаще приходится работать с более сложными формами, следить за которыми путем анализа действий на успешную отправку информации. Тогда лучше использовать второй вариант.
Успехов!