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

Question

I have a client who wishes to track swipe events (swipe left, swipe right) on a FlexSlider photo gallery. I am using a small script to detect swipe events, and it works quite well to send an alert() or console.log() for testing purposes. However, when I tried to instead push an event to Google Tag Manager it doesn't appear to be sent.

Here is how I am attempting to track the events:

// 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'});
});

Where #photo_gallery is the ID of the standard <div class="flexslider"> container.

Here is the script I am using to create the swipeleft swiperight events:

(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);

Note: The above script works for console logs and alerts

Does anyone have any experience tracking swipe events in Google Analytics/Tag Manager? It would be nice to tap into the FlexSlider built in swipe functionality, but I wouldn't want to modify any of the plugin code.

Answer 1

You should also include an "event" parameter (of, say, "swipe") to use in your GTM trigger:

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

Quoting from this: https://developers.google.com/tag-manager/devguide?hl=en

Google Tag Manager provides a special data layer variable called an event that is used within JavaScript event listeners to initiate tag firing when a user interacts with website elements such as a button.

You could then use the 'swipe' event to fire your tags.

Answer 2

Not sure if it is still of interest, but as an alternative to dataLayer (best option imho) you may create a "History Change" Trigger.

"Triggers based on the History Change event will fire a tag when the URL fragment (hash) changes or when a site is using the HTML5 pushstate APIs. This trigger is useful to fire tags tracking virtual pageview in an Ajax application, for instance." https://support.google.com/tagmanager/answer/6106961?hl=en

trigger screenshot