Google Analytics Setting Up A PageView On Hash Change

Question

I'm trying to get a home page that has a bunch of content under Isotope

to show each hash change as a pageview in Google Analytics. Originally, I was going to do this as events, but it really should be pageviews.

So I setup the modified 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});

In Google Analytics, I see the hash tag now if someone goes to a specific URL — example: http://www.example.com/#pet-health If they reload the page, I see that hash in GA, but not if they click on an Isotope "nav" link to get to it. If they click, I'm just seeing "/"

In the Isotope firing, what I have doesn't seem to be working:

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

I thought that this line in the click function would do the trick:

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

Is my syntax incorrect or missing something?

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

That's using the same syntax, so I'm assuming if I fix one, copying the syntax to the hashchange function will get that recording as well.

Answer 1

To change the page path that gets sent to GA, you would to just make a slight modification to your code:

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

More information can be found here: https://developers.google.com/analytics/devguides/collection/analyticsjs/advanced?hl=en#fieldObject