Automatic cookie blocking: YouTube / Vimeo / Social media embeds

[michiel]

Hey!

I’ve been working with Cookiebot for quite some time and one of the features we implemented is automatic cookie-blocking with placeholders for content that is embedded and might be placing cookies, e.g. YouTube video embeds or social media widgets.

Is it possible to achieve something like that with the PPCM as well? Ideally we’d like to show a placeholder when a visitor doesn’t accept cookies with an option to change their settings right from the placeholder.

P.S. 1: I am aware of the YouTube nocookies option, but this options still stores information about the user in HTML local storage, so it doesn’t comply with GDPR regulations.
P.S. 2: I did read this post, but I’m looking for something more user-friendly so it is possible for content managing colleagues to use this without technical knowledge.

Thanks!
Michiel

[kamilb]

Hey @michiel,

In order to do that, you can follow the guide -

Before we start, make sure that you have an element (e.g. div) already created on your website where you will embed the content. In this example we will be using a div with an ID “pp-content” as the container. You can also include a placeholder in the div that will contain a message such as “Please give consent in order to see the content”. You can also add a button which will open the consent form whenever the user clicks on it. In order to do that, you can attach the event listener to the button (click) and use our JS api to open the consent form -

document.querySelector("#pp-content button").addEventListener("click", function() {

ppms.cm.api("openConsentForm");

});

Our placeholder HTML structure in this example -

<div id="pp-content" style="text-align: center;"><p>Please give consent in order to see the content</p><button>Open Consent Form</button></div>

The Element -

Once the container with a placeholder is implemented, we can start implementing the solution

Using the Custom content tag

Every tag in Piwik PRO can be set to a specific consent type. This means that we can fire tags based on consent and we can use this to dynamically embed the content whenever the consent is given. In the example below we will dynamically embed a google map iframe whenever the user gives consent for analytics. First we need to create a new tag.

1. Navigate to Menu > Tag Manager
2. Click on the Add new tag button
3. Enter the name and select a Custom content tag
4. Paste your HTML code inside the tag (we will use google maps in this example)

5. Enter ‘pp-content’ as the Target element ID
   
6. Please scroll down to the Advanced tag settings and set the Consent type to the consent that you need the user to give in order for the content to appear (We will set it to analytics in this example)
   
7. Once the consent type is selected, scroll down and click the Add new trigger button
8. Enter the trigger name and select Page view as the trigger type
9. Make sure that the tag is fired on Page load
10. Make sure that the trigger fire on all pages (alternatively you can fire it only on the page that the content is on)

Note: If you have an SPA or if your content is loaded with a delay, you can use the Element Presence trigger instead to make sure that the element is present on the page before firing the tag

11. Once the trigger is created, click on the OK button and make sure to save the tag

Once the user enters the page and the user has given his consent for Analytics he/she should see the iframe element instead of the placeholder.

[michiel]

Thanks, @kamilb! Very helpful!

It would be great if this was built into something a bit more user-friendly, so that end-users of our CMS could easily just drop in embeds without having to change tags or code through tag manager. I know that Cookiebot offers an implementation that’s pretty easy to use.