Как использовать аналитику google с историей HTML 5?

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

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

Ответ 1

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

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

Ответ 2

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

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

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

Некоторые SPA используют HashBangs (#!) для своих URL-адресов. Поэтому нам нужно отправить что-нибудь после Хашбанга. например 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);

Если вы не используете Hashbangs специально, просто измените 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);
});

Забастовкa >

Ответ 3

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

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

просто добавьте:

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

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