Manualna konfiguracja zbierania zgód

Wstrzymanie wywołania skryptu

Aby skrypt Google Analytics nie został wywołany w momencie załadowania strony, zanim użytkownik wyrazi odpowiednie zgody:

1. Wejdź w ustawienia swojej strony i znajdź skrypt Google Analytics
2. Zmień parametr type na text/plain
3. Dodaj atrybut data-easycookie-{type} który jest zgodny z rodzajem zgody jaka jest wymagana

Dostępne typy zgód:

• data-easycookie-aduser
• data-easycookie-adpersonalization
• data-easycookie-analytics
• data-easycookie-functionality
• data-easycookie-personalization
• data-easycookie-security

Zobacz jak zmieć swój skrypt na poniższym przykładzie.

Oryginalny skrypt:

<script type="text/javascript">
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXXX-X', 'auto');
ga('send', 'pageview');
</script>

Zmieniony skrypt: 

<script type="text/plain" data-easycookie-targeting>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXXX-X', 'auto');
ga('send', 'pageview');
</script>

‍
Skrypt Easycookie działa w bardzo prosty sposób. Po udzieleniu zgody na dany typ cookie, skrypty o tym typie mają automatycznie przywracany prawidłowy type=text/javascript. W praktyce powoduje to ich uruchomienie w momencie wyrażenia zgody.

Asynchroniczne uruchamianie skryptów

Problem jaki może wystąpić dla takich skryptów jest taki, że są uruchamiane na zdarzenie z DOM, np. DOMContentLoaded. W momencie, kiedy to zdarzenie wystąpi nie były one jeszcze dostępne, bo były nadal blokowane przez Easycookie. Najbardziej popularnym przykładem takiego skryptu gdzie taka asynchroniczna sytuacja występuje jest pixel Meta.

W tej sytuacji, zachęcamy Cię do podłączania skryptu przez GTM.  Jeżeli jednak zdecydujesz się na manualną konfigurację, postępuj zgodnie z poniższymi krokami:

1. Usuń tag noscript.
2. Wykorzystaj zdarzenia dostępne z Consent API z Meta:
      
   fbq('consent', 'revoke'); // Withdraws permission for cookies
   fbq('consent', 'grant'); // Grants permission for cookies

Przykładowy, niezmieniony kod do osadzenia pixela:

<script>
    !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('init', '{your-pixel-id-goes-here}');
    fbq('track', 'PageView');
</script>
<noscript>
    <img height="1" width="1" style="display:none"
         src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>
</noscript>

‍
Przekształcony kod:

<!-- Facebook Pixel Code -->
<script>
    !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', '{your-pixel-id-goes-here}');
    fbq('track', 'PageView');
    window.addEventListener('easycookieUpdateConsent',function(e){
    fbq('consent',e.detail.ad?'grant':'revoke')},!1)
</script>
<!-- End Facebook Pixel Code -->

‍
To sprawi, że w momencie załadowania strony, mamy odmowę zgody na ciasteczka. Następnie nasłuchujemy na zdarzenie wysyłane z Easycookie o nazwie easycookieUpdateConsent, które wysyła nam e.detail i dopiero wtedy udzielamy zgody w zależności od typu zgody (tu w przykładzie ad ale może być wykorzystane: ad, aduser, adpersonalization, analytics, personalization, security.

‍