Track Swipes With Google Analytics

I have a swipe functionality on my mobile page, and I want to used touchstart, touchend, and touchmove to track the swipe functionality across the device without affecting the scro

Solution 1:

If it's possible to only monitor the swipeleft and swiperight events in jQuery Mobile instead, do so.

Otherwise, you can set a global variable on the scroll event that resets after, say, 0.2 seconds. Then have the touchmove event check if that variable is set, and if it is, don't trigger Google Analytics.

window.is_scrolling = false; // global variablewindow.timeout_id = 0;

window.onscroll = function() {
    window.is_scrolling = true;
    clearTimeout(window.timeout_id);
    window.timeout_id = setTimeout(function() { 
        window.is_scrolling = false; 
    }, 200); // milliseconds
};

jQuery('.first-frame').bind('touchmove', function(event) {
    if (!window.is_scrolling) 
       _gaq.push(['_trackEvent', 'Landing-Page', 'Swipe-Toggle-Color', '0259_2190']);
});

Solution 2:

I know you asked for a touchmove, touchend, and touchstart example but I would use a combination of HammerJS (https://github.com/EightMedia/hammer.js/) and custom Google events to take the guess work out of it.

var element = $(".first-frame")[0];

var trackswipe = Hammer(element, {
  drag: false,
  transform: false,
  swipe: true,
  swipeVelocityX: 0// Adjust to liking...
}).on("swipe", function(event) {
  if (event.gesture.direction === "left") {
    // Track Somethingreturnfalse;
  } elseif (event.gesture.direction === "right") {
    // Track something else.returnfalse;
  }
  returnfalse;
});