From 27bb24fe3565731367bceae3a2051ffdee2f969c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Figueroa?= Date: Fri, 25 Dec 2020 18:17:14 -0300 Subject: [PATCH] example with-google-tag-manager (#20042) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Hi ✌️ I've seen that many people have problem with implement Google Tag Manager, I've created an example of how insert "Google Tag Manager" in a NextJs app --- .../.env.local.example | 1 + examples/with-google-tag-manager/.gitignore | 34 ++++++++++++++++ examples/with-google-tag-manager/README.md | 29 ++++++++++++++ .../components/GoogleTagManager.js | 22 +++++++++++ examples/with-google-tag-manager/lib/gtm.js | 8 ++++ examples/with-google-tag-manager/package.json | 15 +++++++ .../with-google-tag-manager/pages/_app.js | 11 ++++++ .../pages/_document.js | 37 ++++++++++++++++++ .../with-google-tag-manager/pages/index.js | 10 +++++ .../public/favicon.ico | Bin 0 -> 15086 bytes 10 files changed, 167 insertions(+) create mode 100644 examples/with-google-tag-manager/.env.local.example create mode 100644 examples/with-google-tag-manager/.gitignore create mode 100644 examples/with-google-tag-manager/README.md create mode 100644 examples/with-google-tag-manager/components/GoogleTagManager.js create mode 100644 examples/with-google-tag-manager/lib/gtm.js create mode 100644 examples/with-google-tag-manager/package.json create mode 100644 examples/with-google-tag-manager/pages/_app.js create mode 100644 examples/with-google-tag-manager/pages/_document.js create mode 100644 examples/with-google-tag-manager/pages/index.js create mode 100644 examples/with-google-tag-manager/public/favicon.ico diff --git a/examples/with-google-tag-manager/.env.local.example b/examples/with-google-tag-manager/.env.local.example new file mode 100644 index 0000000000000..474e6beaa7ecb --- /dev/null +++ b/examples/with-google-tag-manager/.env.local.example @@ -0,0 +1 @@ +NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID= \ No newline at end of file diff --git a/examples/with-google-tag-manager/.gitignore b/examples/with-google-tag-manager/.gitignore new file mode 100644 index 0000000000000..1437c53f70bc2 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..3d418c94efaf0 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..49b89be14c5f2 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..7044f1aa8389d --- /dev/null +++ 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 new file mode 100644 index 0000000000000..711839deedb87 --- /dev/null +++ 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 new file mode 100644 index 0000000000000..3e2416997425d --- /dev/null +++ b/examples/with-google-tag-manager/pages/_app.js @@ -0,0 +1,11 @@ +import GoogleTagManager from '../components/GoogleTagManager' + +function MyApp({ Component, pageProps }) { + return ( + + + + ) +} + +export default MyApp diff --git a/examples/with-google-tag-manager/pages/_document.js b/examples/with-google-tag-manager/pages/_document.js new file mode 100644 index 0000000000000..d9ab0ee01f966 --- /dev/null +++ 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 ( + + + {/* Google Tag Manager - Global base code */} +