Next JS 如何处理 cookie 同意？

Question

在我的 Next JS 网站上，我需要实现 Google Analytics (GA) 和 Facebook Pixel (FP)，我根据文档进行了操作，并且据我所知正在工作。现在，我需要使所有内容都符合 GDPR，以便只有在明确接受 cookie 后，这些服务才能发送信息。我不确定我是否以正确/最佳的方式做到了这一点，所以如果有人比我更有知识的人可以看看，我将不胜感激。我对弹出窗口使用了react-cookie-consent，它添加了一个带有布尔值的cookie，指示cookie是被接受还是被拒绝。通过以下代码，我想确保： 1. 第一次访问时，GA 和 FB 不会被激活，直到单击接受（请参阅handleAccept 函数）。2. 在随后的访问中，当用户之前接受了 cookie 时，GA 和 FB 将处于活动状态。这是我的 app.js：

import "../styles/globals.css";
import CookieConsent from "react-cookie-consent";
import * as gtag from "../lib/gtag";
import * as fbq from "../lib/fpixel";
import { useEffect } from "react";
import Script from "next/script";
import { useRouter } from "next/router";

function MyApp({ Component, pageProps }) {
  // for Google analytics and Facebook tracking
  const router = useRouter();
  useEffect(() => {
    fbq.pageview();
    const handleRouteChange = (url) => {
      gtag.pageview(url);
      fbq.pageview();
    };
    router.events.on("routeChangeComplete", handleRouteChange);
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);
  
  // for subsequent page visits
  useEffect(() => {
    if (checkConsented()) {
      window.gtag("consent", "update", {
        ad_storage: "granted",
        analytics_storage: "granted",
      });
      window.fbq("consent", "grant");
    }
  }, []);

  function handleAccept() {
    window.gtag("consent", "update", {
      ad_storage: "granted",
      analytics_storage: "granted",
    });
    window.fbq("consent", "grant");
  }

  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
      />
      <Script
        id="gtag-init"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('consent', 'default', {
              'ad_storage': 'denied',
              'analytics_storage': 'denied'
            });
            gtag('js', new Date());
            gtag('config', '${gtag.GA_TRACKING_ID}', {
              page_path: window.location.pathname,
            });
          `,
        }}
      />
      <Script
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `
            !function(f,b,e,v,n,t,s)
            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
            n.queue=[];t=b.createElement(e);t.async=!0;
            t.src=v;s=b.getElementsByTagName(e)[0];
            s.parentNode.insertBefore(t,s)}(window, document,'script',
            'https://connect.facebook.net/en_US/fbevents.js');
            fbq('consent', 'revoke');
            fbq('init', ${fbq.FB_PIXEL_ID});
          `,
        }}
      />
      <CookieConsent
        buttonText="Accept"
        enableDeclineButton
        onAccept={() => {
          handleAccept();
        }}
        declineButtonText="Decline"
      >
        We use cookies to improve your experience on our site.
      </CookieConsent>
      <Component {...pageProps} />
    </>
  );
}

// function for checking whether visitor has consented before
function checkConsented() {
  let decodedCookie = decodeURIComponent(document.cookie);
  decodedCookie = decodedCookie.split(";");
  decodedCookie = decodedCookie.find((cookie) => {
    return cookie.substring(0, 13) === "CookieConsent";
  });
  if (!decodedCookie) {
    return false;
  }
  if (decodedCookie.substring(14, 18) === "true") {
    return true;
  }
  return false;
}

export default MyApp;

这对我的 2 个目标有用吗？有更好的方法吗？

Answer 1

根据包的文档，您可以像这样检索 cookie 的值：

import CookieConsent, { Cookies, getCookieConsentValue } from "react-cookie-consent";

console.log(getCookieConsentValue());

因此，您可以跳过 checkConsented() 函数，而只使用 getCookieConsentValue() 代替。