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)