@gshah.dev/transparency NPM

Transparency

Consent Manager for Next.js v14. (App Router Only)

What is Transparency

Very simply transparency is the easiest way to configure and manage Google Tag Manager's Consent Mode v2 in Next.js applications that use the App Router. We handle all the functionality internally and expose a provider which you can wrap around your consent banner. You can also use our exposed utiltiy functions to help manage the consent across your application.

transparency-bg

This tool is currently in pre-release Beta

Due to my own lack of familiarity with managing packages via npm, I will be moving slowing and attempting not to break things. Also this package depends on the experimental @next/third-parties/google which was made as a collaboration between Google and the Next.js team. The package uses the built-in Next.js Script component to optimize the loading of the standard Google Tag Manager script. The package uses a service worker to handle your GTM events giving us a very effective way of using Google Tag Manage and mitigating all previously existing perfomance issues caused by the script.

Because of this methodology this is safe to use in your projects today, but I could really use your feedback on how to make this package better and ensure that it does in fact meet your needs and comply with GTM's consent mode v2 policies and standards. For the near future please know that the only breaking change you should expect is the path we use to import the CookieConsentProvider into our applications.

Requirements

Next.js v14.1 +
App Directory

Dependencies

cookies-next
@next/third-parties

Disclaimer
I am not the most versed in regards to publishing open-source projects to npm, and so there is an issue with how this package is bundled which is evidenced by how you are currently forced to import the CookieConsetProvider into your applicaiton.

Installation

npm install @gshah.dev/transparency

Usage

// app/layout.tsx


import { CookieConsentProvider } from '@gshah.dev/transparency/dist/context/consent-provider';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body>
          {children}
        
          <CookieConsentProvider
          consentCookie="app-consent"
          necessaryTags={[
            "functionality_storage",
            "personalization_storage",
          ]}
        >
          <Banner/>
        </CookieConsentProvider>

      </body>
    </html>
  );
}

Props

Name	Default	required	Description
consentCookie	`'app-consent'`	no	key name of the cookie used to manage user's consent
necessaryTags	`undefined`	yes	array of google consent tags for personalization and functionality storage consent
analyticsTags	`undefined`	no	array of google consent tags for ads, analytics and monitoring related storage consent.
enabled	`true`	no	globally enable or disable the `CookieConsentProvider`
redact	`true`	no	adds the global `'ads_data_redaction'` consent which redacts all sensitive user related data from the tracking data.
dataLayerName	'dataLayer'	no	sets the name used for the dataLayer object added by google tag manager to the user's window object.
gtagName	'gtag'	no	sets the name used for the gtag function that is used to handle the user's google-tag-manager consent.