blogブログ

同意設定機能の追加(ウェブ)

同意設定機能の追加(ウェブ)
【Cookie同意のボタンを実装したい】

背景:Googleアナリティクスのデータの収集目的だけでは、同意の確認は不要だが、同意ボタンが自作可能か検証した。

目標:同意ボタンを押すとGoogleタグの機能を許可し、Cookieの取得を開始

結果:公式サイトを参照し設定したところ、analytics_storageについて、目標の挙動をとることがGoogleアナリティクスで確認された。

方法:<head>タグに下記コードを追加し、ボタンを用意した。ボタンが押された時に、consentGrantedAll()を実行させる。
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXX"></script>の記述も忘れないこと。
参考サイト(公式): https://developers.google.com/tag-platform/security/guides/consent?hl=ja#gtag.js_1

    var allCookies = document.cookie;
    var result = allCookies.indexOf('gtagGranted');

    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }

    if(result == -1){
      // Define dataLayer and the gtag function.
      // Set default consent to 'denied' as a placeholder
      // Determine actual values based on your own requirements
      gtag('consent', 'default', {
        'ad_storage': 'denied',
        'ad_user_data': 'denied',
        'ad_personalization': 'denied',
        'analytics_storage': 'denied'
      });
    }
  
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXX');
  
    function consentGrantedAll() {
      gtag('consent', 'update', {
        'ad_storage': 'granted',
        'ad_user_data': 'granted',
        'ad_personalization': 'granted',
        'analytics_storage': 'granted'
      });
      document.cookie = 'gtagGranted=ok;path=/';
    }
  

TOP