@graphcommerce/googletagmanager 0.2.1

package/CHANGELOG.md

@@ -0,0 +1,41 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [0.2.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/googletagmanager@0.2.0...@graphcommerce/googletagmanager@0.2.1) (2021-09-27)
+
+**Note:** Version bump only for package @graphcommerce/googletagmanager
+
+
+
+
+
+# 0.2.0 (2021-09-27)
+
+
+### Bug Fixes
+
+* use gtm id directly from process.env ([1682834](https://github.com/ho-nl/m2-pwa/commit/16828342b0f432da5c7051b1b9834fdad1c58ec8))
+
+
+### Features
+
+* no gtm id present warning ([94cda8a](https://github.com/ho-nl/m2-pwa/commit/94cda8a30a3ec556d3e5484824fbf349e2e1e342))
+* renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
+
+
+
+
+
+# 0.1.0 (2021-09-22)
+
+
+### Bug Fixes
+
+* use gtm id directly from process.env ([1682834](https://github.com/ho-nl/m2-pwa/commit/16828342b0f432da5c7051b1b9834fdad1c58ec8))
+
+
+### Features
+
+* no gtm id present warning ([94cda8a](https://github.com/ho-nl/m2-pwa/commit/94cda8a30a3ec556d3e5484824fbf349e2e1e342))

package/README.md

@@ -0,0 +1,19 @@
+# @graphcommerce/googletagmanager
+
+This package makes it easy to add Google Tag Manager to your GraphCommerce
+webshop.
+
+### Usage
+
+1. Fill `NEXT_PUBLIC_GTM_ID` in your .env file
+
+2. add `<GoogleTagManagerScript/>` to your \_app.tsx file, preferably as high as
+   you can in the component hierarchy
+
+3. add `<GoogleTagManagerNoScript/>` to your \_document.tsx file, in the body
+   section above `<Main />`
+
+### Hooks
+
+`useGTMPageViewEvent` - every time a route history change happens, pageview
+event gets triggered

package/components/GoogleTagManagerNoScript/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default function GoogleTagManagerNoScript() {
+  return (
+    <noscript>
+      <iframe
+        src={`https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GTM_ID}`}
+        height='0'
+        width='0'
+        style={{ display: 'none', visibility: 'hidden' }}
+      />
+    </noscript>
+  )
+}

package/components/GoogleTagManagerScript/index.tsx

@@ -0,0 +1,24 @@
+import Script from 'next/script'
+import React from 'react'
+
+export default function GoogleTagManagerScript() {
+  const id = process.env.NEXT_PUBLIC_GTM_ID
+
+  if (!id) console.warn('[@graphcommerce/googletagmanager]', 'NEXT_PUBLIC_GTM_ID not found')
+
+  return (
+    <Script
+      id={`gtm-${id}`}
+      strategy='afterInteractive'
+      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', '${id}');
+  `,
+      }}
+    />
+  )
+}

package/components/index.ts

@@ -0,0 +1,2 @@
+export { default as GoogleTagManagerScript } from './GoogleTagManagerScript'
+export { default as GoogleTagManagerNoScript } from './GoogleTagManagerNoScript'

package/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useGTMPageViewEvent } from './useGTMPageViewEvent'

package/hooks/useGTMPageViewEvent.ts

@@ -0,0 +1,29 @@
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+
+type useGTMPageViewEventProps = {
+  variables?: { [key: string]: string | number }
+}
+
+export default function useGTMPageViewEvent(props: useGTMPageViewEventProps = {}) {
+  const { variables } = props
+  const router = useRouter()
+
+  useEffect(() => {
+    const onRouteChangeComplete = (url: string) => {
+      const win = window as any
+
+      win.dataLayer.push({
+        event: 'pageview',
+        page: url,
+        ...variables,
+      })
+    }
+
+    router.events.on('routeChangeComplete', onRouteChangeComplete)
+
+    return () => {
+      router.events.off('routeChangeComplete', onRouteChangeComplete)
+    }
+  }, [router.events, variables])
+}

package/index.ts

@@ -0,0 +1,2 @@
+export * from './components'
+export * from './hooks'

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@graphcommerce/googletagmanager",
+  "version": "0.2.1",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "browserslist": [
+    "extends @graphcommerce/browserslist-config-pwa"
+  ],
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "devDependencies": {
+    "@graphcommerce/browserslist-config-pwa": "^3.0.1",
+    "@graphcommerce/eslint-config-pwa": "^3.0.1",
+    "@graphcommerce/prettier-config-pwa": "^3.0.1",
+    "@graphcommerce/typescript-config-pwa": "^3.0.1",
+    "@playwright/test": "^1.14.1"
+  },
+  "dependencies": {
+    "@apollo/client": "^3.3.21",
+    "@graphcommerce/graphql": "^2.103.1",
+    "@graphql-typed-document-node/core": "^3.1.0",
+    "clsx": "^1.1.1",
+    "next": "^11.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["**/node_modules", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}