Question

我的客户希望在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">容器的ID。

以下是我用来创建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);

注意：上述脚本适用于控制台日志和警报

有没有人有跟踪Google Analytics /跟踪代码管理器中的滑动事件的经验？最好使用内置滑动功能的FlexSlider，但我不想修改任何插件代码。

Answer 1

你还应该包括一个＆＃34;事件＆＃34;要在GTM触发器中使用的参数（例如，＆＃34;滑动＆＃34;）：

dataLayer.push({
   'event': 'swipe',
   // your other parameters
})

引用此词：https://developers.google.com/tag-manager/devguide?hl=en

Google跟踪代码管理器提供了一个名为的特殊数据层变量在JavaScript事件侦听器中用于启动标记的事件当用户与网站元素（如按钮）交互时触发。

然后您可以使用＆＃39;轻扫＆＃39;触发标记的事件。

Answer 2

不确定它是否仍有意义，但作为dataLayer（最佳选项imho）的替代方案，您可以创建一个＆＃34;历史变更＆＃34;触发。

＆＃34;基于History Change事件的触发器将在URL片段（哈希）更改或站点使用HTML5 pushstate API时触发标记。例如，此触发器可用于触发跟踪Ajax应用程序中的虚拟网页浏览的标签。＆＃34; https://support.google.com/tagmanager/answer/6106961?hl=en

trigger screenshot

使用Google跟踪代码管理器跟踪滑动事件

2 个答案: