Update Google Analytics JS code to GA4

Universal Analytics (UA) was replaced by GA4 last year.

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+ * Update Google Analytics JS code to GA4. (Matthew Bass)
+
  * Upgrade to Sinatra 3.1. (なつき)
 
  * Tilt renderers (e.g. for Markdown, Haml, or Textile) are now configurable.

templates/config/config.yml

@@ -44,7 +44,7 @@ content: content
 #     scroll down a bit to set it in production even if you're not deploying
 #     to your own server.
 #
-# google_analytics_code: "UA-???????-?"
+# google_analytics_code: "G-??????????"
 
 # read_more
 #     When the summary of an article is displayed on the home page, or
@@ -64,7 +64,7 @@ content: content
 
 # production:
 #   content: /var/apps/nesta/shared/content
-#   google_analytics_code: "UA-???????-?"
+#   google_analytics_code: "G-??????????"
 
 # The following settings control the behaviour of the `nesta build`
 # command, which is used to generate a "static" version of your site.

test/integration/default_theme_test.rb

@@ -33,7 +33,7 @@ def in_categories(*categories)
   end
 
   it 'includes Google Analytics JavaScript when configured' do
-    analytics_code = { 'google_analytics_code' => 'UA-1234' }
+    analytics_code = { 'google_analytics_code' => 'G-1234' }
     stub_config(temp_content.merge('test' => analytics_code)) do
       visit '/'
       assert_nil all('script').find { |s| s[:src].match /analytics\.js/ }

views/analytics.haml

@@ -1,11 +1,11 @@
 - if @google_analytics_code
   :plain
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=#{@google_analytics_code}"></script>
     <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');
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
 
-      ga('create', '#{@google_analytics_code}', 'auto');
-      ga('send', 'pageview');
+      gtag('config', '#{@google_analytics_code}');
     </script>