From 976ae770b530636d1e4805ef285af52aa30a51c1 Mon Sep 17 00:00:00 2001
From: Fabrizio Ruggeri <ramiel@users.noreply.github.com>
Date: Sun, 29 Apr 2018 19:44:11 +0200
Subject: [PATCH] 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
---
 docs/api-site-config.md |  2 ++
 lib/core/Head.js        | 38 ++++++++++++++++++++++++++++++++++++++
 lib/core/Site.js        | 15 ---------------
 3 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/docs/api-site-config.md b/docs/api-site-config.md
index a8c6232c43..ad5c3ca361 100644
--- 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
index f25a0273e7..56e07266b9 100644
--- 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
index e1f4651ec7..9c151f4f09 100644
--- 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={{