Allow Google Analytics to use gtag.js (#601)

* Moved google analytics script to head The code now uses the new gtag script to track the website on google analytics. The migration is explained [here](https://developers.google.com/analytics/devguides/collection/gtagjs/migration). This will help to solve issues such as #375. As indicated at https://support.google.com/analytics/answer/1008080 the analytics code must be placed in the head tag, so it is moved there. * Add a boolean to use the new gtag library * Update api-site-config.md
facebook · Apr 29, 2018 · 976ae77 · 976ae77
1 parent ae53bdc
commit 976ae77
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 15 deletions.
diff --git a/docs/api-site-config.md b/docs/api-site-config.md
@@ -123,6 +123,8 @@ h1 {
 
 `gaTrackingId` - Google Analytics tracking ID to track page views.
 
+`gaGtag` - Set this to `true` if you want to use [global site tags (gtag.js)](https://developers.google.com/gtagjs/) for Google analytics instead of `analytics.js`.
+
 `highlight` - [Syntax highlighting](api-doc-markdown.md) options:
 
  - `theme` is the name of the theme used by Highlight.js when highlighting code. You can find the [list of supported themes here](https://github.com/isagalaev/highlight.js/tree/master/src/styles).

diff --git a/lib/core/Head.js b/lib/core/Head.js
@@ -95,6 +95,44 @@ class Head extends React.Component {
             title={this.props.config.title + ' Blog RSS Feed'}
           />
         )}
+        {this.props.config.gaTrackingId &&
+          this.props.config.gaGtag && (
+            <script
+              async
+              src={`https://www.googletagmanager.com/gtag/js?id=${
+                this.props.config.gaTrackingId
+              }`}
+            />
+          )}
+        {this.props.config.gaTrackingId &&
+          this.props.config.gaGtag && (
+            <script
+              dangerouslySetInnerHTML={{
+                __html: `
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments); }
+              gtag('js', new Date());
+              gtag('config', '${this.props.config.gaTrackingId}');
+            `,
+              }}
+            />
+          )}
+        {this.props.config.gaTrackingId &&
+          !this.props.config.gaGtag && (
+            <script
+              dangerouslySetInnerHTML={{
+                __html: `
+              (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', '${this.props.config.gaTrackingId}', 'auto');
+              ga('send', 'pageview');
+            `,
+              }}
+            />
+          )}
 
         {/* External resources */}
         {this.props.config.stylesheets &&

diff --git a/lib/core/Site.js b/lib/core/Site.js
@@ -83,21 +83,6 @@ class Site extends React.Component {
               src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"
             />
           )}
-          {this.props.config.gaTrackingId && (
-            <script
-              dangerouslySetInnerHTML={{
-                __html: `
-              (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', '${this.props.config.gaTrackingId}', 'auto');
-              ga('send', 'pageview');
-            `,
-              }}
-            />
-          )}
           {this.props.config.facebookAppId && (
             <script
               dangerouslySetInnerHTML={{