useGoogleTagManager

A simple Google Tag Manager wrapper in a React Hook style.

Installation

Installation with NPM:

npm install @zeekrey/useGTM

Installation with Yarn:

yarn add @zeekrey/useGTM

Usage

The most basic usage:

import useGoogleTagManager from "@zeekrey/usegtm"

const [gtmData, gtmEvent] = useGoogleTagManager('GTM-1234567')

// To add a variable to Google Tag Manager use the gtmData function
gtmData({myVar: 'data'})

// To trigger a event use the gtmEvent function
gtmEvent('myEvent') 

For a more individual usage:

import useGoogleTagManager from "@zeekrey/usegtm"

const [gtmData, gtmEvent] = useGoogleTagManager('GTM-1234567', {dataLayerName: 'myDataLayerName'})

React is a peer dependency

To use this you need at least React 16+ installed.

Google Tag Manager information

The Google Tag Manager stores all variables and event in an object called dataLayer available in the global scope.

Here is what you can do if you want to check if Google Tag Manager works properly or if you want to view all activities:

Post at Analytics mania

In Short: If you use Google Chrome, use this Extension. Otherwise look the source code of your page and check if you can find you GTM-Code somewhere. Or use the Google Tag Manager preview mode.

About this library

Although the name pretends the library is not a real hook in terms of React. It actually just uses the naming convention.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Development

Run test with

yarn test

or

yarn test:watch

To bundle everything up use

yarn build

We use the Atom convention for conventional commiting and changelog: https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-atom

License

MIT