0.0.16 • Published 15 days ago
gtm-react-hook v0.0.16
📊 Easy-to-use React hooks for Google Tag Management based on TypeScript
🔥 Features
- Based on React hooks
- Fully typed with TypeScript
- Tiny bundle size ~1kB
- Support tools for custom GTM configuration
- React.js is the only dependency
- Logging events
- Test covered
🛠 Install
npm install gtm-react-hook
or
yarn add gtm-react-hook
🚀 Quickstart
import React, { useEffect } from "react";
import { useGTM } from "gtm-react-hook";
import { useLocation } from "react-router-dom";
const App = () => {
const { runGTM, eventGTM } = useGTM();
const location = useLocation();
useEffect(() => {
runGTM({
tagId: "GTM-XXXXXXX", // Provide your Tag ID
});
}, []);
useEffect(() => {
eventGTM("page_view", {
pathname: location.pathname,
});
}, [location.pathname]);
return <>...</>;
};
🧙🏻♂️ API
useGTM()
const { runGTM, eventGTM } = useGTM();
runGTM({ tagId: string, dataLayerName?: object, environment?: { gtm_auth: string, gtm_preview: string }, domain?: string, script?: string, nonce?: string, devMode?: boolean })
- tagId (required) - your GTM measurement ID;
- dataLayerName - custom name of dataLayer object;
- environment - GTM environment params;
- domain - custom GTM domain;
- script - custom GTM script's name;
- nonce;
- devMode - add logging for GTM initialization & events;
eventGTM(eventName: string, data?: object)
- eventName (required) - name of an event;
- data - payload of dataLayer (action, url, customerID, etc);
💅🏽 Examples
Page tracking
const { eventGTM } = useGTM();
const location = useLocation();
useEffect(() => {
eventGTM("page_view", { location: location.pathname });
}, [location]);
Track event
const { eventGTM } = useGTM();
const handleSaveCustomerInfo = (customer) => {
eventGTM("customer_info", {
customerId: customer.customerId,
customerRegion: customer.customerRegion,
});
};
return <button onClick={handleSaveCustomerInfo}>Submit</button>;
Custom data layer name
const { runGTM } = useGTM();
useEffect(() => {
runGTM({
gtmId: "GTM-XXXXXXX",
dataLayerName: "myGTMLayer", // all GTM events will be stored in `window.myGTMLayer` key
});
}, []);
Installation only after user has accepted analytics
const { runGTM } = useGTM();
useEffect(() => {
if (isUserConfirmAnalytics) {
runGTM({
gtmId: "GTM-XXXXXXX",
});
}
}, [isUserConfirmAnalytics]);
Logging
const { runGTM } = useGTM();
useEffect(() => {
runGTM({
gtmId: "GTM-XXXXXXX",
devMode: true, // add GTM logs to browser's console
});
}, []);
0.0.15
15 days ago
0.0.16
15 days ago
0.0.14
15 days ago
0.0.10
21 days ago
0.0.11
21 days ago
0.0.12
21 days ago
0.0.13
21 days ago
0.0.9
21 days ago
0.0.8
3 months ago
0.0.7
3 months ago
0.0.6
3 months ago
0.0.5
4 months ago
0.0.4
4 months ago
0.0.1
4 months ago
0.0.0
4 months ago
0.0.3
4 months ago
0.0.2
4 months ago
0.1.10
4 months ago
0.1.9
4 months ago
0.1.8
4 months ago
0.1.7
4 months ago
0.1.6
4 months ago
0.1.5
4 months ago
0.1.4
4 months ago
0.1.3
4 months ago
0.1.2
4 months ago
0.1.1
4 months ago
0.1.0
4 months ago