Google Analytics (GA4) implementation
in Next.JS 14 (App Router) with Opt-in Cookie Banner

This is a minimal example of Google Analytics (GA4) in Next.JS 14 with an opt-in cookie banner.

Setup:

1. Install the node modules with "npm install".
2. Replace the Google Analytics ID "GA_MEASUREMENT_ID" in the layout.tsx file with your own.
3. Run the development server with "npm run dev".

Information:

• The cookie key (i.e. name) is "cookie_consent" and the value is set to true or false when you click Accept or Decline, respectively.
• The cookie is stored in local storage. If you Accept or Decline the Cookie, you'll have to delete it from local storage to reset the banner.

Demo: