React Google Tag Manager

Very light React library for use easily the Google Tag Manager

• Installation
• Usage
• Props and options
• Hooks

Installation

yarn add @tracktor/react-google-tag-manager

or

npm install @tracktor/react-google-tag-manager

Usage

import { GoogleTagManagerProvider, useGoogleTagManager } from "@tracktor/react-google-tag-manager";

const App = () => (
  <GoogleTagManagerProvider id="YOUR_GOOGLE_TAG_ID">
    <YourComponent />
  </GoogleTagManagerProvider>
);

const YourComponent = () => {
  const { sendEvent } = useGoogleTagManager();

  return (
    <main>
      <h1>Your Component</h1>
      <button type="button" onClick={() => sendEvent({ event: "eventName", value: "someValue" })}>
        Click me
      </button>
    </main>
  );
};

export default App;

Props and options

Your can provide some props and options to the provider.

import { GoogleTagManagerProvider } from "@tracktor/react-google-tag-manager";

const App = () => (
  <GoogleTagManagerProvider id="YOUR_GOOGLE_TAG_ID" options={{ dataLayerName: "..." }}>
    ...
  </GoogleTagManagerProvider>
);

export default App;

| Props | Type | Default | Description | |---------|------------|-----------|-------------------------------------------------------------------------------------------------------------------------------| | id | GTM-XXXXXX | undefined | Define the Google Tag Manager ID id. You can create an account to get an ID here : https://tagmanager.google.com/?hl=fr#/home | | options | object | undefined | Provider options |

| Option | Type | Default | Description | |---------------|--------|-----------------------------------------|-------------------------| | scriptUrl | string | https://www.googletagmanager.com/gtm.js | Set script url to load | | dataLayerName | string | dataLayer | Set the data layer name |

Hooks

useGoogleTagManager

| Export | type | Description | |-----------|----------|----------------| | sendEvent | function | Send GTM event | | id | string | The GTM id |