Lately, I’ve been working on the integration of Piwik Consent Manager with Google Tag Manager and Google Consent Mode API (using Simo Ahava’s template).
It hasn’t been a straightforward process also because Piwik’s documentation is a bit outdated 😉 and that’s why I’m writing this post where I want to describe my own solution.
Disclaimer – If you want to fully understand this post, you have to know Consent Mode API and how they work. If you never used them, you should read the documentation I linked above.
How does Piwik’s Consent Banner work?
First of all, let’s analyze the Piwik’s consent banner (in this post, I won’t describe how to set up and implement Piwik Consent Manager). Every time a new user lands on the website a cookie ppms_privacy_YOUR_WEBSITE_ID is created. Inside the cookie, Piwik stores the user consent choices using 3 digits:
- -1 = the user has not yet given consent
- 0 = the user has not given consent
- 1 = the user has given consent
In order to use them, you have to create a variable which stores the information and then pass them to the Consent Mode API.
1. Store Consent Choices in a 1st party Cookie variable
In GTM, you have to create a new 1st-Party Cookie variable and paste your ppms_privacy_YOUR_WEBSITE_ID. Also, tick the option URI-decode cookie. 
2. Read the cookie with Custom JavaScript variables
Google Consent Mode API doesn’t work with -1, 0, 1 but the words granted and denied. You have to create 3 custom JavaScript variables, one for each consent.
In the script below, parse the Cookie variable you created earlier, read the status of a specific consent (the example reads analytics consent) and returns granted or denied according to the number stored inside the cookie.
- -1 = denied
- 0 = denied
- 1 = granted
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
// Analytics Consent function () { var cookie = {{Piwik - Consent Cookie}}; if(!cookie){return 'denied'} var json = JSON.parse(cookie) if (json['consents']['analytics']['status'] == 1) { return 'granted' } else { return 'denied' } } // Remarketing/Adv Consent function () { var cookie = {{Piwik - Consent Cookie}}; if(!cookie){return 'denied'} var json = JSON.parse(cookie) if (json['consents']['remarketing']['status'] == 1) { return 'granted' } else { return 'denied' } } // A/B Testing and Personalization Consent function () { var cookie = {{Piwik - Consent Cookie}}; if(!cookie){return 'denied'} var json = JSON.parse(cookie) if (json['consents']['ab_testing_and_personalization']['status'] == 1) { return 'granted' } else { return 'denied' } } |
3. Build a trigger that fires when the user makes/updates his consent choices
If you want to use Consent Mode, you have to be sure to update the consent choices every time the user changes his consent.
Luckily, you can use an event called stg.consentsWereSent that Piwik Consent Manager pushes to the dataLayer when the user makes his choice.
You have to create a Custom Event which will fires whenever the user interacts with the consent banner or the “Change Consent Options” button.
4. Update Consent Mode API using Simo Ahava’s template
At this point, you are ready to activate and set up Simo Ahava’s Consent Mode template. Go to the Template Gallery and search for Consent Mode (Google tags).
Then you should create two Consent Mode tags, one with the Default consent command that will be fired on every page. And a second tag with the Update consent command that is fired on the dataLayer event stg.consentsWereSent (when the user makes his choice).
Inside the tags, you also have to use the custom JavaScript we created earlier. They’ll pass the user choice to the Consent Mode API.
And that’s it! You are done with this tutorial.
If you want, you can also combine the custom JavaScript variables with the dataLayer event to fire tags right after the user gave consent to analytics or advertising, this is quite important if you don’t want to lose the first pageview 😉
