Add google tagmanager plugin

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,3 @@
+/*.js
+!index.js
+yarn.lock

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-beta.1",
+  "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 ."
+  }
+}

packages/gatsby-plugin-google-tagmanager/src/gatsby-ssr.js

@@ -0,0 +1,38 @@
+import React from "react"
+import { stripIndent } from "common-tags"
+
+exports.onRenderBody = (
+  { setHeadComponents, setPreBodyComponents },
+  pluginOptions
+) => {
+  if (process.env.NODE_ENV === `production`) {
+    setHeadComponents([
+      <script
+        key="plugin-google-tagmanager"
+        dangerouslySetInnerHTML={{
+          __html: stripIndent`
+            (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}');`,
+        }}
+      />,
+    ])
+
+    setPreBodyComponents([
+      <noscript
+        key="plugin-google-tagmanager"
+        dangerouslySetInnerHTML={{
+          __html: stripIndent`
+            <iframe
+              src="https://www.googletagmanager.com/ns.html?id=${pluginOptions.id}"
+              height="0"
+              width="0"
+              style="display: none; visibility: hidden"
+            />`,
+        }}
+      />,
+    ])
+  }
+}

packages/gatsby/src/cache-dir/api-ssr-docs.js

@@ -9,6 +9,9 @@
  * @param {function} $0.setHeadComponents Takes an array of components as its
  * first argument which are added to the `headComponents` array which is passed
  * to the `html.js` component.
+ * @param {function} $0.setPreBodyComponents Takes an array of components as its
+ * first argument which are added to the `preBodyComponents` array which is passed
+ * to the `html.js` component.
  * @param {function} $0.setPostBodyComponents Takes an array of components as its
  * first argument which are added to the `postBodyComponents` array which is passed
  * to the `html.js` component.
@@ -51,6 +54,9 @@ exports.replaceRenderer = true
  * @param {function} $0.setHeadComponents Takes an array of components as its
  * first argument which are added to the `headComponents` array which is passed
  * to the `html.js` component.
+ * @param {function} $0.setPreBodyComponents Takes an array of components as its
+ * first argument which are added to the `preBodyComponents` array which is passed
+ * to the `html.js` component.
  * @param {function} $0.setPostBodyComponents Takes an array of components as its
  * first argument which are added to the `postBodyComponents` array which is passed
  * to the `html.js` component.

packages/gatsby/src/cache-dir/default-html.js

@@ -34,6 +34,7 @@ module.exports = React.createClass({
           {css}
         </head>
         <body>
+          {this.props.preBodyComponents}
           <div
             id="___gatsby"
             dangerouslySetInnerHTML={{ __html: this.props.body }}

packages/gatsby/src/cache-dir/static-entry.js

@@ -36,6 +36,7 @@ module.exports = (locals, callback) => {
 
   let bodyHTML = ``
   let headComponents = []
+  let preBodyComponents = []
   let postBodyComponents = []
   let bodyProps = {}
 
@@ -47,6 +48,10 @@ module.exports = (locals, callback) => {
     headComponents = headComponents.concat(components)
   }
 
+  const setPreBodyComponents = components => {
+    preBodyComponents = preBodyComponents.concat(components)
+  }
+
   const setPostBodyComponents = components => {
     postBodyComponents = postBodyComponents.concat(components)
   }
@@ -85,6 +90,7 @@ module.exports = (locals, callback) => {
     bodyComponent,
     replaceBodyHTMLString,
     setHeadComponents,
+    setPreBodyComponents,
     setPostBodyComponents,
     setBodyProps,
   })
@@ -96,6 +102,7 @@ module.exports = (locals, callback) => {
 
   apiRunner(`onRenderBody`, {
     setHeadComponents,
+    setPreBodyComponents,
     setPostBodyComponents,
     setBodyProps,
   })
@@ -137,7 +144,7 @@ module.exports = (locals, callback) => {
       let fetchedScript = get(stats, fetchKey)
 
       if (!fetchedScript) {
-        return
+        return null
       }
 
       // If sourcemaps are enabled, then the entry will be an array with
@@ -147,7 +154,7 @@ module.exports = (locals, callback) => {
 
       // Make sure we found a component.
       if (prefixedScript === `/`) {
-        return
+        return null
       }
 
       return prefixedScript
@@ -178,10 +185,12 @@ module.exports = (locals, callback) => {
     <Html
       {...bodyProps}
       headComponents={headComponents}
+      preBodyComponents={preBodyComponents}
       postBodyComponents={postBodyComponents}
       body={bodyHTML}
       path={locals.path}
     />
   )}`
+
   callback(null, html)
 }

packages/gatsby/src/utils/develop.js

@@ -103,22 +103,29 @@ async function startServer(program) {
             const apiRunner = require(`${directory}/.cache/api-runner-ssr`)
 
             let headComponents = []
+            let preBodyComponents = []
             let postBodyComponents = []
             let bodyProps = {}
 
             const setHeadComponents = components => {
               headComponents = headComponents.concat(components)
             }
 
+            const setPreBodyComponents = components => {
+              preBodyComponents = preBodyComponents.concat(components)
+            }
+
             const setPostBodyComponents = components => {
               postBodyComponents = postBodyComponents.concat(components)
             }
 
             const setBodyProps = props => {
               bodyProps = _.merge({}, bodyProps, props)
             }
+
             apiRunner(`onRenderBody`, {
               setHeadComponents,
+              setPreBodyComponents,
               setPostBodyComponents,
               setBodyProps,
             })
@@ -127,6 +134,7 @@ async function startServer(program) {
               ...bodyProps,
               body: ``,
               headComponents,
+              preBodyComponents,
               postBodyComponents: postBodyComponents.concat([
                 <script src="/commons.js" />,
               ]),
@@ -185,7 +193,9 @@ async function startServer(program) {
       } else {
         if (program.open) {
           const opn = require(`opn`)
-          opn(`http://${listener.address().address}:${listener.address().port}`)
+          opn(
+            `http://${listener.address().address}:${listener.address().port}`
+          )
         }
         const host = listener.address().address === `127.0.0.1`
           ? `localhost`