Отслеживание событий трансляции с помощью Менеджера тегов Google

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"> контейнера.

Вот сценарий, я использую для создания swipeleftswiperight события:

(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/Tag Manager? Было бы неплохо подключиться к FlexSlider, встроенному в функции салфетки, но я бы не хотел изменять какой-либо код плагина.

Answer 1

Вы должны также включить параметр "событие" (скажем, "салфетки") для использования в GTM триггером:

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

Цитирование из этого: https://developers.google.com/tag-manager/devguide?hl=en

Диспетчер тегов Google предоставляет специальную переменную уровня данных, называемую событием , которое используется в JavaScript-прослушивателях событий для инициирования тега , когда пользователь взаимодействует с элементами веб-сайта, такими как кнопка.

Затем вы можете использовать событие 'swipe' для запуска ваших тегов.

Answer 2

Не уверен, что он по-прежнему представляет интерес, но в качестве альтернативы dataLayer (лучший вариант imho) вы можете создать триггер «History Change».

«Триггеры, основанные на событии« Изменение истории », будут вызывать тег при изменении фрагмента URL-адреса (хэша) или при использовании API-интерфейсов pushstate HTML5. Этот триггер полезен для запуска тегов, отслеживающих виртуальные просмотры страниц в приложении Ajax, например." https://support.google.com/tagmanager/answer/6106961?hl=en

trigger screenshot