react-gtm-ts

🚀 react-gtm-ts

This is a library to facilitate the implementation of Google Tag Manager.

Installation

npm install react-gtm-ts
or
yarn add react-gtm-ts

Usage

Add ReactTagManager.init passing GTM code in app or _app (nextjs):

import { ReactTagManager } from 'react-gtm-ts';

import { NextPageWithLayout } from '@Core/types/next';
import type { AppProps } from 'next/app';

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

ReactTagManager.init({
  code: 'GTM-XXXX', // GTM Code
  debug: false, // debug mode (default false)
  performance: false, // starts GTM only after user interaction (improve initial page load)
});

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  return <Component {...pageProps} />;
}

export default MyApp;

Now just use the ReactTagManager.action for the actions passing the event and the variables (optional)

import { ReactTagManager } from 'react-gtm-ts';

import { NextPageWithLayout } from '@Core/types/next';

const Home: NextPageWithLayout = () => {
  return (
    <div>
      <button
        type="button"
        onClick={() => {
          ReactTagManager.action({
            event: 'click_all_button',
            clickText: 'login',
          });
        }}
      >
        login
      </button>
    </div>
  );
};

export default Home;

Learn More

To learn more about Google Tag Manager, take a look at the following resource documentation.