Update Google Analytics Code

[ahwm]

Google has upgraded Google Analytics and is recommending using gtag.js instead of analytics.js (and sending emails to anyone using analytics.js on their sites).

Instead of

      <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','//www.google-analytics.com/analytics.js','ga');
        ga('create', '{Property ID}', 'auto');
        ga('send', 'pageview');
      </script>

Google is now using this:

<script async src="https://www.googletagmanager.com/gtag/js?id={Property ID}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '{Property ID}');
</script>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[brianary]

Google is sunsetting Universal Analytics on July 1, 2023: [GA4] Make the switch to Google Analytics 4 - Analytics Help

[ahwm]

The code above is valid for GA4 so would be future-proof. If this isn't updated in the template then it will be required by the dev to override the template to add their own, which sort of defeats the purpose of the template.

[shivioua]

Seems that for now this is the officially supported way if one would like to have Google Analytics version 4 (GA4) for theme slate: https://github.com/shivioua/slate#customizing-google-analytics-code

With a bit inspiration from here: https://github.com/pages-themes/minimal/issues/88#issuecomment-784116273

[shivioua]

Yup, it worked for my GH Page, this is the custom header templated that I've added. https://github.com/shivioua/shivioua.github.io/commit/24e954555a844f8f248fe50c4bb8e1160869ef68

Hope it will save a bit of time for more people out there. Have fun :)

[shivioua]

I'm not an jekyll expert, but in additon to above comment I've created this PR: https://github.com/pages-themes/slate/pull/82

I assume that similar PRs should be created for all officially supported github pages themes before this one will be merged in.

[brianary]

@shivioua Works great! Thanks!

[brianary]

@shivioua While adding the new client code to _includes/head-custom-google-analytics.html works, Google's process for migrating the account, and setting up the "properties" and "flows" for the new Analytics is entirely incomprehensible to me. Rather than spending an absurd amount of time to learn a wildly overbuilt system (that may or may not act ethically with my users' data) for my extremely modest needs, I've used that same file to integrate with GoatCounter.com, which is simple and works just great for my needs.

[shivioua]

Thanks for sharing @brianary. I've put a brief look both on the GH project of Goat Counter and your implementation, looks like worth investigating. My needs are couple levels less sophisticated as what's offered by GA. Will definately give it a try at some point.

@ahwm Looks like this thread can be closed or you'd like to wait for the result of https://github.com/pages-themes/slate/pull/82? @brianary Would you consider creating a PR for supporting GoatCounter in slate theme?