Google Analytics 在哈希更改时设置页面视图

Question

我正在尝试获得一个主页，该主页在 Isotope

下有一堆内容

在 Google Analytics 中将每个哈希更改显示为综合浏览量。本来打算做事件的，结果真的应该是pageviews

所以我设置了修改后的 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" link 来访问它，则看不到。如果他们点击，我只会看到“/”

在同位素发射中，我的似乎不起作用：

//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');
    }

那是使用相同的语法，所以我假设如果我修复了一个语法，将语法复制到 hashchange 函数也将获得该记录。

Answer 1

要更改发送到 GA 的页面路径，您只需对代码稍作修改：

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

可在此处找到更多信息：https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced?hl=en#fieldObject

Answer 2

在发送pageview调用中发送page不推荐Google:

While technically the send command for pageview hits accepts an optional page field as the third parameter, passing the page field that way is not recommend when tracking single page applications. This is because fields passed via the send command are not set on the tracker—they apply to the current hit only. Not updating the tracker will cause problems if your application sends any non-pageview hits (e.g. events or social interactions), as those hits will be associated with whatever page value the tracker had when it was created.

使用：

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

Google Analytics guide on tracking Single Page Applications.

Answer 3

这是一个完整的代码示例，用于跟踪哈希综合浏览量和 google 分析的变化：

(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');
    })

Answer 4

当前 Google Analytics 配置加载 Google 跟踪代码管理器脚本并且正在使用 gtag 函数而不是 ga 所以对我来说，以前的解决方案会抛出错误，因为 'ga is not defined'。我所做的是修改初始 Google 分析配置脚本：

<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（and/or 内容）更改而不重新加载时发送内容更改 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

Google Analytics 在哈希更改时设置页面视图

Google Analytics Setting Up A PageView On Hash Change

javascript

jquery

google-analytics

pageviews

jquery-isotope