Add google tagmanager plugin

Author: 0x80

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"
+  ]
+}

packages/gatsby-plugin-google-tagmanager/.gitignore

@@ -0,0 +1,2 @@
+/gatsby-browser.js
+/gatsby-ssr.js

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

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',
+    },
+  },
+]
+```

packages/gatsby-plugin-google-tagmanager/index.js

@@ -0,0 +1 @@
+// noop

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 <[email protected]>",
+  "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 ."
+  }
+}

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) -->
+          `,
+        }}
+      />,
+    ])
+  }
+}