如何使用 Barba.js 实现谷歌分析

Question

I am trying to set up google analytics and Barba.js. I have this analytics code in the footer; see below. I am exporting the code with 'import { analytics } from "./analytics";'using this code below.

I am thenusing 'barba.hooks.enter'. I can see each page in the console log as I click through each click, but google analytics is not recording the page links. Could some please point out what the issue is with the code?

Thank you

<!-- Google Analytics -->
<script>
(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-xxxxxxxxx-xxx', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

importing 'import { analytics } from "./analytics";' in app.js. I am using Webpack!

const analytics = (container) => {

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

        var path = (window.location.href).replace(window.location.origin, '').toLowerCase();
    
        window.dataLayer = window.dataLayer || [];
        function gtag() { dataLayer.push(arguments); }

        gtag('js', new Date());
        gtag('config', 'UA-xxxxxxxxx-xxx', {'page_path': path}); 

        console.log('view sent', path);
}

export default analytics

in app.js

barba.hooks.enter((data) => {
    analytics();
  });

Answer 1

You are mixing code of analytics.js library and gtag.js library.

If you want to use analytics.js you have to use your first code. And you can send custom page in this way:

<!-- Google Analytics -->
<script>
(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-xxxxxxxxx-xxx', 'auto');
ga('set', 'page', '/about.html');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

https://developers.google.com/analytics/devguides/collection/analyticsjs/command-queue-reference

Otherwise the gtag.js code, for Universal Analytics, is the following:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-XX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXXX-XX', {'page_path': '/about.html'});
</script>