Migrate to Google Analytics 4 (GA4)

[chalin]

This is part of a CNCF-wide effort to upgrade project websites to GA4 since Google has deprecated Universal Analytics (UA). For more details, see:

• Migrate CNCF websites to GA4 cncf/techdocs#108, including reference to:
  • A suggested migration process,
    which we've used to migrate a few CNCF projects already.

Tasks (stages 1, 2 & 3):

• From the Prometheus websites data stream (G-80ZM8LGB96), configure cross-domain measurement to promcon.io.
• Configure GA4 ID through Netlify snippet injection, "Google Analytics 4 - only in production", just before </head>:

  {% if CONTEXT == 'production' %}
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-80ZM8LGB96"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
  
    gtag('config', 'G-80ZM8LGB96');
  </script>
  {% endif %}

• Confirm that the GA4 site tag is receiving events
• Confirm that the UA site tag, UA-58468480-3, is still receiving events

Notes

• Related: Migrate to Google Analytics 4 (GA4) prometheus/docs#2181
• For later: Remove Universal Analytics (UA) registration code #246
• Note: the UA tag can't be connected from the GA4 tag because it isn't using the gtag.js library, but even if it was, we'd want to avoid sending main-site events to the promcon UA tag and so it is easier to avoid connecting them than to setup filters (that would be useful only for a short period anyways, until UA is dropped by Google).

/cc @nate-double-u @caniszczyk @juliusv

---

Current website analytics info:

• UA site tag: UA-58468480-3

Hugo layout relevant for the main tag:

• website/layouts/default.html

  Lines 58 to 67 in 0cf826e

  	<!-- 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','//www.google-analytics.com/analytics.js','ga');
  	ga('create', 'UA-58468480-3', 'auto');
  	ga('send', 'pageview');
  	</script>

[chalin]

@juliusv - I've setup GA4 via Netlify snippet injection, while keeping the UA site tag as it is currently -- so no code changes were necessary.

All that will be left to do later is to drop the UA-specific code from the website (#246), once you've decided that you don't want to use that property anymore, or it stops receiving data (in 2023).

Closing the issue since all is done for now.

[juliusv]

Great, thanks!