Nondeterministic Postrequisite Metaprotocol

    @elgorditosalsero/react-gtm-hook
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.8 • Public • Published

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

    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

    💻 📖

    Ben Yap

    💻 📖 ⚠️

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

    Install

    npm i @elgorditosalsero/react-gtm-hook

    DownloadsWeekly Downloads

    4,262

    Version

    2.0.8

    License

    MIT

    Unpacked Size

    59.1 kB

    Total Files

    14

    Last publish

    Collaborators

    • elgorditosalsero