Cookieを使用する前に同意を取ることがスタンダードになりつつある昨今、Googleアナリティクスの対応を調べてみると、しっかりと対応してました。
今回はgtag.jsを使いアナリティクスを設定されているサイトに対し、ユーザーが同意するまでCookieを使用しないように設定してみようと思います。
実装例
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} // gtag('consent', 'default', { 'ad_storage': 'denied', 'analytics_storage': 'denied', }); gtag('js', new Date()); gtag('config', 'G-XXXXXX'); </script> <script> function consentGranted() { gtag('consent', 'update', { 'ad_storage': 'granted', 'analytics_storage': 'granted' }); } </script> <body> ... <button onclick="consentGranted">Yes</button> ... </body>
基本的にドキュメントに書いてある通りですが、ad_storageだけではなく、analytics_storageも許可を取るまでdeniedにしています。
ボタンをクリックするまで、すなわち、window.consentGrantedを実行するまではCookieに値を書き込みません。
Next.jsでの実装例
_app.tsx
import type { AppProps } from 'next/app'; import Head from 'next/head'; function MyApp({ Component, pageProps }: AppProps) { return ( <> <Head> <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX" /> <script dangerouslySetInnerHTML={{ __html: ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('consent', 'default', { 'ad_storage': 'denied', 'analytics_storage': 'denied', 'wait_for_update': 500 }); gtag('js', new Date()); gtag('config', 'G-XXXXXX'); ` }} /> <script dangerouslySetInnerHTML={{ __html: ` function consentGranted() { gtag('consent', 'update', { 'ad_storage': 'granted', 'analytics_storage': 'granted' }); } `}} /> </Head> <Component { ...pageProps } /> </> ); } export default MyApp;
こんな感じです。
やっぱりwindow.consentGrantedを実行するまではCookieに値を書き込みません。