update Google Analytics

Author: JoeGermuska

CHANGELOG.md

@@ -1,5 +1,6 @@
-3.9.3 (not yet released)
+3.9.3 (2023-06-26)
 -------------------------
+* Update for Google Analytics 4 (GA4)
 * #812 don't throw an error when attempting to report an error fetching config data
 * #799 Deprecate / remove DOMUtil (should be invisible but simplifies code)
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@knight-lab/timelinejs",
-    "version": "3.9.2",
+    "version": "3.9.3",
     "license": "MPL-2.0",
     "description": "TimelineJS v3: A Storytelling Timeline built in JavaScript, made by Northwestern University Knight Lab.",
     "dependencies": {

src/embed/index.html

@@ -150,7 +150,7 @@
             var options = optionsFromUrlParams();
             createEmbedDiv('timeline-embed', options.width, options.height);
             // ga_property_id is not something we let users override
-            options.ga_property_id = 'UA-27829802-4';
+            options.ga_measurement_id = 'G-LVEFKMG087'
             if (typeof(options.source) == 'undefined') {
                 options.source = '1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk' // women in computing
             }

src/js/timeline/Timeline.js

@@ -133,6 +133,7 @@ class Timeline {
             slide_default_fade: "0%", // landscape fade
             zoom_sequence: [0.5, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89], // Array of Fibonacci numbers for TimeNav zoom levels
             language: "en",
+            ga_measurement_id: null,
             ga_property_id: null,
             track_events: ['back_to_start', 'nav_next', 'nav_previous', 'zoom_in', 'zoom_out'],
             theme: null,
@@ -991,31 +992,23 @@ class Timeline {
         this._el.container.focus();
     }
 
-    _initGoogleAnalytics() {
-        (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', this.options.ga_property_id, 'auto');
-        ga('set', 'anonymizeIp', true);
+    _initGoogleAnalytics(measurement_id) {
+        loadJS(`https://www.googletagmanager.com/gtag/js?id=${measurement_id}`)
+        window.dataLayer = window.dataLayer || [];
+        window.gtag = function(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', measurement_id);
     }
 
     _initAnalytics() {
-        if (this.options.ga_property_id === null) { return; }
-        this._initGoogleAnalytics();
-        ga('send', 'pageview');
+        let measurement_id = this.options.ga_measurement_id || this.options.ga_property_id || null;
+        if (!measurement_id) { return; }
+        this._initGoogleAnalytics(measurement_id);
         var events = this.options.track_events;
         for (let i = 0; i < events.length; i++) {
             var event_ = events[i];
             this.addEventListener(event_, function(e) {
-                ga('send', 'event', e.type, 'clicked');
+                gtag('event', e.type);
             });
         }
     }

src/template/index.html

@@ -13,6 +13,7 @@
             hash_bookmark: true,
             start_at_end: false,
             autolink: false,
+            ga_measurement_id: 'G-LVEFKMG087',
             sheets_proxy: 'https://sheets-proxy.knightlab.com/proxy/'
         }
 

website/templates/_analytics.html

@@ -1,10 +1,9 @@
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <!-- This fragment is only used on some of the examples pages -->
-    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-537357-20"></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag(){dataLayer.push(arguments);}
-      gtag('js', new Date());
-
-      gtag('config', 'UA-537357-20', { 'anonymize_ip': true });
-    </script>
+<!-- Google tag (gtag.js) -->
+<!-- This fragment is only used on some of the examples pages -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-LVEFKMG087"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+  gtag('config', 'G-LVEFKMG087');
+</script>

website/templates/docs/options.html

@@ -449,6 +449,19 @@ <h2 class="product-header" id="options">TimelineJS options</h2>
                     </div>
                 </div>
 
+                <div class="grid">
+
+                    <div class="column-2 column-6-phone">
+                        <code>ga_measurement_id</code>
+                    </div>
+                    <div class="column-2 column-6-phone">
+                        null
+                    </div>
+                    <div class="column-8">
+                        Google Measurement ID. For self-hosted timelines, if this value is set, then Google Analytics 4 will be initialized and pageviews and other navigation events will be logged to the given measurement ID. For Knight Lab hosted timelines, this cannot be overridden with your analytics ID.
+                    </div>
+                </div>
+
                 <div class="grid">
 
                     <div class="column-2 column-6-phone">
@@ -458,7 +471,7 @@ <h2 class="product-header" id="options">TimelineJS options</h2>
                         null
                     </div>
                     <div class="column-8">
-                        Google Analytics ID.
+                        Google Analytics ID. This option is deprecated in favor of <code>ga_measurement_id</code> which better matches Google Analytics 4 (GA4) language. For now, if <code>ga_property_id</code> is set and <code>ga_measurement_id</code> is not, then <code>ga_property_id</code> will be used, even though the code is designed for GA4.
                     </div>
                 </div>