FTDNA Sales Banner
Ads and affiliate links like this help support the Q-M242 project's efforts to test indigenous peoples. Please read the affiliateship and business disclaimers for details. You may also donate directly here.

GDPR & The Genealogy Blogger in 2019 – Opting In & Out

One of the requirements of the European Union’s GDPR regulation is that site users need to first opt-into non-essential cookies and other trackers. They then must be offered the ability to opt-out at any time.

This is fairly simple to set up with CookieBot’s tools. A change needs to be made to each script or embed on your site that loads a cookie.

Script

This is the standard code for the Alexa certification tracking cookie. Because Alexa uses website information for marketing, it is considered a marketing cookie. I then need to mark it up as such.

<script type="text/javascript">
_atrk_opts = { atrk_acct:"50Msq1SZw320l9", domain:"haplogroup.org",dynamic: true};
(function() { var as = document.createElement('script'); as.type = 'text/javascript'; as.async = true; as.src = "https://certify-js.alexametrics.com/atrk.js"; var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(as, s); })();
</script>

I change the type from text/javascript to text/plain and add data-cookieconsent=”marketing”. The code now looks like this.

<script type="text/plain" data-cookieconsent="marketing">
_atrk_opts = { atrk_acct:"50Msq1SZw320l9", domain:"haplogroup.org",dynamic: true};
(function() { var as = document.createElement('script'); as.type = 'text/javascript'; as.async = true; as.src = "https://certify-js.alexametrics.com/atrk.js"; var s = document.getElementsByTagName('script')[0];s.parentNode.insertBefore(as, s); })();
</script>

Embedded Files

Unfortunately, many of the 3rd party files we add to our websites such as YouTube videos and Google Docs load marketing and other cookies. Thus, we can only share them if the user has opted into those types of cookies.

This is how an iframe embed from YouTube starts out.

<iframe width="560" height="315" src="https://www.youtube.com/embed/PtZbk_5pbf0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The src= needs to change to data-src=. Then the data-cookieconsent=”marketing” is added. By itself, this would leave a blank space on your page if the user had not consented. To tell them what is going on, you can add a message that will only show when they have not consented. It should be the same width and height as the embedded file.

<div width="560" height="315" class="cookieconsent-optout-marketing">
  You need to <a href="javascript:Cookiebot.renew()">accept marketing-cookies</a> to watch this video.
</div>

Your edited code will look like this.

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/PtZbk_5pbf0" data-cookieconsent="marketing" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div  width="560" height="315" class="cookieconsent-optout-marketing">
  Please <a href="javascript:Cookiebot.renew()">accept marketing-cookies</a> to watch this video.
</div>

Opt-out Link

The final step is adding a link to change cookie settings somewhere on every page. Many sites out there are telling people that they need to manually flush all cookies from their browser to change their settings. That is not cool. We set the cookies. It is our job to clean up after ourselves.

I put the link in my site footer. It could also go in a sidebar. CookieBot makes this really easy. You just add a link inside your HTML.

<a href="javascript:Cookiebot.renew()">Cookie Settings</a>

When clicked, it opens back up the cookie consent banner. I like this, because it means even people outside the EU can change their cookie settings on my site.

Note that changes to settings take effect on the next page on the site the user visits.

That is it. Not bad.

Posts in Series

Sources & Resources

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

you're currently offline