@graphcommerce/googletagmanager 0.3.2 → 1.0.4

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/googletagmanager@0.3.2...@graphcommerce/googletagmanager@1.0.1) (2021-11-03)
+
+
+### Bug Fixes
+
+* simplified google tagmanager and create 1.0.0 ([21ac284](https://github.com/ho-nl/m2-pwa/commit/21ac28484de6c12d54f6cf73ad04e459d74892a7))
+
+
+
+
+
 # [0.3.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/googletagmanager@0.2.10...@graphcommerce/googletagmanager@0.3.0) (2021-10-27)
 
 

package/README.md

@@ -6,14 +6,9 @@ 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
+   [example](../../examples/magento-graphcms/.env.example)
+2. Add `<GoogleTagManagerScript/>` to your `pages/_app.tsx` file.
+   [example](../../examples/magento-graphcms/pages/_app.tsx)
+3. Add `<GoogleTagManagerNoScript/>` to your `pages/_document.tsx` file, in the
+   body section above `<Main />`
+   [example](../../examples/magento-graphcms/pages/_document_.tsx)

package/components/{GoogleTagManagerNoScript/index.tsx → GoogleTagManagerNoScript.tsx}

@@ -3,6 +3,7 @@ import React from 'react'
 export default function GoogleTagManagerNoScript() {
   return (
     <noscript>
+      {/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
       <iframe
         src={`https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GTM_ID}`}
         height='0'

package/components/{GoogleTagManagerScript/index.tsx → GoogleTagManagerScript.tsx}

@@ -1,10 +1,27 @@
+import { useRouter } from 'next/router'
 import Script from 'next/script'
-import React from 'react'
+import React, { useEffect } 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')
+  if (process.env.NODE_ENV !== 'production' && !id)
+    console.warn('[@graphcommerce/googletagmanager]: NEXT_PUBLIC_GTM_ID not found')
+
+  const router = useRouter()
+
+  useEffect(() => {
+    const onRouteChangeComplete = (url: string) => {
+      const dataLayer = globalThis.dataLayer as Record<string, unknown>[]
+      dataLayer.push({ event: 'pageview', page: url })
+    }
+
+    router.events.on('routeChangeComplete', onRouteChangeComplete)
+
+    return () => {
+      router.events.off('routeChangeComplete', onRouteChangeComplete)
+    }
+  }, [router.events])
 
   return (
     <Script

package/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/googletagmanager",
-  "version": "0.3.2",
+  "version": "1.0.4",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "browserslist": [
@@ -14,19 +14,16 @@
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.3",
-    "@graphcommerce/prettier-config-pwa": "^3.0.3",
+    "@graphcommerce/eslint-config-pwa": "^3.1.6",
+    "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
-    "@playwright/test": "^1.16.2"
+    "@playwright/test": "^1.16.2",
+    "@types/gapi.client.tagmanager": "^2.0.2"
   },
   "dependencies": {
-    "@apollo/client": "^3.4.16",
-    "@graphcommerce/graphql": "^2.105.2",
-    "@graphql-typed-document-node/core": "^3.1.0",
-    "clsx": "^1.1.1",
-    "next": "^12.0.2",
+    "next": "^12.0.3",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
-  "gitHead": "b6321b8f479a0ef6e4b1b543702158d964bbeac6"
+  "gitHead": "8f156415c7f5a963e363f0d6d18fe5d6bbd5dba2"
 }

package/hooks/index.ts

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

package/hooks/useGTMPageViewEvent.ts

@@ -1,29 +0,0 @@
-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])
-}