Support the new Google analytics gtag.js (#7691)

- This applies to docs and to the dashboard
- This is backwards compatible with the old UA-XXX properties
  assuming nothing custom is going on
- Supports the new G-XXXX properties
- Continues to support disabling analytics and do not track
- Sends custom dimensions like before
- Shorter cookie expiry like before

Co-authored-by: Santos Gallegos <[email protected]>

Author: davidfischer

media/javascript/readthedocs-analytics.js

@@ -7,33 +7,40 @@ if (navigator.doNotTrack === '1') {
     console.log('Respecting DNT with respect to analytics...');
 } else {
     if (typeof READTHEDOCS_DATA !== 'undefined' && READTHEDOCS_DATA.global_analytics_code) {
-        // RTD Analytics Code
-        (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','https://www.google-analytics.com/analytics.js','ga');
+        (function () {
+            // New Google Site Tag (gtag.js) tagging/analytics framework
+            // https://developers.google.com/gtagjs
+            var script = document.createElement("script");
+            script.src = "https://www.googletagmanager.com/gtag/js?id=" + READTHEDOCS_DATA.global_analytics_code;
+            script.type = "text/javascript";
+            script.async = true;
+            document.getElementsByTagName("head")[0].appendChild(script);
+        }())
 
-        ga('create', READTHEDOCS_DATA.global_analytics_code, 'auto', 'rtfd', {
-          'cookieExpires': 30 * 24 * 60 * 60
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        // Setup the RTD global analytics code and send a pageview
+        gtag('config', READTHEDOCS_DATA.global_analytics_code, {
+            'anonymize_ip': true,
+            'cookie_expires': 30 * 24 * 60 * 60,  // 30 days
+            'dimension1': READTHEDOCS_DATA.project,
+            'dimension2': READTHEDOCS_DATA.version,
+            'dimension3': READTHEDOCS_DATA.language,
+            'dimension4': READTHEDOCS_DATA.theme,
+            'dimension5': READTHEDOCS_DATA.programming_language,
+            'dimension6': READTHEDOCS_DATA.builder,
+            'groups': 'rtfd'
         });
-        ga('rtfd.set', 'dimension1', READTHEDOCS_DATA.project);
-        ga('rtfd.set', 'dimension2', READTHEDOCS_DATA.version);
-        ga('rtfd.set', 'dimension3', READTHEDOCS_DATA.language);
-        ga('rtfd.set', 'dimension4', READTHEDOCS_DATA.theme);
-        ga('rtfd.set', 'dimension5', READTHEDOCS_DATA.programming_language);
-        ga('rtfd.set', 'dimension6', READTHEDOCS_DATA.builder);
-        ga('rtfd.set', 'anonymizeIp', true);
-        ga('rtfd.send', 'pageview');
 
-        // User Analytics Code
+        // Setup the project (user) analytics code and send a pageview
         if (READTHEDOCS_DATA.user_analytics_code) {
-            ga('create', READTHEDOCS_DATA.user_analytics_code, 'auto', 'user', {
-              'cookieExpires': 30 * 24 * 60 * 60
+            gtag('config', READTHEDOCS_DATA.user_analytics_code, {
+                'anonymize_ip': true,
+                'cookie_expires': 30 * 24 * 60 * 60  // 30 days
             });
-            ga('user.set', 'anonymizeIp', true);
-            ga('user.send', 'pageview');
         }
-        // End User Analytics Code
     }
     // end RTD Analytics Code
 }

readthedocs/core/static-src/core/js/doc-embed/sphinx.js

@@ -14,9 +14,16 @@ function init() {
     $(document).on('click', "[data-toggle='rst-current-version']", function () {
         var flyout_state = $("[data-toggle='rst-versions']").hasClass('shift-up') ? 'was_open' : 'was_closed';
 
-        // This needs to handle both old style legacy analytics for previously built docs
-        // as well as the newer universal analytics
-        if (typeof ga !== 'undefined') {
+        // This needs to handle old style legacy analytics for previously built docs
+        // as well as the newer universal analytics and Google Site Tag
+        if (typeof gtag !== 'undefined') {
+            // https://developers.google.com/analytics/devguides/collection/gtagjs/events
+            gtag('event', 'Click', {
+                'event_category': 'Flyout',
+                'event_label': flyout_state,
+                'send_to': 'rtfd'
+            });
+        } else if (typeof ga !== 'undefined') {
             ga('rtfd.send', 'event', 'Flyout', 'Click', flyout_state);
         } else if (typeof _gaq !== 'undefined') {
             _gaq.push(

readthedocs/core/static/core/js/readthedocs-doc-embed.js

@@ -15,36 +15,48 @@
   <!-- title -->
   <title>{% block title %}{% endblock %}{% block head_title %}{% endblock %} | {% block branding %}Read the Docs {% endblock %}</title>
 
+  {% if GLOBAL_ANALYTICS_CODE %}
   <!-- Google Analytics -->
   <script>
     if ({{ DO_NOT_TRACK_ENABLED | lower }} && navigator.doNotTrack === '1') {
       console.log('Respecting DNT with respect to analytics...');
     } else {
       // For more details on analytics at Read the Docs, please see:
       // https://docs.readthedocs.io/en/latest/advertising-details.html#analytics
-      (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','https://www.google-analytics.com/analytics.js','ga');
-
-      ga('create', '{{ GLOBAL_ANALYTICS_CODE }}', 'auto', 'rtfd', {
-        'cookieExpires': 30 * 24 * 60 * 60
+      (function () {
+        // New Google Site Tag (gtag.js) tagging/analytics framework
+        // https://developers.google.com/gtagjs
+        var script = document.createElement("script");
+        script.src = "https://www.googletagmanager.com/gtag/js?id={{ GLOBAL_ANALYTICS_CODE }}";
+        script.type = "text/javascript";
+        script.async = true;
+        document.getElementsByTagName("head")[0].appendChild(script);
+      }())
+
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      // Setup the RTD global analytics code and send a pageview
+      gtag('config', '{{ GLOBAL_ANALYTICS_CODE }}', {
+        'anonymize_ip': true,
+        'cookie_expires': 30 * 24 * 60 * 60,  // 30 days
+        'groups': 'rtfd'
       });
-      ga('rtfd.set', 'anonymizeIp', true);
-      ga('rtfd.send', 'pageview');
 
       {% if DASHBOARD_ANALYTICS_CODE %}
         // Dashboard Analytics Code
-        ga('create', '{{ DASHBOARD_ANALYTICS_CODE }}', 'auto', 'user', {
-          'cookieExpires': 30 * 24 * 60 * 60
+        gtag('config', '{{ DASHBOARD_ANALYTICS_CODE }}', {
+          'anonymize_ip': true,
+          'cookie_expires': 30 * 24 * 60 * 60,  // 30 days
+          'groups': 'dashboard'
         });
-        ga('user.set', 'anonymizeIp', true);
-        ga('user.send', 'pageview');
         // End Dashboard Analytics Code
       {% endif %}
     }
   </script>
   <!-- End Google Analytics -->
+  {% endif %}
 
   <!-- css -->
   <link rel="stylesheet" href="{% static 'css/core.css' %}">