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 { useEffect } from 'react'
import useGTM from '@elgorditosalsero/react-gtm-hook'

const App = () => {
  const { init, UseGTMHookProvider } = useGTM()

  useEffect(() => init({ id: 'GTM-ID' }), [])

  return (
    <UseGTMHookProvider>
      <p>My awesome app</p>
    </UseGTMHookProvider>
  )
}

With custom DataLayer Name

import { useEffect } from 'react'
import useGTM from '@elgorditosalsero/react-gtm-hook'

const App = () => {
  const { init, UseGTMHookProvider } = useGTM()
  const gtmParams = {
    id: 'GTM-ID',
    dataLayerName: 'customDataLayerName'
  }

  useEffect(() => init(gtmParams), [])

  return (
    <UseGTMHookProvider>
      <p>My awesome app</p>
    </UseGTMHookProvider>
  )
}

With custom DataLayer name and initial values

import { useEffect } from 'react'
import useGTM from '@elgorditosalsero/react-gtm-hook'

const App = () => {
  const { init, UseGTMHookProvider } = useGTM()
  const gtmParams = {
    id: 'GTM-ID',
    dataLayer: {
      'my-custom-value': 'value',
      'my-awesome-value': 'awesome'
    },
    dataLayerName: 'customDataLayerName'
  }

  useEffect(() => init(gtmParams), [])

  return (
    <UseGTMHookProvider>
      <p>My awesome app</p>
    </UseGTMHookProvider>
  )
}

Use a GTM custom environment

import { useEffect } from 'react'
import useGTM from '@elgorditosalsero/react-gtm-hook'

const App = () => {
  const { init, UseGTMHookProvider } = useGTM()
  const gtmParams = {
    id: 'GTM-ID',
    environment: {
      gtm_auth: 'my-auth-token',
      gtm_preview: 'preview-id'
    }
  }

  useEffect(() => init(gtmParams), [])

  return (
    <UseGTMHookProvider>
      <p>My awesome app</p>
    </UseGTMHookProvider>
  )
}

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 { useEffect } from 'react'
import useGTM from '@elgorditosalsero/react-gtm-hook'

const App = () => {
  const { init, UseGTMHookProvider } = useGTM()
  const gtmParams = {
    id: 'GTM-ID',
    dataLayerName: 'customDataLayerName'
  }

  useEffect(() => init(gtmParams), [])

  return (
    <UseGTMHookProvider>
      <div>
        <p>My awesome app</p>
        <MyAwesomeComp />
      </div>
    </UseGTMHookProvider>
  )
}

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>
  )
}

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: `GMT-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