DEV Community

Cover image for Google Tag Manager Hook for React
Guido Porcaro
Guido Porcaro

Posted on

Google Tag Manager Hook for React

Google Tag Manager is a powerful tool from Google for manage tags (like cookies, pixels, scripts, etc...) on your app/website from a single entry point and without editing your codebase!

The GTM is an awesome tool for marketers and developers for adding external libs, handling events and analytics tags without affecting the codebase and, above all, give to the marketing team some working autonomy without deploy a new version of the app/website.

Why?

Why I wrote this Hook?

Basically because we are in the Hook era and, at the moment of writing, there was not any hook to handle it.

Overview

The Hook will inject the GTM scripts to the document and you don't have to edit your index.html anymore.

You can also pass as parameters a custom dataLayer name (it will replace the default dataLayer) and custom values/variables to it.

There is also a method to send custom data/events to the GTM (is a wrapper for the dataLayer.push())

Example Snippets

Basic/Default usage



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

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

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

  return <p>My awesome app</p>
}


Enter fullscreen mode Exit fullscreen mode

Send event (after initialization)



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


Enter fullscreen mode Exit fullscreen mode

So, what do you think? Will you try it?

If you think would be useful an article with more example and/or screenshot also from the Tag Manager, let me know in the discussion section

Pull Request, contributions and issue are welcome!

If this Hook was useful to you and you like it, please add a reaction and/or leave a comment and star on GitHub!

Repo

GitHub logo elgorditosalsero / react-gtm-hook

Easily manage the Google Tag Manager via Hook

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
Enter fullscreen mode Exit fullscreen mode

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>
  )
}
Enter fullscreen mode Exit fullscreen mode

With custom DataLayer Name

import { GTMProvider } from
Enter fullscreen mode Exit fullscreen mode

Top comments (3)

Collapse
 
katfromtheventury profile image
katfromtheventury • Edited

Hi Guido, thanks for the helpful post! Can you please explain what the downside/difference is of just puting the code into the index.html?

Collapse
 
elgorditosalsero profile image
Guido Porcaro

Hi katfromtheventury, thanks and sorry for the late reply.

Basically, when u put the script of the GTM into the index.html, it will load immediately and, to push events you'll have to create a custom hook or use always the window.dataLayer.push (or the custom name you've defined).

With this hook, you can load the GTM when u want, maybe not at the bootstrap of the app, maybe layer or maybe by a custom trigger.

You can also configure the tag manager in the same place without doing it editing the script generated by Google.

Hope this help!

Collapse
 
unrealmanu profile image
Manuel

Practical and useful, good!