Отслеживание просмотров изображений в Fancybox (лайтбокс jQuery) с помощью Google Analytics

Question

Я работаю над этим сайтом: http://www.vomero.co.uk/Torquay.aspx и хотел бы отслеживать просмотры изображений (которые открываются в галерее Fancybox).

Я знаю, что могу добавить событие onClick к каждомуизображение, но поскольку галерея позволяет пользователю просматривать все изображения с помощью значков «Следующая / Предыдущая», маловероятно, что пользователи будут нажимать на каждую фотографию.

Есть идеи?

Спасибо, Мэтт

Answer 1

Я думаю, что нашел хорошее решение для этого.Если вы добавляете только ключ 'onComplete' к объекту fancybox (), передавая значение ваших пользовательских действий Google Analytics, - он будет записывать пользовательское действие каждый раз, когда содержимое fancybox полностью загружено ...

Если вы добавитеэто на ваш fancybox, он автоматически записывает My-Action в My-Category с заголовком ссылки, используемым в качестве метки:

'onComplete':function(){_gaq.push(['_trackEvent','My-Category','My-Action', this.title]);}

Пример вызова fancybox:

jQuery(document).ready(function(){
    jQuery('a[rel=screenshots]').fancybox({
        'type':'image',
        'transitionIn':'fade',
        'transitionOut':'fade',
        'onComplete':function(){_gaq.push(['_trackEvent','ComicBox','Screenshots', this.title]);}
    });
});

, вызванный изпример ссылки:

<a href="screenshots/screenshot_2.png" rel="screenshots" title="Screenshot 2" target="_blank">Screenshot 2</a>

Приведенная выше ссылка откроет изображение в fancybox, когда изображение будет полностью загружено, оно активирует аналитику Google, которая запишет новое действие в разделе «Снимки экрана» с пометкой «Снимок экрана 2».- все это в категории пользовательских событий под названием «ComicBox»

надеюсь, это поможет .. если нет - проверьте мой живой код на http://www.hauntly.com/

Answer 2

Требуется API отслеживания событий Google Analytics .

Это позволяет вставлять в код JavaScript вашей веб-страницы события, зарегистрированные в Google Analytics.Примерно так:

<a href="#" onClick="_gaq.push(['_trackEvent', 'Images', 'View', 'Specific Image Name']);">Play</a>

или более реалистично, что-то вроде этого:

function openLightbox(id) {
  // your code to open the lightbox here
  _gaq.push(['_trackEvent', 'Images', 'View', 'Specific Image Name']);
}
<a href="#" onClick="openLightbox(7);">Play</a>

Небольшое упоминание Firebug показывает, что стрелки Fancybox влево и вправо являются якорными тегами, например:

<a id="fancybox-right">
  <span id="fancybox-right-ico" class="fancy-ico"></span>
</a>

Таким образом, вы можете перехватить событие щелчка следующим образом:

$("#fancybox-right").click(function(){ alert("hi"); });

jQuery добавляет этот обработчик щелчка в коллекцию обработчиков щелчков, которые будут срабатывать при нажатии кнопки.Поэтому исходное поведение кнопки будет сохранено.

В этом случае было бы более полезно подняться к брату "# fancybox-inner" и получить URL-адрес изображения.

$("#fancybox-right").click(function() {
  alert( $("#fancybox-inner > img").attr("src") );
});

Или нажать API событий Google Analytics

$("#fancybox-right").click(function() {
  var image_url = $("#fancybox-inner > img").attr("src");
  _gaq.push(['_trackEvent', 'Images', 'Click Right', image_url]);
});
$("#fancybox-left").click(function() {
  var image_url = $("#fancybox-inner > img").attr("src");
  _gaq.push(['_trackEvent', 'Images', 'Click Left', image_url]);
});