Как использовать Google Analytics с HTML 5 History?

Question

Я использую историю HTML 5 для своего сайта, поэтому для пользователей, чьи браузеры поддерживают ее, нажатие на ссылку перезагружает не всю страницу, а только основную область.

Google Analytics не отслеживает эти частичные загрузки страниц. Как я могу заставить его отслеживать это так же, как и для пользователей, у которых нет поддержки истории HTML 5?

Answer 1

Вам просто нужно зарегистрировать дополнительные просмотры страниц, снова вызывая функцию _trackPageview каждый раз, когда загружается ваш новый контент.Это называется «виртуальным просмотром страницы», но оно регистрируется в Google Analytics так же, как и реальное.Чтобы задать путь к странице, необходимо добавить в функцию дополнительный параметр:

        _gaq.push(['_setAccount', 'UA-XXXXXXX-X']);
        _gaq.push(['_trackPageview', '/new/content']);

Answer 2

Это для новейшего универсального кода отслеживания.

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

Чтобы отправить просмотр страницы программным путем, вы хотите отправить только путь и запрос, например.для http://example.com/path/to/resource?param=1 мы отправим /path/to/resource?param=1.

Некоторые SPA используют HashBangs (#!) для своих URL.Таким образом, мы должны отправить что-нибудь после Hashbang.Например, http://example.com#!path/to/resource мы отправим /path/to/resource?param=1.

Более ранняя версия моего решения была ошибочной и потерпела неудачу для всех URL, которые имели хэш в URL.Кроме того, поскольку я использовал плагин jQuery + History.js, мое решение было одновременно прослушивать statechange.

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

    var loc = window.location,
        hashbang = "#!",
        bangIndex = location.href.indexOf(hashbang),
        page = bangIndex != -1 ? loc.href.substring(bangIndex).replace(hashbang, "/") : loc.pathname + loc.search;

    ga('send', 'pageview', page);

Если вы не используете хэш-банг специально, просто измените hashbang = "#!", для соответствия, например, hashbang = "#@",

---

Вторая часть этого - обнаружение изменения URL.Для этого вам нужно узнать из документов какой библиотеки вы используете.

Для плагина jQuery + History.js приведенный ниже код работает

$(window).on('statechange', function() {
    //put code here
});

Более подробную информацию можно получитьнайдено в https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications

---

$(window).on('statechange', function() {
    var loc = window.location,
    page = loc.hash ? loc.hash.substring(1) : loc.pathname + loc.search;
    ga('send', 'pageview', page);
});

Answer 3

Как уже сказал Эван, вы должны отправить просмотр страницы в аналитику в событии window.popstate.Итак, в простом javascript, если вы позвонили:

history.pushState({'statedata':''}, 'title', '/new/page/url');

, вам просто нужно добавить:

window.addEventListener('popstate', function(event) {
    ga('send', 'pageview');
});

На самом деле новый универсальный код отслеживания автоматически получает текущий URL, поэтому вы недействительно нужно передать дополнительный параметр.