javascript 使用jQuery的GTM分析框架（事件委托，自定义事件）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript 使用jQuery的GTM分析框架（事件委托，自定义事件）相关的知识，希望对你有一定的参考价值。
jQuery(function() {
var _$window, _$body, _trackingMap;
_$window = $(window);
_$body = $(document.body);
_trackingMap = {
'click': {
'track_register': {
'trackFunction': function(e) {
analytics.pushData({
'category': 'FI_Register',
'action': 'Begin Registration',
'label': 'Hero Button Click'
});
}
},
'track_forgot_password': {
'trackFunction': function(e) {
analytics.pushData({
'category': 'FI_Login',
'action': 'Forgot Password',
'label': 'Forgot Password Click'
});
}
}
}
};
var analytics = {
/**
@function
@description
Initializes analytics with the specified GA account.
*/
'initialize': function() {
analytics.bindCustomEvents();
analytics.delegateEvents(_trackingMap);
},
/**
@function
@description
*/
'pushData': function(data) {
if (!data) {
return;
}
window.dataLayer.push(data);
},
/**
@function
@description
Use this function to bind tracking against any custom event
triggered on the document.body object.
*/
'bindCustomEvents': function() {
//Login Success
_$body.on('login:success', function(e, data) {
analytics.pushData({
'category': 'FI_Login',
'action': 'Logging In',
'label': 'Success'
});
});
//Login Error
_$body.on('login:error', function(e, data) {
analytics.pushData({
'category': 'FI_Login',
'action': 'Logging In',
'label': data.error
});
});
//Generic AJAX errors
_$body.on('ajax:error', function(e, xhr, status, error) {
var data;
data = jQuery.parseJSON(xhr.responseText);
if (data.error) {
analytics.pushData({
'category': 'FI_App',
'action': 'AJAX',
'label': data.error
});
}
});
//Contact modal open
$('#contact-us-modal').on('show', function(e) {
analytics.pushData({
'category': 'Contact Us',
'action': 'Clicked Footer Contact Us',
'label': 'Contact Us Modal Displayed'
});
})
//Generic Modal Open
$('.modal').on('show', function(e) {
var title;
title = $(e.currentTarget).find('.modal-header h3').text();
analytics.pushData({
'category': title,
'action': 'Opened Modal',
'label': title + ' Modal Displayed'
});
});
},
/**
@function
@description
Creates a delegated event listener on the <body>
and can listen to any type of event on any type of element.
The event handler is responsible for determining if the event
and element exist in a data dictionary (_trackingMap) and
invokes the respective function (usually Omniture tracking).
*/
'delegateEvents': function(map) {
var events = [];
for (var event in map) {
if (map.hasOwnProperty(event)) {
events.push(event);
}
}
_$body.on(events.join(' ').toString(), 'div, object, span, h4, p, a, form, input, li, img', function(e, altID) {
var event = (e.namespace) ? e.type + '.' + e.namespace : e.type,
link = e.currentTarget,
selector = altID || link.getAttribute('data-track') || link.id;
if (typeof map === 'undefined' || typeof map[event] === 'undefined' || typeof map[event][selector] === 'undefined') {
return;
}
var trackElem = map[event][selector];
if (trackElem) {
var fn = trackElem.trackFunction;
if (typeof fn === 'function') {
switch (selector) {
default: fn.apply(window, [e]);
break;
}
}
}
});
}
};
analytics.initialize();
});以上是关于javascript 使用jQuery的GTM分析框架（事件委托，自定义事件）的主要内容，如果未能解决你的问题，请参考以下文章
如何在 GTM 中使用 javascript 替换 dataLayer 中的参数名称