React Google Tag Manager Hook

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

Installation

$ pnpm add react-gtm-hook
# or
$ yarn add react-gtm-hook
# or
$ npm install react-gtm-hook

How to use

Basic

import { GTMProvider } from "react-gtm-hook";

const App = () => {
  const gtmConfig = { id: "GTM-ID" };

  return (
    <GTMProvider config={gtmConfig}>
      <div>My awesome app</div>
    </GTMProvider>
  );
}

With custom DataLayer Name

import { GTMProvider } from "react-gtm-hook";

const App = () => {
  const gtmConfig = {
    id: "GTM-ID",
    dataLayerName: "customDataLayerName",
  };

  return (
    <GTMProvider config={gtmConfig}>
      <div>My awesome app</div>
    </GTMProvider>
  );
};

With custom DataLayer name and initial values

import { GTMProvider } from "react-gtm-hook";

const App = () => {
  const gtmConfig = {
    id: 'GTM-ID',
    dataLayer: {
      "my-custom-value": "value",
      "my-awesome-value": "awesome",
    },
    dataLayerName: "customDataLayerName",
  };

  return (
    <GTMProvider config={gtmConfig}>
      <div>My awesome app</div>
    </GTMProvider>
  );
};

Use a GTM custom environment

import { GTMProvider } from "react-gtm-hook";

const App = () => {
  const gtmConfig = {
    id: "GTM-ID",
    environment: {
      gtm_auth: "my-auth-token",
      gtm_preview: "preview-id",
    },
  };

  return (
    <GTMProvider config={gtmConfig}>
      <div>My awesome app</div>
    </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 "react-gtm-hook";

const App = () => {
  const gtmConfig = {
    id: "GTM-ID",
    dataLayerName: "customDataLayerName",
  };

  return (
    <GTMProvider config={gtmConfig}>
      <div>
        <div>Acme Store</div>
        <ProductCard />
      </div>
    </GTMProvider>
  );
};

const ProductCard = () => {
  const send = useGTMDispatch();

  const handleClick = () => send({ event: "buy", product: "product-123" });

  return (
    <div>
      <div>Product Name</div>
      <button onClick={handleClick}>Buy</button>
    </div>
  );
}

License

MIT