跟踪滑动事件与谷歌标签管理器
Tracking swipe events with Google Tag Manager
我有一个客户,他希望在FlexSlider图片库上跟踪滑动事件(向左滑动,向右滑动)。我使用一个小脚本来检测滑动事件,它可以很好地发送alert()
或console.log()
用于测试目的。然而,当我试图将事件推送到Google标签管理器时,它似乎没有被发送。
下面是我试图跟踪事件的方法:
// Previous Photo
jQuery('#photo_gallery').on('swiperight', 'img', function() {
dataLayer.push({'category': 'photo-gallery', 'action' : 'photo-gallery-previous', 'label' : 'previous'});
});
// Next Photo
jQuery('#photo_gallery').on('swipeleft', 'img', function() {
dataLayer.push({'category': 'photo-gallery', 'action' : 'photo-gallery-next', 'label' : 'next'});
});
其中#photo_gallery
为<div class="flexslider">
标准容器编号。
下面是我用来创建swipeleft
swiperight
事件的脚本:
(function($) {
$.detectSwipe = {
enabled: 'ontouchstart' in document.documentElement,
preventDefault: true,
threshold: 20
};
var startX,
startY,
isMoving = false;
function onTouchEnd() {
this.removeEventListener('touchmove', onTouchMove);
this.removeEventListener('touchend', onTouchEnd);
isMoving = false;
}
function onTouchMove(e) {
if ($.detectSwipe.preventDefault) { e.preventDefault(); }
if(isMoving) {
var x = e.touches[0].pageX;
var y = e.touches[0].pageY;
var dx = startX - x;
var dy = startY - y;
var dir;
if(Math.abs(dx) >= $.detectSwipe.threshold) {
dir = dx > 0 ? 'left' : 'right'
} else if(Math.abs(dy) >= $.detectSwipe.threshold) {
dir = dy > 0 ? 'down' : 'up'
}
if(dir) {
onTouchEnd.call(this);
$(this).trigger('swipe', dir).trigger('swipe' + dir);
}
}
}
function onTouchStart(e) {
if (e.touches.length == 1) {
startX = e.touches[0].pageX;
startY = e.touches[0].pageY;
isMoving = true;
this.addEventListener('touchmove', onTouchMove, false);
this.addEventListener('touchend', onTouchEnd, false);
}
}
function setup() {
this.addEventListener && this.addEventListener('touchstart', onTouchStart, false);
}
function teardown() {
this.removeEventListener('touchstart', onTouchStart);
}
$.event.special.swipe = { setup: setup };
$.each(['left', 'up', 'down', 'right'], function () {
$.event.special['swipe' + this] = { setup: function(){
$(this).on('swipe', $.noop);
} };
});
})(jQuery);
注意:上面的脚本适用于控制台日志和警报
有没有人有任何经验跟踪滑动事件在谷歌分析/标签管理器?使用FlexSlider内置的滑动功能会很好,但我不想修改任何插件代码。
您还应该包含一个"event"参数(例如,"swipe")以在您的GTM触发器中使用:
dataLayer.push({
'event': 'swipe',
// your other parameters
})
引用自:https://developers.google.com/tag-manager/devguide?hl=en
Google Tag Manager提供了一个特殊的数据层变量an事件,在JavaScript事件侦听器中用于初始化标记当用户与网站元素(如按钮)交互时触发。
你可以使用'swipe'事件来触发你的标签。
不确定它是否仍然感兴趣,但作为dataLayer的替代(最佳选择),您可以创建"历史更改"触发器。
"基于History Change事件的触发器将在URL片段(哈希)发生变化或网站使用HTML5推送状态api时触发一个标签。例如,这个触发器对于在Ajax应用程序中触发跟踪虚拟页面浏览量的标签很有用。https://support.google.com/tagmanager/answer/6106961?hl=en
触发截图
- 根据单个用户的决定禁用谷歌标签管理器(选择退出)
- jquery在通过谷歌标签管理器交付时点击不工作
- 谷歌标签管理器点击事件没有冒泡到家长
- 谷歌标签管理器,事件推送到数据层
- 从谷歌标签管理器提取标签
- 我使用谷歌标签管理器在我的网站上启动标签.变量“;未定义的“;在任何版本的Internet Explorer的自定义代码
- 如果JavaScript标签是通过谷歌标签管理器插入到页面上的,那么它们的延迟程度是多少;s的自定义HTML
- '无法字符串化dataLayer'当使用谷歌标签管理器'点击监听器'在angular j
- 谷歌标签管理器添加&instrad of just&转换为脚本src
- 表单放弃数据谷歌标签管理器
- 使用谷歌标签管理器跟踪事件
- Youtube iFrame嵌入式视频跟踪-谷歌标签管理器
- 正在分析电子商务数据以推送到谷歌标签管理器的数据层
- 不同域上IFrame中的谷歌标签管理器
- Facebook转换像素和谷歌标签管理器
- ng if和谷歌标签管理器脚本
- 转到谷歌标签管理器破坏了我们的虚拟页面浏览量
- 如何在Cordova实现谷歌标签管理器
- 谷歌标签管理器中的谷歌分析事件跟踪
- 谷歌标签管理器,谷歌分析使单独的事件基于Javascript变量点击