@tracktor/react-google-tag-manager v1.2.4

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;

Hooks

useGoogleTagManager