Как настроить повар Google Analytics ie только после того, как для другого согласованного блюда ie установлено значение "true"? - PullRequest
0 голосов
/ 11 февраля 2020

Я использую React / Next js для своего веб-сайта и библиотеку ie -consent согласия. Это создает всплывающее окно, где пользователь может согласиться с политикой повара ie. Если согласовано, устанавливается повар ie: CookieConsent со значением "true".

Кроме того, я хочу использовать Google Analytics для отслеживания пользователей, если они согласны (нажмите Принять во всплывающем окне).

Но это не работает: файлы cookie Google Analyti c _ga и G_ENABLED_IDPS устанавливаются до того, как пользователь нажимает на всплывающее окно.

Забавно, я понял это только в браузере Microsoft Edge. В Chrome эти файлы cookie не устанавливаются до того, как пользователь дает согласие.

Это мой текущий код в _document. js:

<Head>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}            
            gtag('js', new Date());
            
          `}}
          />
          
          <script type="text/javascript" src="/static/blockReactDevTools.js" />
          
          <link href="https://fonts.googleapis.com/css?family=Cabin&display=swap" rel="stylesheet" />

</Head>

Я поиграл, используя некоторые подсказки из inte rnet, и придумал эту версию, которая также не работает:

<Head>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script 
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
          />

          <script        
            dangerouslySetInnerHTML={{
                __html: `
              
              var gtagId = '${GA_TRACKING_ID}';

              window['ga-disable-' + gtagId] = true;

              window.dataLayer = window.dataLayer || [];

              function gtag(){dataLayer.push(arguments);}   

              gtag('js', new Date());

              function getCookie(cname) {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for(var i = 0; i < ca.length; i++) {
                  var c = ca[i];
                  while (c.charAt(0) == ' ') {
                    c = c.substring(1);
                  }
                  if (c.indexOf(name) == 0) {
                    return c.substring(name.length, c.length);
                  }
                }
                return "";
              }

              window.addEventListener("load", function() {
                var isCookieConsentTrue = getCookie("CookieConsent") == 'true';

                if(isCookieConsentTrue){
                    window['ga-disable-' + gtagId] = false;
                    alert("Cookie Consent given!");
                    
                  }  else {
                    alert("Cookie Consent NOT given!");
                    window['ga-disable-' + gtagId] = true;
                  }
              });          
            
            `}}
          />

          <script type="text/javascript" src="/static/blockReactDevTools.js" />

          
          <link href="https://fonts.googleapis.com/css?family=Cabin&display=swap" rel="stylesheet" />

</Head>

Я не знаю, является ли это следующей js спецификацией c, или чем-то простым глупым генералом.

Может кто-нибудь направить меня к рабочему решению?

РЕДАКТИРОВАТЬ: я попробовал "предложение Universal Analytics" предложение. Предлагаемое решение делает мои вспомогательные функции для регистрации событий и просмотров страниц неудачными (см. Ниже). Нужен ли мне также менеджер gtag?

enter image description here

1 Ответ

2 голосов
/ 14 февраля 2020

То, как вы это делали, является отказом. Повар GA ie всегда устанавливается, как только клиент запрашивает gtag. js. Это, однако, не соответствует GDPR. Вам нужно посмотреть Opt-in , чтобы не готовить GA GA ie без согласия.

Общая идея - asyn c загрузить gtag. js как только клиент согласился. Для полной функциональности функций gtag вы должны загружать gtag. js при каждой загрузке страницы, если клиент уже согласился. Лучшая практика для этого - приготовление cookie-согласия ie с согласия. Для этого есть широко используемая js библиотека, которая генерирует всплывающее окно и задает для вас готовку согласия ie.

Ссылка: https://www.osano.com/cookieconsent/documentation/javascript-api/ Вы можете сгенерировать код для макета вашего баннера повара ie, нажав Начать кодирование здесь: https://www.osano.com/cookieconsent/download/ https://github.com/osano/cookieconsent/blob/dev/examples/example-7-javascript-api.html

Следующий код должен быть реализован на каждой странице в разделе <head>:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.1/cookieconsent.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.1/cookieconsent.min.js" data-cfasync="false"></script>
<script>
var popup;
window.addEventListener('load', function(){
  window.cookieconsent.initialise({
   //set revokeBtn if you don't want to see a tiny pullup bar overlapping your website
   //if revokeBtn is set, make sure to include a link to cookie settings in your footer
   //you can open your banner again with: popup.open();
   //revokeBtn: "<div class='cc-revoke'></div>",
   type: "opt-in",
   theme: "classic",
   palette: {
       popup: {
           background: "#000",
           text: "#fff"
        },
       button: {
           background: "#fd0",
           text: "#000"
        }
    },
    onInitialise: function(status) {
      // request gtag.js on page-load when the client already consented
      if(status == cookieconsent.status.allow) setCookies();
    },
    onStatusChange: function(status) {
      // resquest gtag cookies on a new consent
      if (this.hasConsented()) setCookies();
      else deleteCookies(this.options.cookie.name)
    },
/* enable this to hide the cookie banner outside GDPR regions
    law: {
      regionalLaw: false,
    },
    location: true,
    },
*/
    function (p) {
        popup = p;
  })
});

//it is absolutely crucial to define gtag in the global scope
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${GA_TRACKING_ID}', {'anonymize_ip': true});

function setCookies() {
    var s = document.createElement('script');
    s.type = "text/javascript"
    s.async = "true";
    s.src = "https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}";
    var x = document.getElementsByTagName('script')[0];
    x.parentNode.insertBefore(s, x);

    // you can add facebook-pixel and other cookies here
};

function deleteCookies(cookieconsent_name) {
        var keep = [cookieconsent_name, "DYNSRV"];

        document.cookie.split(';').forEach(function(c) {
            c = c.split('=')[0].trim();
            if (!~keep.indexOf(c))
                document.cookie = c + '=;' + 'expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/';
        });
};
</script>

Примечание: Удостоверьтесь, что gtag. js загружается при каждой загрузке страницы после того, как для согласия ie было установлено allow . Используйте event_callback, чтобы увидеть, было ли отправлено событие gtag. Вы можете использовать функцию gtag без проверки согласия-10 *. Если gtag. js отсутствует, он просто добавляет элементы в window.dataLayer без какой-либо функциональности. Чтобы избежать ошибок, function gtag() должен быть объявлен в глобальной области видимости и перед использованием.

// cookie-check is not necessary when gtag is in global scope
//if(popup.hasConsented()) { 
    gtag('event', 'sign_up', {
            'method': 'Google',
            'event_callback': function(){alert('event was sent');}
        });
//}

Вам не нужно отправлять дополнительное событие просмотра страницы, если вы не хотите указать путь вручную. setCookies() уже отправляет текущий путь к документу вместе с конфигом

...