elgorditosalsero / react-gtm-hook

Easily manage the Google Tag Manager via Hook
https://elgorditosalsero-react-gtm-hook.netlify.app/
MIT License
220 stars 28 forks source link

Feature/restructure #19

Closed precious-void closed 3 years ago

precious-void commented 3 years ago

PR request aligning our discussions in #17

No useGTM hook for now.

- import useGTM from '@elgorditosalsero/react-gtm-hook'
+ import { GTMProvider, useGTMDispatch } from '@elgorditosalsero/react-gtm-hook'
const App = () => {
-  const { init, UseGTMHookProvider } = useGTM()
-  useEffect(() => init({ id: 'GTM-ID' }), [])
+  const gtmParams = { id: 'GTM-ID' }

  return (
-    <UseGTMHookProvider>
+    <GTMProvider state={gtmParams}>
      <p>My awesome app</p>
-    </UseGTMHookProvider>
+    </GTMProvider>
  )
}

const MyAwesomeComp = () => {
-  const { sendDataToGTM } = useGTM()
+  const sendDataToGTM = useGTMDispatch()
  const handleClick = () => sendDataToGTM({ event: 'awesomeButtonClicked', value: 'imAwesome' })
  return (
    <div>
      <p>My Awesome Comp</p>
      <button onClick={handleClick}>My Awesome Button</button>
    </div>
  )
}