Easily manage the Google Tag Manager via Hook
npm install react-gtm-hookWith this custom hook, you can easily use the Google Tag Manager with 0 config, you just have to pass the container ID!
- Installation
- How to use
- License
``bash`
$ pnpm add react-gtm-hookor
$ yarn add react-gtm-hookor
$ npm install react-gtm-hook
`jsx
import { GTMProvider } from "react-gtm-hook";
const App = () => {
const gtmConfig = { id: "GTM-ID" };
return (
My awesome app
);
}
`
`jsx
import { GTMProvider } from "react-gtm-hook";
const App = () => {
const gtmConfig = {
id: "GTM-ID",
dataLayerName: "customDataLayerName",
};
return (
My awesome app
);
};
`
`jsx
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 (
My awesome app
);
};
`
`jsx
import { GTMProvider } from "react-gtm-hook";
const App = () => {
const gtmConfig = {
id: "GTM-ID",
environment: {
gtm_auth: "my-auth-token",
gtm_preview: "preview-id",
},
};
return (
My awesome app
);
};
`
_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._
`jsx
import { GTMProvider, useGTMDispatch } from "react-gtm-hook";
const App = () => {
const gtmConfig = {
id: "GTM-ID",
dataLayerName: "customDataLayerName",
};
return (
Acme Store
);
};
const ProductCard = () => {
const send = useGTMDispatch();
const handleClick = () => send({ event: "buy", product: "product-123" });
return (
MIT