Как расширить Google Analytics для отслеживания AJAX и т. д. (согласно документам H5BP)

Я пытаюсь установить google analytics augments, указанный в файле extend.md H5BP (https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/extend.md)

В нем говорится, что «оптимизированный» фрагмент JS Google Analytics включает следующий код:

var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];

и что дополнительные дополнения, такие как track jquery AJAX requests, track javascript errors и track page scroll, должны быть добавлены после определения _gaq.

На самом деле фрагмент, включенный в текущую версию H5BP, не ссылается на _gaq как на переменную:

        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
        function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
        e=o.createElement(i);r=o.getElementsByTagName(i)[0];
        e.src='//www.google-analytics.com/analytics.js';
        r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
        ga('create','UA-XXXXX-X');ga('send','pageview');

Это создает неопределенную ошибку при попытке использовать любое из расширений H5BP. Например.

if (typeof _gaq !== "undefined" && _gaq !== null) {
    $(document).ajaxSend(function(event, xhr, settings){
        _gaq.push(['_trackPageview', settings.url]);
    });
}

Не будет работать, так как _gaq не определен.

Как предполагается реализовать эти дополнения? Может ли кто-нибудь предоставить рабочий пример, показывающий полную реализацию всех расширений?

Спасибо


person alias51    schedule 09.01.2014    source источник
comment
Какую версию браузера вы используете, что вызывает эту ошибку?   -  person james emanon    schedule 12.01.2014
comment
Это не ошибка браузера. Это универсальная ошибка скрипта. (т.е. все браузеры затронуты одинаково).   -  person alias51    schedule 12.01.2014


Ответы (2)


Код, который вы пытаетесь добавить, не будет работать, так как _gaq был массивом, который использовался для передачи маяков отслеживания в старой версии Google Analytics (GA). Но HTML5 BoilerPlate (H5BP), в своей последней версии, которую вы, кажется, используете, обновился, чтобы использовать Universal Analytics (UA), следующую версию GA, выпущенную Google. Это видно из URL-адреса //www.google-analytics.com/analytics.js, относящегося к протоколу, а также из документов последней версии. К сожалению, похоже, что вы упомянули не обновлялся, так как ссылка на источник приведена на H5BP. оптимизированный код GA, сам был обновлен кодом для UA и что это то, что сейчас использует источник H5BP.

Следовательно, ваш дополнительный исходный код, расширяющий использование объекта _gaq, не будет работать, так как вы используете не ga.js, у которого есть функции для обработки данных, передаваемых в объект _gaq из GA, а analytics.js для UA, который не инициализирует такие объект как _gaq или иметь функции для обработки данных, переданных в _gaq.

Но перед обновлением для использования analytics.js (UA) у H5BP была версия GA сценария, например эта (я получил это благодаря другу, который раньше работал с H5BP):

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
        var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; //here the _gaq was initialised
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src='//www.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>

В идеале это должно заменить строки кода, которые вы упомянули, а именно

(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
    e=o.createElement(i);r=o.getElementsByTagName(i)[0];
    e.src='//www.google-analytics.com/analytics.js';
    r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
    ga('create','UA-XXXXX-X');ga('send','pageview');

Если вы это сделали, то использование вами кода

if (typeof _gaq !== "undefined" && _gaq !== null) {
$(document).ajaxSend(function(event, xhr, settings){
    _gaq.push(['_trackPageview', settings.url]);
});
}

и так далее при использовании _gaq будет работать.

Также помните, что код H5BP, который вы используете в настоящее время, является лучшим, поскольку Google постепенно отказывается от GA, чтобы сделать Universal Analytics будущим аналитики. Старый код, который я упомянул, больше не работает (или перестанет работать в ближайшем будущем, в зависимости от Google). Подробнее об этом читайте в Центре обновлений UA.

Имейте в виду, что текущий H5BP использует код UA (analytics.js), который представляет собой оптимизированную форму того, что предоставляет Google, как обнаружено здесь.

Это объясняет, почему скрипты, упомянутые в extend.md, не будут работать на H5BP, над которым вы, похоже, работаете, и есть возможный обходной путь путем реализации старого кода. Что вам нужно, так это способ отслеживать AJAX и т. д. с помощью сценария, который у вас есть. Для этого каждый раз, когда запрос AJAX завершается, вы можете просто записывать виртуальный просмотр страницы. Вы можете найти аналогичный сценарий здесь. Там спрашивающий применяет отслеживание открытия модального окна. Вы можете применить ту же технику для отслеживания вызовов AJAX и извлечения страницы или ее части. VURL, как я указал в ответе, в вашем случае может быть /virtual/ajax/url-of-page-retrieved-via-ajax.

Если вы не хотите отправлять виртуальные просмотры страниц, вы также можете отправлять настраиваемые события для каждого запроса AJAX. Подробнее об отслеживании событий в UA читайте здесь.

Если вы хотите узнать, что означают аргументы указанной вами функции, вы можете прочитать здесь. Вот откуда был взят сценарий в упомянутом вами файле extend.md. Попытка изменить сценарий для использования с UA, вероятно, будет выглядеть так:

(function ($) {
  // Log all jQuery AJAX requests to Google Analytics
  $(document).ajaxSend(function(event, xhr, settings){ 
    ga('send','pageview',settings.url.pathname);
  });
})(jQuery);

Метод ajaxSend() — это обратный вызов, который запускается каждый раз, когда завершается вызов jQuery AJAX. Запомните слово jQuery здесь. Это работает только для запросов jQuery AJAX. xhr обычно означает XMLHttpRequest. Я думаю, что предполагается, что кто-то знает, что такое вызов jQuery AJAX, я не очень хорошо разбираюсь в этом.

Для отслеживания ошибок Javascript с помощью UA аналогичный скрипт будет таким:

(function(window){
var undefined,
    link = function (href) {
        var a = window.document.createElement('a');
        a.href = href;
        return a;
    };
window.onerror = function (message, file, line, column) {
    var host = link(file).hostname;
    ga('send','event',
        (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
        message, file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : ''),
        {'nonInteraction': 1});
    };
}(window));

Это собирает аналогичным образом: Категория события будет host+error, Действие будет сообщением об ошибке, а метка будет указывать на то, где произошла ошибка (номер строки, имя файла и т. д.).

Отслеживание прокрутки страницы также очень похоже:

$(function(){
var isDuplicateScrollEvent,
    scrollTimeStart = new Date,
    $window = $(window),
    $document = $(document),
    scrollPercent;

$window.scroll(function() {
        scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
        if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
//If you want to track for page scroll for some other percentage of scroll, you
//can edit the number 90, or write additional conditional ga('send',...) calls
//inside this block and vary the label accordingly, specifying the percentage
//of scroll.
            isDuplicateScrollEvent = 1;
            ga('send','event','scroll',
            'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's',
            {'nonInteraction':1}
        );
        }
    });
});

Здесь категория события будет scroll, действие будет через окно, высоту, документ и время. Если вы хотите отслеживать прокрутку как интерактивное событие (что означает, что вы хотите, чтобы пользователь отслеживался как пользователь без отказов, если он прокручивается), вы можете удалить строку {'nonInteraction':1}

Надеюсь, это поможет! :)

person artfuldev    schedule 13.01.2014
comment
Спасибо, так как же мне отслеживать другие функции, упомянутые в H5BP, такие как ошибки javascript и прокрутка? - person alias51; 15.01.2014

У меня есть несколько вызовов ajax на моем сайте. С Google Analytics Universal я использую

$.ajax({
    ...
    success: function (data) {
        ga('send','pageview','/virtual/....');
    },
    ...
});

Использование /virtual/ упрощает фильтрацию, если я хочу разделить дату с вызовами ajax или без них.

person dr0zd    schedule 13.01.2014