Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/elgorditosalsero/react-gtm-hook
Easily manage the Google Tag Manager via Hook
https://github.com/elgorditosalsero/react-gtm-hook
google-tag-manager googletagmanager gtm hook react-hook react-hooks
Last synced: about 1 month ago
JSON representation
Easily manage the Google Tag Manager via Hook
- Host: GitHub
- URL: https://github.com/elgorditosalsero/react-gtm-hook
- Owner: elgorditosalsero
- License: mit
- Created: 2020-05-26T16:22:48.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-07-04T06:26:27.000Z (5 months ago)
- Last Synced: 2024-10-28T07:16:27.529Z (about 2 months ago)
- Topics: google-tag-manager, googletagmanager, gtm, hook, react-hook, react-hooks
- Language: TypeScript
- Homepage: https://elgorditosalsero-react-gtm-hook.netlify.app/
- Size: 1.41 MB
- Stars: 220
- Watchers: 3
- Forks: 28
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-react-hooks - `@elgorditosalsero/react-gtm-hook`
- awesome-react-hooks-cn - `@elgorditosalsero/react-gtm-hook`
- awesome-react-hooks - `@elgorditosalsero/react-gtm-hook`
- awesome-react-hooks - `@elgorditosalsero/react-gtm-hook`
README
# 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](#installation)
- [How to use](#how-to-use)
- [API](#api)
- [Example](#example)
- [License](#license)
## Installation
```bash
$ 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](https://github.com/elgorditosalsero/react-gtm-hook/tree/v1.0.6)
### Basic
```jsx
import { GTMProvider } from '@elgorditosalsero/react-gtm-hook'
const App = () => {
const gtmParams = { id: 'GTM-ID' }
return (
My awesome app
)
}
```
### With custom DataLayer Name
```jsx
import { GTMProvider } from '@elgorditosalsero/react-gtm-hook'
const App = () => {
const gtmParams = {
id: 'GTM-ID',
dataLayerName: 'customDataLayerName'
}
return (
My awesome app
)
}
```
### With custom DataLayer name and initial values
```jsx
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 (
My awesome app
)
}
```
### Use a GTM custom environment
```jsx
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 (
My awesome app
)
}
```
_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
```jsx
import { GTMProvider, useGTMDispatch } from '@elgorditosalsero/react-gtm-hook'
const App = () => {
const gtmParams = {
id: 'GTM-ID',
dataLayerName: 'customDataLayerName'
}
return (
My awesome app
)
}
const MyAwesomeComp = () => {
const sendDataToGTM = useGTMDispatch()
const handleClick = () => sendDataToGTM({ event: 'awesomeButtonClicked', value: 'imAwesome' })
return (
My Awesome Comp
My Awesome Button
)
}
```
## 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.googletagmanager.com`): Provide customDomain to use a custom GTM domain |
| customScriptName | `String` | **NO** | default(`gtm.js`): Provide customScriptName to use custom file name |
### 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](https://elgorditosalsero-react-gtm-hook.netlify.app/)
## License
`react-gtm-hook` is under MIT License
## Contributors ✨
[](#contributors-)
Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
Guido Porcaro
💻 📖
Ben Yap
💻 📖 ⚠️
Cristian Livella
💻
Jason Finch
💻
Italo
💻
Gianluca La Manna
📖
Kazuki
💻
Stepan Mandryka
💻
Simon Smith
📖
Listiani
💻 📖
pkulcsarnr
💻 📖
sin
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!