title: Tracking swipe events with Google Tag Manager
body: <p>I have a client who wishes to track swipe events (swipe left, swipe right) on a <a href="http://www.woothemes.com/flexslider/" rel="nofollow">FlexSlider</a> photo gallery. I am using a small script to detect swipe events, and it works quite well to send an <code>alert()</code> or <code>console.log()</code> for testing purposes. However, when I tried to instead push an event to Google Tag Manager it doesn't appear to be sent. </p>
  
  <p>Here is how I am attempting to track the events:</p>
  
  <pre><code>// 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'});
  });
  </code></pre>
  
  <p>Where <code>#photo_gallery</code> is the ID of the standard <code>&lt;div class="flexslider"&gt;</code> container.</p>
  
  <p>Here is the script I am using to create the <code>swipeleft</code> <code>swiperight</code> events:</p>
  
  <pre><code>(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) &gt;= $.detectSwipe.threshold) {
              dir = dx &gt; 0 ? 'left' : 'right'
          } else if(Math.abs(dy) &gt;= $.detectSwipe.threshold) {
              dir = dy &gt; 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 &amp;&amp; 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);
  </code></pre>
  
  <p><strong>Note: The above script works for console logs and alerts</strong></p>
  
  <p>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.</p>