Update Google Analytics Code

Update Google Analytics Code for Version 4

Author: mzagaja

_includes/footer.html

@@ -29,28 +29,3 @@ <h3>Connect</h3>
     </div>
   </div>
 </footer>
-
-<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-74039819-1', 'auto');
-  ga('send', 'pageview');
-</script>

_includes/head.html

@@ -36,5 +36,30 @@
     src="https://www.facebook.com/tr?id=968280476930527&ev=PageView&noscript=1"
   /></noscript>
   <!-- End Facebook Pixel Code -->
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-74039819-1"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-74039819-1');
+  </script>
+  <script>
+    /**
+    * Function that registers a click on an outbound link in Analytics.
+    * This function takes a valid URL string as an argument, and uses that URL string
+    * as the event label. Setting the transport method to 'beacon' lets the hit be sent
+    * using 'navigator.sendBeacon' in browser that support it.
+    */
+    var getOutboundLink = function(url) {
+      gtag('event', 'click', {
+        'event_category': 'outbound',
+        'event_label': url,
+        'transport_type': 'beacon',
+        'event_callback': function(){document.location = url;}
+      });
+    }
+  </script>
 
 </head>

index.html

@@ -4,13 +4,13 @@
 
 <div class="centered">
   <h1>Code for Boston</h1>
-  <h3>
+  <h2>
     A
     <a href="https://www.codeforamerica.org/" target="_blank"
       >Code for America</a
     >
     brigade and grassroots organization.
-  </h3>
+  </h2>
 
    <p>
     Code for Boston addresses local social and civic challenges through creative
@@ -35,8 +35,11 @@ <h3>
     <a
       href="{{ site.slack_url }}"
       class="btn-secondary"
+      onclick="getOutboundLink('https://communityinviter.com/apps/cfb-public/default-badge'); return false;"
       >Say hi on Slack</a>
-    <a href="" class="btn-secondary">Weekly E-Mail Newsletter</a>
+    <a href="http://eepurl.com/5UcLX"
+      onclick="getOutboundLink('http://eepurl.com/5UcLX'); return false;"
+      class="btn-secondary">Weekly E-Mail Newsletter</a>
   </div>
 
   <div>
@@ -49,11 +52,14 @@ <h3>
     </p>
     <div class="btn-group">
         <a href="https://codeforamerica.zoom.us/meeting/register/tJIud-Corj0sGNaJai1FmkyfRMek27MzEC_X"
+          onclick="getOutboundLink('https://codeforamerica.zoom.us/meeting/register/tJIud-Corj0sGNaJai1FmkyfRMek27MzEC_X'); return false;"
           class="btn-secondary">RSVP on Zoom</a>
         <a href="https://communityinviter.com/apps/bostoncivictechcoffee/civic-tech-coffee"
+          onclick="getOutboundLink('https://communityinviter.com/apps/bostoncivictechcoffee/civic-tech-coffee'); return false;"
           class="btn-secondary"
           >Say hi on Slack</a>
         <a href="http://eepurl.com/g3AxjX"
+          onclick="getOutboundLink('http://eepurl.com/g3AxjX'); return false;"
           class="btn-secondary"
         >
           Monthly E-Mail Reminders