npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@gshah.dev/transparency

v0.0.45

Published

A package for Google Tag Manager integration and consent handling in Next.js applications

Downloads

8

Readme

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. |

Roadmap

  • [ ] Fix: build module issue.
  • [ ] Add support for 3rd party/custom const tags.