Сергей Макаров

gtm

Как отслеживать события в GTM c помощью jQuery

jQuery — популярная javascript библиотека. У jQuery простой и понятный синтаксис. Базовая конструкция:


$('#element').on('event', function (){
	dataLayer.push({
		'event':'GAevent',
		'eventCategory': 'GAeventCategory',
		'eventAction':   'GAeventAction'
	});
	fbq('track', 'Lead');
	yaCounterXXXXXX.reachGoal('yaEvent');
});

Алгоритм состоит из 3 шагов:

— С помощью селектора выбираем нужный элемент для отслеживания. Конструкция $('#element') найдет элемент с идентификатором #element

— Задаем тип события в конструкции .on('event', function (){});

— Внутри function (){} передаем данные в dataLayer и счетчики.

Опишу примеры использования.

Отслеживание клика

Базовая конструкция:


$('.clickElement').on('click', function (){
	dataLayer.push({
		'event':'GAevent',
		'eventCategory': 'GAeventCategory',
		'eventAction':   'GAeventAction'
	});
});

Если в момент инициализации скрипта элемента еще нет на странице, то используем:


$(document).on('click', '.clickElement', function() {
   dataLayer.push({
		'event':'GAevent',
		'eventCategory': 'GAeventCategory',
		'eventAction':   'GAeventAction'
	});
});

Для определения элементов на странице:


$(document).find('*').on('click', function(e){console.log(e)});

Отправка формы

Простая отправка формы


$('#submitElement').on('submit', function (){
	dataLayer.push({
		'event':'GAevent',
		'eventCategory': 'GAeventCategory',
		'eventAction':   'GAeventAction'
	});
});

Отправка формы с валидацией


$('#id_формы').on('submit', function() {
   	if ($(this).find('.errorClass').length) return;
   	dataLayer.push({
		'event':'GAevent',
		'eventCategory': 'GAeventCategory',
		'eventAction':   'GAeventAction'
	});
});

Заменить .errorClass на класс ошибки, которая возникает при валидации формы.

Отправка формы AJAX


// С точным соответствием
$( document ).ajaxSuccess(function( event, xhr, settings ){
 	if ( settings.url === "requestURL"){
    	dataLayer.push({
			'event':'GAevent',
			'eventCategory': 'GAeventCategory',
			'eventAction':   'GAeventAction'
		});
 	}
});

// Фильтр по "содержит"
$( document ).ajaxSuccess(function( event, xhr, settings ){
	if ( settings.url.indexOf("requestURL") > -1 ){
    	dataLayer.push({
			'event':'GAevent',
			'eventCategory': 'GAeventCategory',
			'eventAction':   'GAeventAction'
		});
 	}
});

Не всегда срабатывает. В объектах ищем к чему привязать отправку:


$(document).ajaxSuccess(function( event, xhr, settings ){
	console.log(xhr); 
});

Или так:


$(document).ajaxSuccess(function( event, xhr, settings ){
	console.log(settings);
});

Копирование


function getSelectionText() {
				var text = "";
				if (window.getSelection) {
					text = window.getSelection().toString();
				} else if (document.selection && document.selection.type != "Control") {
					text = document.selection.createRange().text;
				}
				return text;
			}
			document.addEventListener("copy", function ( e ){
				if (getSelectionText() === "#ваш_текст#")
					dataLayer.push({
						'event': 'GAevent',
						'eventCategory': 'GAeventCategory',
						'eventAction': 'GAeventAction'
					});
			});

Изменение полей формы


$('.changeElement').on('change', function (){
	dataLayer.push({
		'event':'GAevent',
		'eventCategory': 'GAeventCategory',
		'eventAction':   'GAeventAction'
		});
});

Какой элемент находится в поле видимости


var $window = $(window);
var gtmFlagFormaView = true;
var gtmFormaView;
var gtmTopHeight = $window.innerHeight();
var elemPosTop = $("#idElement").offset().top;
var doit;
$window.scroll(function(){
	gtmFormaView = $window.scrollTop()+gtmTopHeight;
 	if (gtmFormaView > elemPosTop && gtmFlagFormaView){
  		gtmFlagFormaView = false; 
  		dataLayer.push({
   			'event':         'GAevent',
   			'eventCategory': 'GAeventCategory',
   			'eventAction':   'GAeventAction'
 		});
	}
})

function resizedw(){
 	elemPosTop = $("#idElement").offset().top;
	gtmTopHeight = $window.innerHeight();
}

window.onresize = function(){
	clearTimeout(doit);
  	doit = setTimeout(resizedw, 300);
};

На каких полях возникают ошибки заполнения


$('.classForm').on('submit', function(){
  setTimeout(function(){
    if ($('#idInput1').hasClass('error1')){
      dataLayer.push({
        'event':'GAevent',
        'eventCategory':'GAeventCategory',
        'eventAction':'GAeventAction'
      });
    }
    if ($('#idInput2').hasClass('error2')){
      dataLayer.push({
        'event':'GAevent',
        'eventCategory':'GAeventCategory',
        'eventAction':'GAeventAction'
      });
    }
  }, 300);
});

Полезные ссылки

Официальная документация
Документация (ru)

Нет комментариев

, ,