みかづきブログ・カスタム

基本的にはちょちょいのほいです。

Googleアナリティクス(gtag.js)実装時に、ユーザーの同意を得てからCookieを使用するようにする 📈

f:id:kimizuka:20220107193335p:plain

Cookieを使用する前に同意を取ることがスタンダードになりつつある昨今、Googleアナリティクスの対応を調べてみると、しっかりと対応してました。

developers.google.com

今回は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にしています。

developers.google.com

ボタンをクリックするまで、すなわち、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に値を書き込みません。