chore: Update to Google Analytics 4 (PT-184463878)

PT Story: https://www.pivotaltracker.com/story/show/184463878 These changes update lab to use the latest version of Google Analytics. The previous version will no longer work after June 30.
concord-consortium · Jun 2, 2023 · 419537e · 419537e
1 parent 1783c0f
commit 419537e
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 28 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -1,6 +1,6 @@
 {
   "esversion": 6,
-  "predef": ["$", "d3", "describe", "it", "beforeAll", "beforeEach", "afterEach", "sinon", "should", "expect", "_gaq"],
+  "predef": ["$", "d3", "describe", "it", "beforeAll", "beforeEach", "afterEach", "sinon", "should", "expect", "gtag"],
   "browser" : true,
   "eqnull": true,
   "boss" : false,

diff --git a/developer-doc/configuration.md b/developer-doc/configuration.md
@@ -60,7 +60,7 @@ Interactive **About** box.
 
 ### Runtime Google Analytics
 
-If the global `_gaq` is defined, then Lab will send some events to Google Analytics. This is done
+If the global `gtag` is defined, then Lab will send some events to Google Analytics. This is done
 through trackEvent method in `src/lab/common/controllers/scripting-api.js`. So if you want this to happen then the
 page embedding `lab.js` or `lab.min.js` should include the standard Google Analytics script setting things up.
 

diff --git a/src/embeddable.html b/src/embeddable.html
@@ -18,15 +18,14 @@
     <% } %>
 
     <% if (htmlWebpackPlugin.options.gaAccountId) { %>
-    <script type="text/javascript">
-      var _gaq = _gaq || [];
-      _gaq.push(['_setAccount', '<%= htmlWebpackPlugin.options.gaAccountId %>']);
-      _gaq.push(['_setAllowAnchor', true]);
-      (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-      })();
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=<%= htmlWebpackPlugin.options.gaAccountId %>"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', '<%= htmlWebpackPlugin.options.gaAccountId %>');
     </script>
     <% } %>
 

diff --git a/src/embeddable.js b/src/embeddable.js
@@ -1,4 +1,4 @@
-/*global Lab, $, _gaq, Embeddable: true, AUTHORING: true */
+/*global Lab, $, gtag, Embeddable: true, AUTHORING: true */
 /*jshint boss:true */
 
 // Strawman setting for telling the interactive to be in "author mode",
@@ -8,15 +8,15 @@ AUTHORING = false;
 Embeddable = window.Embeddable || {};
 Embeddable.sendGAPageview = function (){
     // send the pageview to GA
-    if (typeof _gaq === 'undefined'){
+    if (typeof gtag === 'undefined'){
       return;
     }
     // make an array out of the URL's hashtag string, splitting the string at every ampersand
     var my_hashtag_array = location.hash.split('&');
 
     // grab the first value of the array (assuming that's the value that indicates which interactive is being viewed)
     var my_hashtag = my_hashtag_array[0];
-    _gaq.push(['_trackPageview', location.pathname + my_hashtag]);
+    gtag("event", "page_view", { "page_path": location.pathname + my_hashtag })
 };
 
 Embeddable.load = function(interactiveUrl, containerSelector, callbacks) {

diff --git a/src/index.html b/src/index.html
@@ -7,15 +7,14 @@
     <link href='//fonts.googleapis.com/css?family=Lato:300italic,700italic,300,400,400italic,700' rel='stylesheet' type='text/css'>
     <link href='index.css' rel='stylesheet' type='text/css'>
     <% if (htmlWebpackPlugin.options.gaAccountId) { %>
-    <script type="text/javascript">
-      var _gaq = _gaq || [];
-      _gaq.push(['_setAccount', '<%= htmlWebpackPlugin.options.gaAccountId %>']);
-      _gaq.push(['_setAllowAnchor', true]);
-      (function() {
-        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
-        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
-        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
-      })();
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=<%= htmlWebpackPlugin.options.gaAccountId %>"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', '<%= htmlWebpackPlugin.options.gaAccountId %>');
     </script>
     <% } %>
   </head>

diff --git a/src/lab/common/controllers/scripting-api.js b/src/lab/common/controllers/scripting-api.js
@@ -114,19 +114,17 @@ export default function ScriptingAPI(interactivesController, model) {
 
       /* Send a tracking event to Google Analytics */
       function trackEvent(category, action, label) {
-        var googleAnalytics;
 
-        if (typeof _gaq === 'undefined') {
-          // console.error("Google Analytics not defined, Can not send trackEvent");
+        if (typeof gtag === 'undefined') {
+          // console.error("Google Analytics not defined, Can not send event");
           return;
         }
-        googleAnalytics = _gaq;
         if (!category) {
           category = "Interactive";
         }
         // console.log("Sending a track page event Google Analytics (category:action:label):");
         // console.log("(" + category + ":"  + action + ":" + label + ")");
-        googleAnalytics.push(['_trackEvent', category, action, label]);
+        gtag("event", action, { "event_category": category, "event_label": label });
       }
 
       return {