Google Tag Manager is a powerful tool from Google for manage tags (like cookies, pixels, scripts, etc...) on your app/website from a single entry point and without editing your codebase!
The GTM is an awesome tool for marketers and developers for adding external libs, handling events and analytics tags without affecting the codebase and, above all, give to the marketing team some working autonomy without deploy a new version of the app/website.
Why?
Why I wrote this Hook?
Basically because we are in the Hook era and, at the moment of writing, there was not any hook to handle it.
Overview
The Hook will inject the GTM scripts to the document and you don't have to edit your index.html
anymore.
You can also pass as parameters a custom dataLayer name (it will replace the default dataLayer
) and custom values/variables to it.
There is also a method to send custom data/events to the GTM (is a wrapper for the dataLayer.push()
)
Example Snippets
Basic/Default usage
import { useEffect } from 'react'
import useGTM from '@elgorditosalsero/react-gtm-hook'
const App = () => {
const { init } = useGTM()
useEffect(() => init({ id: 'GTM-ID' }), [])
return <p>My awesome app</p>
}
Send event (after initialization)
const MyAwesomeComp = () => {
const { sendDataToGTM } = useGTM()
const handleClick = () => sendDataToGTM({
event: 'awesomeButtonClicked',
value: 'imAwesome'
})
return (
<div>
<p>My Awesome Comp</p>
<button onClick={handleClick}>My Awesome Button</button>
</div>
)
}
So, what do you think? Will you try it?
If you think would be useful an article with more example and/or screenshot also from the Tag Manager, let me know in the discussion section
Pull Request, contributions and issue are welcome!
If this Hook was useful to you and you like it, please add a reaction and/or leave a comment and star on GitHub!
Repo
elgorditosalsero / react-gtm-hook
Easily manage the Google Tag Manager via Hook
MAINTAINERS WANTED, PLEASE REACH OUT IF YOU'RE INTERESTED
React Google Tag Manager Hook
Use easily the Google Tag Manager
With this custom hook, you can easily use the Google Tag Manager with 0 config, you just have to pass the container ID!
Features
Installation
$ yarn add @elgorditosalsero/react-gtm-hook
# or
$ npm install @elgorditosalsero/react-gtm-hook
How to use
Pay attention
Since v2.0 I'm using the context to share globally the config of the GTM for the Hook. If you're looking for the 1.x doc, check this
Basic
import { GTMProvider } from '@elgorditosalsero/react-gtm-hook'
const App = () => {
const gtmParams = { id: 'GTM-ID' }
return (
<GTMProvider state={gtmParams}>
<p>My awesome app</p>
</GTMProvider>
)
}
With custom DataLayer Name
import { GTMProvider } from
…
Top comments (3)
Hi Guido, thanks for the helpful post! Can you please explain what the downside/difference is of just puting the code into the index.html?
Hi katfromtheventury, thanks and sorry for the late reply.
Basically, when u put the script of the GTM into the index.html, it will load immediately and, to push events you'll have to create a custom hook or use always the
window.dataLayer.push
(or the custom name you've defined).With this hook, you can load the GTM when u want, maybe not at the bootstrap of the app, maybe layer or maybe by a custom trigger.
You can also configure the tag manager in the same place without doing it editing the script generated by Google.
Hope this help!
Practical and useful, good!