GDPR : Managing cookies in WordPress or Divi with tarteaucitron.js

7 Jun 2018

Good morning everyone,

If you’re reading this post, it means you too have wondered, in the context of the GDPR, how you were going to easily manage authorization and prohibition of these damn cookies / trackers on your WordPress or Divi website…

Basically, I’m in favour of this kind of regulation, but it’s a happy mess technically (and legally).

By the way, I invite those who have missed this new law in the last few weeks (or, like me, who didn’t know how to start with) to read this excellent article from the “marmite” on the General Data Protection Regulations (and WordPress). Very complete and very concrete, he pulled me out of the fog I had been wandering in for a while.

RGPD and cookies (or trackers)

In short, you must forbid the placement of cookies on your website or the setting up of tracers by certain services (such as Google Analytics for audience measurement or behaviour study, for example) until the visitor has expressed his consent to their use. The latter must also be able to choose individually each of the services to be prohibited/authorised.

The tarteaucitron script to the rescue

The “tarteaucitron” script is a GDPR-compliant open-source tag manager. It is very light and recommended and used by the CNIL (national french agency for data protection).

It allows not only to automatically position tags or markers associated with different services (audience measurement, social networks…), in the same way as Google Tag Manager, but also and especially to collect the explicit consent (or refusal) of the visitor for the use of these tags and associated cookies. Exactly what we need.

You can consult the tarteaucitron installation guide; I detail here the different steps for an easy and clean implementation in WordPress or Divi.

Files installation

Download the tarteaucitron source code from GitHub, decompress it and rename the resulting directory with the name “tarteaucitron” (all lower case). Then copy this folder to the root of your WordPress installation.

Declaration and script initialization

The following lines must be inserted before the </head> tag on each page of your website:

<script src="/tarteaucitron/tarteaucitron.js"></script>
<script type="text/javascript">
        tarteaucitron.init({
            "hashtag": "#tarteaucitron", /* Automatically open the panel with the hashtag */
            "highPrivacy": false, /* disabling the auto consent feature on navigation? */
            "orientation": "top", /* the big banner should be on 'top' or 'bottom'? */
            "adblocker": false, /* Display a message if an adblocker is detected */
            "showAlertSmall": true, /* show the small banner on bottom right? */
            "cookieslist": true, /* Display the list of cookies installed ? */
            "removeCredit": false /* remove the credit link? */
        });
</script>

We are going to use the WordPress or Divi features to do this automatically.

Divi Version

With Divi, it is immediate because you can just copy/paste this block in the Integration tab on the Divi’s options page, in the <head> tag textarea:

Installation tarteaucitron dans Divi

Of course, you will have to activate the header code integration, according to the screenshot above.

General WordPress version

If the back-end of your theme does not allow you to insert code directly, then you must go through a child theme in order to properly inject the code into your HTML pages.

To do this, add the following lines to the functions.php file of your child theme:

add_action( 'wp_enqueue_scripts', 'tarteaucitron_load' );
function tarteaucitron_load() {
  wp_enqueue_script( 'tarteaucitron', '/tarteaucitron/tarteaucitron.js' );
}

add_action( 'wp_head', 'tarteaucitron_init' );
function tarteaucitron_init() {
?><script>
        tarteaucitron.init({
            "hashtag": "#tarteaucitron", /* Automatically open the panel with the hashtag */
            "highPrivacy": false, /* disabling the auto consent feature on navigation? */
            "orientation": "top", /* the big banner should be on 'top' or 'bottom'? */
            "adblocker": false, /* Display a message if an adblocker is detected */
            "showAlertSmall": true, /* show the small banner on bottom right? */
            "cookieslist": true, /* Display the list of cookies installed ? */
            "removeCredit": false /* remove the credit link? */
        });
</script><?php
}

Note: There are also free plugins to insert code into WordPress generated HTML files, but I prefer minimal, lightweight and non-dependent solutions.

Adding services

Service activation is done in much the same way. It is essential for the script to work, since without service, there is no cookie or tracker to prohibit.

First, you need to get the necessary code snippets from the tarteaucitron installation guide (step 3). For example, for Google Analytics Universal :

Tarteaucitron et Analytics

This screenshot then tells us that:

  • the Analytics code must be placed at the end of each page of the site before the </body> tag,
  • the associated official marker, which you must have previously set for this service, must be removed.

Divi Version

Same procedure as before, but this time the code must replace the official marker in the area associated with the <body> tag, for each service used:

Tarteaucitron et Analytics

Bonus: You will notice that on this screenshot I added an instruction to the analyticsMore() function to make Analytics a little more compliant with the RGPD (anonymization of visitors’ IP address).

General WordPress version

This time it is at the end of the HTML pages, before the </body> tag, that the code snippets associated with the services must be inserted. Add these lines to your functions.php file:

add_action( 'wp_footer', 'tarteaucitron_services' );
function tarteaucitron_services() {
?><script>
        tarteaucitron.user.analyticsUa = 'UA-XXXXXXXX-X';
        tarteaucitron.user.analyticsMore = function () { ga('set', 'anonymizeIp', true); };
        (tarteaucitron.job = tarteaucitron.job || []).push('analytics');
</script><?php
}

Bonus: Like for the Divi version, I added an instruction to the analyticsMore() function to make Analytics a little more compliant with the RGPD (anonymization of visitors’ IP address).

Adding several services

If you use several services, you can paste all the associated bits of code, either in the Divi options, or in the same tarteaucitron_services() function for the child theme version (in the latter case it is not necessary to declare a function for each):

add_action( 'wp_footer', 'tarteaucitron_services' );
function tarteaucitron_services() {
?><script>
        tarteaucitron.user.analyticsUa = 'UA-XXXXXXXX-X';
        tarteaucitron.user.analyticsMore = function () { ga('set', 'anonymizeIp', true); };
        (tarteaucitron.job = tarteaucitron.job || []).push('analytics');
        (tarteaucitron.job = tarteaucitron.job || []).push('facebook');
        (tarteaucitron.job = tarteaucitron.job || []).push('gplus');
        ETC....................
</script><?php
}

Ad Blockers, Caching and Optimization

If it doesn’t work, don’t panic and don’t curse me yet…

  1. You may have an ad blocker enabled, and in this case it blocks everything, including tarteaucitron!
    To fix this problem, you can change the “adblocker” option of the first script:

    		"adblocker": true, /* Display a message if an adblocker is detected */
    
  2. If you are using a caching system, you may need to exclude the tarteaucitron.js file, for example with Fastest Cache:
    Exclusion du script tarteaucitron dans Fastest Cache
  3. Same for optimization systems (minify, combine, defer…), here Autoptimize:
    Exclusion de tarteaucitron dans Autoptimize

Conclusion

Thanks to the work of Amauri Champeaux, who also provides this script for free for the most common services, cookies and trackers control is cake for WordPress, and almost immediate for Divi.

(Background of the presentation image downloaded on Freepik.)