Implementing Google Analytics with @next/third-parties/google and vanilla-cookieconsent

[SkyBulk]

I'm trying to implement Google Analytics in a Next.js application using the @next/third-parties/google package in conjunction with vanilla-cookieconsent to manage cookie consent. The project structure is as follows:

_app.js

import CookieConsentComponent from '@/components/CookieConsent';

export default function CustomApp({ Component, pageProps }) {
   return (
    <>
        <Component {...pageProps} />;
        <CookieConsentComponent />
    </>
  );
}

CookieConsent.tsx

import React, { useEffect } from 'react';
import * as CookieConsent from 'vanilla-cookieconsent';
import pluginConfig from './CookieConsentConfig';

const CookieConsentComponent = () => {
  useEffect(() => {
    CookieConsent.run(pluginConfig);
  }, []);
};

export default CookieConsentComponent;

CookieConsentConfig.ts

import { CookieConsentConfig, loadScript, acceptedCategory } from 'vanilla-cookieconsent';
import { Analytics } from "@vercel/analytics/react";

const pluginConfig: CookieConsentConfig = {
  guiOptions: {
      consentModal: {
          layout: "box",
          position: "bottom left",
          equalWeightButtons: true,
          flipButtons: false
      },
      preferencesModal: {
          layout: "box",
          position: "right",
          equalWeightButtons: true,
          flipButtons: false
      }
  },

  onFirstConsent: function () {
    localStorage.setItem('cookieConsent', 'true');
  },

  onConsent: function ({ cookie }) {
    console.log('onConsent fired ...');
    // console.log(cookie.categories.includes('analytics')?'dmeo':'yo')
    localStorage.setItem('cookieConsent', 'true');
    
  },

  onChange: function ({ changedCategories, cookie }) {
    console.log('onChange fired ...');
    // localStorage.setItem('cookieConsent', 'true');
  },

  categories: {
    necessary: {
      readOnly: true,
      enabled: true,
    },
    analytics: {
      autoClear: {
        cookies: [
          {
            name: /^(_ga|_gid)/,
          },
        ],
      },
    },
  },

 ...rest
};

export default pluginConfig;

I'm not sure how to properly integrate Google Analytics using @next/third-parties/google within this setup. Specifically, I'm struggling with the following:

1. Properly loading and unloading the Google Analytics script based on user consent.
2. Ensuring that the analytics code runs only when the user consents to analytics cookies.
3. Making sure the setup is compatible with server-side rendering in Next.js.

[nickserv]

There may be a more robust way, but the easiest way would probably be to just disable cookies and use whatever telemetry is on the server.

[SkyBulk]

I had to change @next/third-parties/google with 'react-ga4' and make a package implementation with all analytics events, and methods, however I am not sure how to detect if a radio is active if not

[WolverStones]

if (CookieConsent.acceptedCategory('analytics')) {
console.log("Category analytics enable")
}

To detect if a category is active or not it is possible to use this API Reference.

https://cookieconsent.orestbida.com/reference/api-reference.html#acceptedcategory

[pc-perrycima]

Can someone help me to understand how to use the plugin with next 14?

[davidmann4]

Hi, i managed to make it work with my project:

first create a useState and update it when the js lib sends updates to the current state

import { GoogleTagManager } from '@next/third-parties/google'
import { useEffect, useState } from 'react'
//...
const [analyticsAccepted, setAnalyticsAccepted] = useState(CookieConsent.acceptedCategory('analytics'));
useEffect(() => {
  CookieConsent.run({
    onConsent: () => {
      setAnalyticsAccepted(CookieConsent.acceptedCategory('analytics'))				
    },
    onChange: () => {
      setAnalyticsAccepted(CookieConsent.acceptedCategory('analytics'))				
   },

then render the GoogleTagManager like this

{analyticsAccepted ? (
  <GoogleTagManager gtmId="G-THX00DAVID" />
): null}			

cheers

and thanks for this cool lib - been using it in a few projects now!