Merge branch 'canary' into fix/image-cache

vercel · Dec 26, 2020 · 56bfaf8 · 56bfaf8
2 parents db7e514 + 27bb24f
commit 56bfaf8
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 0 deletions.
diff --git a/examples/with-google-tag-manager/.env.local.example b/examples/with-google-tag-manager/.env.local.example
@@ -0,0 +1 @@
+NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID=
diff --git a/examples/with-google-tag-manager/.gitignore b/examples/with-google-tag-manager/.gitignore
@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
diff --git a/examples/with-google-tag-manager/README.md b/examples/with-google-tag-manager/README.md
@@ -0,0 +1,29 @@
+## Example app using Google Tag Manager
+
+This example shows how to use Next.js along with Google Tag Manager. [`pages/_document.js`](pages/_document.js) is used to inject [base code](https://developers.google.com/tag-manager/quickstart). [`pages/_app.js`](pages/_app.js) is used to track route changes and send page views to Google Tag Manager.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com):
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/import/project?template=https://github.com/vercel/next.js/tree/canary/examples/with-google-tag-manager)
+
+## How to use
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-google-tag-manager with-google-tag-manager-app
+# or
+yarn create next-app --example with-google-tag-manager with-google-tag-manager-app
+```
+
+Next, copy the `.env.local.example` file in this directory to `.env.local` (which will be ignored by Git):
+
+```bash
+cp .env.local.example .env.local
+```
+
+Set the `NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID` variable in `.env.local` to match your Google Tag Manager ID.
+
+Deploy it to the cloud with [Vercel](https://vercel.com/import?filter=next.js&utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).
diff --git a/examples/with-google-tag-manager/components/GoogleTagManager.js b/examples/with-google-tag-manager/components/GoogleTagManager.js
@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+import { useRouter } from 'next/router'
+import * as gtm from '../lib/gtm'
+
+const handleRouteChange = () => {
+  gtm.pageview()
+}
+
+const GoogleTagManager = ({ children }) => {
+  const router = useRouter()
+
+  useEffect(() => {
+    router.events.on('routeChangeComplete', handleRouteChange)
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange)
+    }
+  }, [router.events])
+
+  return children
+}
+
+export default GoogleTagManager
diff --git a/examples/with-google-tag-manager/lib/gtm.js b/examples/with-google-tag-manager/lib/gtm.js
@@ -0,0 +1,8 @@
+export const GTM_ID = process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID
+
+export const pageview = (url) => {
+  window.dataLayer({
+    event: 'pageview',
+    page: url,
+  })
+}
diff --git a/examples/with-google-tag-manager/package.json b/examples/with-google-tag-manager/package.json
@@ -0,0 +1,15 @@
+{
+  "name": "with-google-tag-manager",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "next": "latest",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  },
+  "license": "MIT"
+}
diff --git a/examples/with-google-tag-manager/pages/_app.js b/examples/with-google-tag-manager/pages/_app.js
@@ -0,0 +1,11 @@
+import GoogleTagManager from '../components/GoogleTagManager'
+
+function MyApp({ Component, pageProps }) {
+  return (
+    <GoogleTagManager>
+      <Component {...pageProps} />
+    </GoogleTagManager>
+  )
+}
+
+export default MyApp
diff --git a/examples/with-google-tag-manager/pages/_document.js b/examples/with-google-tag-manager/pages/_document.js
@@ -0,0 +1,37 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { GTM_ID } from '../lib/gtm'
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          {/* Google Tag Manager - Global base code */}
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+              (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', '${GTM_ID}');
+              `,
+            }}
+          />
+        </Head>
+        <body>
+          <noscript>
+            <iframe
+              src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
+              height="0"
+              width="0"
+              style={{ display: 'none', visibility: 'hidden' }}
+            />
+          </noscript>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
diff --git a/examples/with-google-tag-manager/pages/index.js b/examples/with-google-tag-manager/pages/index.js
@@ -0,0 +1,10 @@
+export default function Home() {
+  return (
+    <div>
+      <h1>
+        Go to `pages/_app.js` and `pages/_document.js` to see how you can add
+        Google Tag Manager to your app
+      </h1>
+    </div>
+  )
+}
diff --git a/examples/with-google-tag-manager/public/favicon.ico b/examples/with-google-tag-manager/public/favicon.ico