react-gtm-hook
react-gtm-hook copied to clipboard
Easily manage the Google Tag Manager via Hook
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
- How to use
- API
- Example
- License
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 '@elgorditosalsero/react-gtm-hook'
const App = () => {
const gtmParams = {
id: 'GTM-ID',
dataLayerName: 'customDataLayerName'
}
return (
<GTMProvider state={gtmParams}>
<p>My awesome app</p>
</GTMProvider>
)
}
With custom DataLayer name and initial values
import { GTMProvider } from '@elgorditosalsero/react-gtm-hook'
const App = () => {
const gtmParams = {
id: 'GTM-ID',
dataLayer: {
'my-custom-value': 'value',
'my-awesome-value': 'awesome'
},
dataLayerName: 'customDataLayerName'
}
return (
<GTMProvider state={gtmParams}>
<p>My awesome app</p>
</GTMProvider>
)
}
Use a GTM custom environment
import { GTMProvider } from '@elgorditosalsero/react-gtm-hook'
const App = () => {
const gtmParams = {
id: 'GTM-ID',
environment: {
gtm_auth: 'my-auth-token',
gtm_preview: 'preview-id'
}
}
return (
<GTMProvider state={gtmParams}>
<p>My awesome app</p>
</GTMProvider>
)
}
To find the gtm_auth
and gtm_preview
values for your custom GTM environment, go to Admin > Your Container > Environments > Your Environment > Actions > Get Snippet in your Google Tag Manager console. You will find the values you need embedded in the snippet.
Sending data to GTM
import { GTMProvider, useGTMDispatch } from '@elgorditosalsero/react-gtm-hook'
const App = () => {
const gtmParams = {
id: 'GTM-ID',
dataLayerName: 'customDataLayerName'
}
return (
<GTMProvider state={gtmParams}>
<div>
<p>My awesome app</p>
<MyAwesomeComp />
</div>
</GTMProvider>
)
}
const MyAwesomeComp = () => {
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>
)
}
API
useGTM
provide you a clean and easy to use API to config the GTM
Init
Name | Type | Required | Info |
---|---|---|---|
id | String |
YES | The container ID from the Tag Manager, it looks like: GTM-0T0TTT |
dataLayer | Object |
NO | Custom values for the dataLayer, like {'my-init-prop': 'value'} |
dataLayerName | String |
NO | Custom name for the dataLayer, if not passed, it will be the default: dataLayer |
environment | Object |
NO | Provide the gtm_auth and gtm_preview parameters to use a custom GTM environment |
nonce | String |
NO | Server generated nonce. see https://developers.google.com/tag-manager/web/csp |
injectScript | Boolean |
NO | default(true ): Decide if the GTM Script is injected, see #30. Also allows for delayed injection by toggling true later in flow |
customDomain | String |
NO | default(https://www.example.com ): Provide customDomain to use a custom GTM domain |
SentDataToGTM
Name | Type | Required | Info |
---|---|---|---|
data | Object |
YES | The object data to send to the GTM, like {event: 'my-awesome-event', 'my-custom-var': 'value'} |
Example
You can see this lib live on the dedicated site
License
react-gtm-hook
is under MIT License
Contributors ✨
Thanks goes to these wonderful people (emoji key):
Guido Porcaro 💻 📖 |
Ben Yap 💻 📖 ⚠️ |
Cristian Livella 💻 |
Jason Finch 💻 |
Italo 💻 |
Gianluca La Manna 📖 |
Kazuki 💻 |
Stepan Mandryka 💻 |
Simon Smith 📖 |
Listiani 💻 📖 |
This project follows the all-contributors specification. Contributions of any kind welcome!