Google Analytics Настройка просмотра страницы при изменении хэша

Я пытаюсь создать домашнюю страницу с большим количеством контента в разделе Isotope.

чтобы отображать каждое изменение хэша как просмотр страницы в Google Analytics. Изначально я собирался сделать это как события, но на самом деле это должны быть просмотры страниц.

Итак, я настроил модифицированный GA:

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-X', {'allowAnchor': true});
ga('send', 'pageview', { 'page': location.pathname + location.search + location.hash});

В Google Analytics теперь я вижу хэш-тег, если кто-то переходит к конкретному примеру URL: http://www.example.com/#pet-health Если они перезагрузят страницу, я увижу этот хэш в GA, но не если они нажмут на ссылку «nav» Isotope, чтобы перейти к нему. Если они щелкнут, я просто увижу "/"

При обжиге изотопов то, что у меня есть, похоже, не работает:

//Sets up filtering on click of Isotope navigational elements 
    $('#isotopeFilters a, .subnav a, #isotopeContainer .isotopeNav a, .page-template-page-home-php #logo').click(function(){
        var selector = $(this).attr('data-filter');
        var prettyselector = selector.substr(1);
        ga('send', 'pageview', location.pathname+location.search+location.hash);

        location.hash = prettyselector;

        $('#isotopeFilters a, .subnav a').removeClass('active');
        $('a[class="' + prettyselector + '"]').addClass('active');

        $container.isotope({ 
            filter: selector,
            itemSelector: '.item',
            masonry: {
                columnWidth: 270
            },
            animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
        }
      });
      return false;
    });

Я думал, что эта строка в функции щелчка поможет:

ga('send', 'pageview', location.pathname+location.search+location.hash);

Мой синтаксис неверен или чего-то не хватает?

//Fires Isotope functionality when hash/URL changes
    $(window).hashchange( function(){
        if(location.hash!=''){
            var hashfilter = '.' + location.hash.substr(1);
        }else{
            var hashfilter = '.home';
        }

        $container.isotope({
            filter: hashfilter,
            itemSelector: '.item',
            masonry: {
                columnWidth: 270
            },
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false,
           }
        });
        isotopeSubNav();
    });

    if(location.hash!=''){
        var hashfilter = '.' + location.hash.substr(1);
        ga('send', 'pageview', location.pathname+location.search+location.hash);
        $(hashfilter).addClass('active');
    }

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


person Keefer    schedule 03.09.2015    source источник


Ответы (4)


Чтобы изменить путь к странице, который отправляется в GA, вам нужно просто внести небольшие изменения в свой код:

ga('send', 'pageview', {'page': location.pathname+location.search+location.hash});

Дополнительную информацию можно найти здесь: https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced?hl=en#fieldObject

person nyuen    schedule 03.09.2015
comment
Спасибо, это работает, но подумайте об обновлении кода, так как в нем отсутствует закрывающая фигурная скобка }, что приводит к синтаксической ошибке. Это должно выглядеть так: ga('send', 'pageview', {'page': location.pathname + location.search + location.hash}); - person pkk; 06.01.2016
comment
Спасибо, исправил ошибку! - person nyuen; 06.01.2016

Отправка page при отправке pageview звонка не рекомендуется Google:

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

Использовать:

ga('set', 'page', location.pathname+location.search+location.hash);
ga('send', 'pageview');

Руководство Google Analytics по отслеживанию одностраничных приложений.

person Daniel Kmak    schedule 04.08.2016

Вот полный пример кода для отслеживания просмотров хеш-страниц и изменений в Google Analytics:

(function (i, s, o, g, r, a, m) {
        i['GoogleAnalyticsObject'] = r;
        i[r] = i[r] || function () {
            (i[r].q = i[r].q || []).push(arguments)
        }, i[r].l = 1 * new Date();
        a = s.createElement(o),
            m = s.getElementsByTagName(o)[0];
        a.async = 1;
        a.src = g;
        m.parentNode.insertBefore(a, m)
    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

    ga('create', 'UA-XXXXXXXX-X', 'auto');
    ga('set', 'page', location.pathname+location.search+location.hash);
    ga('send', 'pageview');
    window.addEventListener("hashchange", function (event) {
        ga('set', 'page', location.pathname + location.search + location.hash);
        ga('send', 'pageview');
    })
person ykay says Reinstate Monica    schedule 24.05.2018

В настоящее время конфигурация Google Analytics загружает скрипт Диспетчера тегов Google и использует функцию gtag, а не ga, поэтому для меня предыдущий решения выдает ошибки, потому что 'ga не определен'. Что я делаю, так это модификацию исходного сценария конфигурации Google Analytics с помощью:

<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR-GA-ID"></script>
<script>
     window.dataLayer = window.dataLayer || [];
     function gtag() {
         dataLayer.push(arguments);
     }
     gtag('js', new Date());
     gtag('config', 'YOUR-GA-ID', {
         'page_path': location.pathname + location.hash
     });
 </script>

Чтобы отправлять изменения содержимого, когда страница не перезагружается или URL-адрес (и/или содержимое) изменяется без перезагрузки javascript, вы должны включить где-нибудь в свои сценарии этот код:

window.addEventListener("hashchange", function (event) {
       gtag('event', 'pageview', {
         'page_path': location.pathname+location.search+location.hash
       });
});

Вы можете взглянуть на https://developers.google.com/analytics/devguides/collection/gtagjs/sending-data

И на https://developers.google.com/gtagjs/reference/event.

person jlbofh    schedule 23.01.2019
comment
Я использовал ваш код с gtag. В GA в реальном времени я вижу URL-адреса с хэшем, но в разделе «Поведение-›Контент сайта» я вижу только один URL-адрес: / без хэша. Как исправить, чтобы страницы с хэшем отображались в Поведение-›Контент сайта? - person pelcomppl; 28.01.2019
comment
Я вижу URL-адреса хэштегов в разделе «Поведение» -> «Контент сайта»… у меня нет этой проблемы - person jlbofh; 05.02.2019