README
@phntms/next-gtm
A lightweight Next library to implement custom Google Tag Manager events.
Introduction
Extends @phntms/react-gtm with native support for Next.JS 12, utilizing the new Script Component to automatically prioritize loading of third-party scripts to improve performance.
Installation
Install this package with npm
.
npm i @phntms/next-gtm
Usage
<TrackingHeadScript />
Property | Type | Default | Notes |
---|---|---|---|
id | string |
undefined | ID that uniquely identifies GTM Container. Example format: GTM-xxxxxx . |
disable | boolean |
false | Used to disable tracking events. Use if you want user to consent to being tracked before tracking events. |
To initialize GTM, add TrackingHeadScript
to the head
of the page.
This package utilizes next/script, which means you can't place it inside a next/head
. Further, TrackingHeadScript
should not be used in pages/_document.js
as next/script
has client-side functionality to ensure loading order.
Example usage:
import type { AppProps } from "next/app";
import { TrackingHeadScript } from "@phntms/next-gtm";
const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID || "";
const App = ({ Component }: AppProps) => (
<>
<TrackingHeadScript id={GA_TRACKING_ID} />
<Component />
</>
);
export default App;
Note: If used alongside any cookie consent scripts, <TrackingHeadScript />
must be loaded after.
Using trackEvent() and enableTracking()
For how to use trackEvent()
, enableTracking()
, learn more about EventDataProps
and how this library extends window.dataLayer
, please reference @phntms/react-gtm.
🍰 Contributing
Want to get involved, or found an issue? Please contribute using the GitHub Flow. Create a branch, add commits, and open a Pull Request or submit a new issue.
Please read CONTRIBUTING
for details on our CODE_OF_CONDUCT
, and the process for submitting pull requests to us!