/next-google-tag-manager

Easily implement Google Tag Manager in your Next 13+ project

Primary LanguageTypeScriptMIT LicenseMIT

@magicul/next-google-tag-manager

npm bundle size npm GitHub issues npm GitHub Repo stars

A lightweight Next 13 library to easily implement Google Tag Manager in your projects. This package forwards all of the page changes to Google Tag Manager so you can easily track your users.

Installation

Install this package with npm

npm i @magicul/next-google-tag-manager

Or with yarn

yarn add @magicul/next-google-tag-manager

Usage

Using the GoogleTagManager component

To initialize Google Tag Manager, add <GoogleTagManager /> to app/layout.tsx like this:

import GoogleTagManager from '@magicul/next-google-tag-manager';

const RootLayout = ({ children }) => (
  <html lang="en">
    <body>
      <GoogleTagManager id="GTM-XXXXX" />
      {children}
    </body>
  </html>
);

Note: This package utilizes next/script, which means you can't place it inside a next/head.

Configuring

To customize the way you load Google Tag Manager, you can pass the following props to the component:

Prop name Type Default value Description
id string - The ID of your Google Tag Manager container
server string www.googletagmanager.com The tagging server that is used, you can configure your own server here or use the default Google Tag Manager server by default. This is used for server side tagging. Please only put the domain, subdomain and top level domain here to make it work correctly.
auth string - Authentication string for the container configuration.
environment string - The environment that is used, see Environments - Tag Manager Help for more information