@phntms/next-gtm
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.5 • Public • Published

    @phntms/next-gtm

    NPM version Actions Status PR Welcome

    A lightweight Next library to implement custom Google Tag Manager events.

    Introduction

    Extends @phntms/react-gtm with native support for Next.JS 11, 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.

    enableTracking()

    Parameter Type Default Notes
    id string undefined Same ID used in TrackingHeadScript. Example format: GTM-xxxxxx.
    enable boolean true Used to enable or disable tracking events.

    Note: This should only be used if needed, for example after user has consented to being tracked. You shouldn't need to toggle this in normal usage.

    Using trackEvent()

    For how to use trackEvent(), 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!

    Install

    npm i @phntms/next-gtm

    DownloadsWeekly Downloads

    237

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    22.1 kB

    Total Files

    26

    Last publish

    Collaborators

    • digitaljohn
    • paulomfj
    • a.marucci