Skip to content

sin-to-jin/react-gtm-hook

Β 
Β 

Repository files navigation

MAINTAINERS WANTED, PLEASE REACH OUT IF YOU'RE INTERESTED

React Google Tag Manager 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

$ 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.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

License

react-gtm-hook is under MIT License

Contributors ✨

All Contributors

Thanks goes to these wonderful people (emoji key):

Guido Porcaro
Guido Porcaro

πŸ’» πŸ“–
Ben Yap
Ben Yap

πŸ’» πŸ“– ⚠️
Cristian Livella
Cristian Livella

πŸ’»
Jason Finch
Jason Finch

πŸ’»
Italo
Italo

πŸ’»
Gianluca La Manna
Gianluca La Manna

πŸ“–
Kazuki
Kazuki

πŸ’»
Stepan Mandryka
Stepan Mandryka

πŸ’»
Simon Smith
Simon Smith

πŸ“–
Listiani
Listiani

πŸ’» πŸ“–
pkulcsarnr
pkulcsarnr

πŸ’» πŸ“–
sin
sin

πŸ’»

This project follows the all-contributors specification. Contributions of any kind welcome!

About

Easily manage the Google Tag Manager via Hook

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 96.8%
  • HTML 3.2%