Google Adsense And EU GDPR Compliance

The General Data Protection Regulation (GDPR) will take effect on May 25th, 2018 and many of us who use Google Adsense to monetize our blogs may be in violation of the new EU law. Google is working on serving non-personalized ads to EU visitors but at this time that hasn’t been released yet. Many are interpreting that the EU requires that consent is gained before a cookie is set.

Consent must be obtained before any data is collected. Consent must also be specific and easily withdrawn. Web pages that load data-collecting ads before consent is obtained may violate the GDPR. Source

This means that Google ads (which use cookies) cannot be displayed until consent is given. Below is a quick and dirty solution to prevent ads from displaying until users give consent. Before we get there, here’s what I think about the entire EU Cookie Law.

My Two Cents
I don’t plan on implementing this solution. I use Insites Cookie Consent script to let users know I use cookies to serve ads. Why does the EU think they can govern what I do with my blog? My servers are in the US. If the EU has issues with cookies being placed on their citizens computers then go ahead and block my website. Unless Google informs me that I am violating their terms of service then I’ll consider making changes. As of now, I live in Texas so Fuck You!

With that said, here’s the solution:
First off lets look at the typical Adsense code.


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
   <ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-000000000000000"
     data-ad-slot="0000000000"
     data-ad-format="auto"></ins>
   <script>
   (adsbygoogle = window.adsbygoogle || []).push({});
</script>

The first script is universal and only needs to be called once even though you may have several ads on a single webpage. Go ahead and move the first script to the <head> section of your html.

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

The next part of your Adsense code <ins> will have to be injected into your html once a user has accepted cookies on your website. This is the actual ad that will be displayed.

I opted to use the Cookie Consent script with the Advanced Opt-In compliance type so users have to click Accept Cookies.

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#000"
    },
    "button": {
      "background": "#f1d600"
    }
  },
  "type": "opt-in",

  onInitialise: function (status) {
    //called on page load
    var type = this.options.type;
    var didConsent = this.hasConsented();
    if (type == 'opt-in' && didConsent) {
        // display ad
        $('#targetDiv').append('<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-000000000000000" data-ad-slot="0000000000" data-ad-format="auto"></ins>');
        (adsbygoogle = window.adsbygoogle || []).push({});
    }
  },

  onStatusChange: function(status, chosenBefore) {
    //called on statud changed
    var type = this.options.type;
    var didConsent = this.hasConsented();
    if (type == 'opt-in' && didConsent) {
        // display ad
        $('#targetDiv').append('<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-000000000000000" data-ad-slot="0000000000" data-ad-format="auto"></ins>');
        (adsbygoogle = window.adsbygoogle || []).push({});
    }
  },
})});
</script>

I’ve implemented two callback hooks here. onInitialise will be called on page load and we’ll use this to load an ad if a user has previously accepted cookies. onStatusChange will be called when a user accepts or declines cookies. If a user hasn’t previously accepted cookies then this callback will be called the moment the user chooses an option.
Once consent is given we inject the <ins> section from your original Adsense code into your target div.

$('#targetDiv').append('<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-000000000000000" data-ad-slot="0000000000" data-ad-format="auto"></ins>');

The last part of your original Adsense code can be added after you’ve injected your ad code into your target div.

(adsbygoogle = window.adsbygoogle || []).push({});

Thats the entire solution in a nutshell. Google Adsense will not be displayed until a visitor has accepted cookies. Implementing this solution will require that you modify your Adsense code. Does doing this violate the terms from Google Adsense? I don’t know so use this at your own risk. You have been warned.




No Comments


You can leave the first : )



Leave a Reply

Your email address will not be published. Required fields are marked *

Please Do the Math      
 

%d bloggers like this: