From ed883e094b84eeef0948cedc720845be197542c0 Mon Sep 17 00:00:00 2001
From: Thijs Koerselman <thijskoerselman@gmail.com>
Date: Sun, 4 Jun 2017 18:38:22 +0200
Subject: [PATCH] Add google tagmanager plugin

---
 .../gatsby-plugin-google-tagmanager/.babelrc  | 14 +++++++
 .../.gitignore                                |  2 +
 .../.npmignore                                | 34 +++++++++++++++++
 .../gatsby-plugin-google-tagmanager/README.md | 20 ++++++++++
 .../gatsby-plugin-google-tagmanager/index.js  |  1 +
 .../package.json                              | 21 +++++++++++
 .../src/gatsby-ssr.js                         | 37 +++++++++++++++++++
 7 files changed, 129 insertions(+)
 create mode 100644 packages/gatsby-plugin-google-tagmanager/.babelrc
 create mode 100644 packages/gatsby-plugin-google-tagmanager/.gitignore
 create mode 100644 packages/gatsby-plugin-google-tagmanager/.npmignore
 create mode 100644 packages/gatsby-plugin-google-tagmanager/README.md
 create mode 100644 packages/gatsby-plugin-google-tagmanager/index.js
 create mode 100644 packages/gatsby-plugin-google-tagmanager/package.json
 create mode 100644 packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js

diff --git a/packages/gatsby-plugin-google-tagmanager/.babelrc b/packages/gatsby-plugin-google-tagmanager/.babelrc
new file mode 100644
index 0000000000000..5a069bcd86ae8
--- /dev/null
+++ b/packages/gatsby-plugin-google-tagmanager/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["env", {
+      "targets": {
+        "browsers": ["last 2 versions", "safari >= 7"]
+      }
+    }],
+    "react"
+  ],
+  "plugins": [
+    "transform-object-rest-spread",
+    "transform-flow-strip-types"
+  ]
+}
diff --git a/packages/gatsby-plugin-google-tagmanager/.gitignore b/packages/gatsby-plugin-google-tagmanager/.gitignore
new file mode 100644
index 0000000000000..d7d1695e06bc4
--- /dev/null
+++ b/packages/gatsby-plugin-google-tagmanager/.gitignore
@@ -0,0 +1,2 @@
+/gatsby-browser.js
+/gatsby-ssr.js
diff --git a/packages/gatsby-plugin-google-tagmanager/.npmignore b/packages/gatsby-plugin-google-tagmanager/.npmignore
new file mode 100644
index 0000000000000..e771d2c9fa299
--- /dev/null
+++ b/packages/gatsby-plugin-google-tagmanager/.npmignore
@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
+node_modules
+*.un~
+yarn.lock
+src
+flow-typed
+coverage
+decls
+examples
diff --git a/packages/gatsby-plugin-google-tagmanager/README.md b/packages/gatsby-plugin-google-tagmanager/README.md
new file mode 100644
index 0000000000000..6628b56488de5
--- /dev/null
+++ b/packages/gatsby-plugin-google-tagmanager/README.md
@@ -0,0 +1,20 @@
+# gatsby-plugin-google-analytics
+
+Easily add Google Tagmanager to your Gatsby site.
+
+## Install
+`npm install --save gatsby-plugin-google-tagmanager`
+
+## How to use
+
+```javascript
+// In your gatsby-config.js
+plugins: [
+  {
+    resolve: `gatsby-plugin-google-tagmanager`,
+    options: {
+      id: 'YOUR_GOOGLE_TAGMANAGER_ID',
+    },
+  },
+]
+```
diff --git a/packages/gatsby-plugin-google-tagmanager/index.js b/packages/gatsby-plugin-google-tagmanager/index.js
new file mode 100644
index 0000000000000..172f1ae6a468c
--- /dev/null
+++ b/packages/gatsby-plugin-google-tagmanager/index.js
@@ -0,0 +1 @@
+// noop
diff --git a/packages/gatsby-plugin-google-tagmanager/package.json b/packages/gatsby-plugin-google-tagmanager/package.json
new file mode 100644
index 0000000000000..4ac3cf4831df0
--- /dev/null
+++ b/packages/gatsby-plugin-google-tagmanager/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "gatsby-plugin-google-tagmanager",
+  "description": "Gatsby plugin to add google tagmanager onto a site",
+  "version": "1.0.0-alpha19",
+  "author": "Thijs Koerselman <thijs@vauxlab.com>",
+  "devDependencies": {
+    "babel-cli": "^6.24.1"
+  },
+  "keywords": [
+    "gatsby",
+    "gatsby-plugin",
+    "google analytics",
+    "google tagmanager"
+  ],
+  "license": "MIT",
+  "main": "index.js",
+  "scripts": {
+    "build": "babel src --out-dir .",
+    "watch": "babel -w src --out-dir ."
+  }
+}
diff --git a/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js b/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js
new file mode 100644
index 0000000000000..2c26390202de7
--- /dev/null
+++ b/packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js
@@ -0,0 +1,37 @@
+import React from "react"
+import { stripIndent } from "common-tags"
+
+exports.onRenderBody = (
+  { setHeadComponents, setPreBodyComponents },
+  pluginOptions
+) => {
+  if (process.env.NODE_ENV === `production`) {
+    setHeadComponents([
+      <script
+        dangerouslySetInnerHTML={{
+          __html: stripIndent`
+            <!-- Google Tag Manager -->
+            <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+            })(window,document,'script','dataLayer', ${pluginOptions.id});</script>
+            <!-- End Google Tag Manager -->`,
+        }}
+      />,
+    ])
+
+    setPreBodyComponents([
+      <script
+        dangerouslySetInnerHTML={{
+          __html: stripIndent`
+            <!-- Google Tag Manager (noscript) -->
+            <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=${pluginOptions.id}"
+            height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+            <!-- End Google Tag Manager (noscript) -->
+          `,
+        }}
+      />,
+    ])
+  }
+}