Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@elgorditosalsero/react-gtm-hook

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@elgorditosalsero/react-gtm-hook

Easily manage the Google Tag Manager via Hook

  • 2.2.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
18K
decreased by-10.02%
Maintainers
1
Weekly downloads
 
Created
Source

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
  • 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 { 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

NameTypeRequiredInfo
idStringYESThe container ID from the Tag Manager, it looks like: GTM-0T0TTT
dataLayerObjectNOCustom values for the dataLayer, like {'my-init-prop': 'value'}
dataLayerNameStringNOCustom name for the dataLayer, if not passed, it will be the default: dataLayer
environmentObjectNOProvide the gtm_auth and gtm_preview parameters to use a custom GTM environment
nonceStringNOServer generated nonce. see https://developers.google.com/tag-manager/web/csp
injectScriptBooleanNOdefault(true): Decide if the GTM Script is injected, see #30. Also allows for delayed injection by toggling true later in flow

SentDataToGTM

NameTypeRequiredInfo
dataObjectYESThe 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!

Keywords

FAQs

Package last updated on 27 Dec 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc