Отслеживаем ссылки в GA с jQuery

  • Содержание

По умолчанию, Google Analitycs не показывает, на какую страницу пользователь ушел с сайта или какой файл скачал. Конечно, о скачанных файлах можно узнать из серверной статистики, но это не так удобно.

Google Analitycs предлагает добавить ссылке событие onClick следующим образом:

<a href="http://www.example.com" onClick="javascript: pageTracker._trackPageview('/G1/example.com');">

Это старый и неудобный способ. С развитием JavaScript фреймворков гораздо удобнее добавить обработчик события глобально на все ссылки страницы. Используем jQuery:

$(document).ready(function(){
	$("a[href^='http://']").click(function(){
		pageTracker._trackEvent("links", "external", $(this).attr("href"), 0);
	});
});

Здесь используется событие pageTracker._trackEvent() с параметрами:

  • Category – группа объектов, которую вы хотите отслеживать.
  • Action – тип взаимодействия с объектом, однозначно связан с объектом.
  • Label – дополнительный параметр события.
  • Value – числовое значение, связанное с событием.

Последние два параметра являются необязательными.
Приведенный выше пример простой, но накладывает ограничения:

  • Внутренние ссылки тоже могут начинаться с http://.
  • Невозможно определить, переходим на файл или страницу.

Эти недостатки исправлены в следующем плагине LinkTracker:

(function($){
    $(document).ready(function(){
        jQuery('a').linkTracker({
            inDomain : true,
            fileTypes : [ 'pdf', 'zip', 'tgz', 'gz', 'gzip', 'rar']
        });
    });
})(jQuery);

Опции

  • inDomain определяет, отслеживать ли ссылки внутри поддоменов. Установив в true, для example.com и subdomain1.example.com ссылки на subdomain2.example.com не будут считаться внешними.
  • fileTypes - список расширений файлов
  • event - событие, к которому привязывается обработчик (click, mousedown, mouseup)

Исходный код

$.fn.linkTracker = function(opts) {
        var defaults = {
            inDomain : true,
            event : 'mouseup',
            fileTypes : [ 'pdf', 'zip', 'rar', 'tgz', 'gz', 'gzip', 'jpg', 'png', 'svg', 'gif', 'doc', 'eps', 'xls', 'ppt', 'xls', 'txt', 'vsd', 'js', 'css', 'exe', 'wma', 'mov', 'avi', 'wmv', 'mp3']
        };

        var options = $.extend(defaults, opts);

        return this.each(function() {

            var track = function(){

                var $link = $(this),
                category = $link.data('ga_category'),
                action = $link.data('ga_action');

                if (!category || !action) return;

                if (typeof(pageTracker) == 'object') pageTracker._trackEvent(category, action, $link.attr('href'));
                else if(typeof(_gaq) == 'object') _gaq.push(['_trackEvent', category, action, $link.attr('href')])
                else throw('Google Analytics tracking object not found'); // if you need to throw errors;

            }

            $(this).each(function(){

                var $a = $(this),
                href = $a.attr('href');

                // if no href or it starts with #
                if (!href || /^#/.test(href)) return;

                // if it is mailto link
                if (/^mailto:/.test(href)) {
                    $a.data('ga_category', 'links');
                    $a.data('ga_action', 'mailto');
                }
                // otherwise
                else {
                    var wHost = options.inDomain ? location.host.match(/\w+\.\w+$/) : location.host,
                    file_type = $.inArray(href.substring(href.lastIndexOf('.')+1).toLowerCase(), options.fileTypes);
                    // if is not downloadable file
                    if (file_type == -1){
                        var aHost = this.hostname;
                        // if is relative url
                        if (!aHost || aHost == '..') return;

                        // if is internal absolute url
                        if (options.inDomain){
                            if(aHost.indexOf(wHost) != -1) return;
                        }
                        else {
                            if(aHost == wHost) return;
                        }
                        $a.data('ga_category', 'links');
                        $a.data('ga_action', 'outgoing');
                    }
                    // if is file
                    else {
                        $a.data('ga_category', 'downloads');
                        $a.data('ga_action', options.fileTypes[file_type]);
                    }
                }
                /* $a.html($a.html() + ' (+trackevent)'); */ // for debugging..
                $a.bind(options.event, track);
                /* $a.trigger(options.event); */ // for debugging..

            });

        });

    };

Статистика

В результате после обновления статистики в разделе Содержание -> Отслеживание событий -> Обзор вы увидите необходимую информацию. В скрипте я использовал следующие пары Category и Action:

                                                                                 
CategoryAction
Почтовые адресаlinksmailto
Внешние ссылкиoutgoing
ФайлыdownloadsРасширение загружаемого файла

Label всегда ссылка, Value не используется.
Также можно отслеживать через trackPageview, в этом случае статистика будет смешана с просмотренными внутренними страницами сайта.

Пример
Скачать с github

Понравилась статья? Подпишись на RSS.

Советую почитать:

Отслеживаем ссылки в GA с Mootools
Скрытые возможности jQuery (часть 2)
Скрытые возможности jQuery
Подключаем GAPI к CodeIgniter
Google Analytics на вашем сайте

Теги: google analytics как добавить эвент

Скрытые возможности jQuery (часть 2) Отслеживаем ссылки в GA с Mootools

Комментарии

Здесь пока никто не писал.