Open the Cookie Opt-in Dialog
To ensure that all examples are displayed correctly, you should not accept the external content. Click on the link on the right side and exclude the external content. Save and reload the page.
On the right side you see the source code that produces the link.
<button class="btn btn-md btn-primary" type="button" onclick="SgCookieOptin.openCookieOptin(); return false;">Open the cookie opt-in dialog</button>
Enable External Content
This is a YouTube video. You cannot see it yet, because it has an external source that could potentially set cookies. It is therefore registered by the Cookie OptIn plugin and replaced by a Cookie OptIn box. The video will be displayed only after your consent.
If you look closely at the source code, you will see that the source of the video comes from the domain youtube-nocookie.com. This is a special domain from Google, which does not set cookies unless you click on the play button. So in this case you can disable the Opt-In Box for better usability.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/5J3-W28gMlo" allowfullscreen data-consent-description="A little extra description" > </iframe>
The OptIn box can be switched off by simply setting the data-iframe-allow-always="1" attribute. This will tell the Cookie Opt-In script that this element should always be displayed. You can do the same with the CSS class frame-external-content-protection.This is the frame class that you can set in the Appearance tab for each content element. You can read more about this in our documentation.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/5J3-W28gMlo" allowfullscreen data-consent-description="A little extra description" data-iframe-allow-always="1"> </iframe>
External Content Design
If you would like your external content elements to have a more creative look-and-feel than the typical gray box, you can set a custom background image for them. You can either set that globally from the backend, or you could use the special data-sg-cookie-optin-background-image attribute as in this example.
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/5J3-W28gMlo" allowfullscreen data-sg-cookie-optin-background-image="/fileadmin/sg_cookie_optin/203.jpg"> </iframe>
But could we take this even further? Could we have a completely different design for our YouTube videos than from the rest of the content? And maybe even make it so that we automatically get the thumbnail image of any YouTube video and use it as a background for the replacement box? So that the users could get an idea of what would come after they give their consent?
Yes, we can! To do this first we have to create a YouTube Service in the backend. There we can set a custom template so that the buttons look different. Then we need to somehow tell the Cookie Opt-In which elements belong to this service. We can either do that by using the data-sg-cookie-optin-service attribute and set it to the service identifier. This way we explicitly assign this content element to the service and then the service template is being used.
If we want to do it automatically, then we can use the source_regex field and set it to youtube(.*)\.com. This regular expression is then tested against the source of all potential external contents and if it matches - the service gets automatically assigned to them.
When the external content is replaced, we fire an event to let the page know that happened. This allows us to add a JavaScript snippet that gets triggered when this event occurs where we perform the last tricky part - we get the ID of the YouTube video from it's source and automatically get it's thumbnail URL. This thumbnail then becomes the background image of the external content replacement box. And bam - we have a fully dynamic and customized template specially handcrafted for our YouTube videos! Note that it is important that the event handling JavaScript snippet is loaded before the corresponding external content element in the HTML source.
<script>
document.addEventListener('beforeExternalContentReplaced', function(event) {
try {
if (event.detail.service == SgCookieOptin.jsonData.mustacheData.services.youtube) {
var url = event.detail.externalContent.src.split(/(vi\/|v=|\/v\/|youtu\.be\/|\/embed\/)/);
var youtubeId = (url[2] !== undefined) ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
// Youtube offers an array of different thumbnail images. You may choose from:
// maxresdefault.jpg, hqdefault.jpg, sddefault.jpg, 0.jpg, 1.jpg, 2.jpg, 3.jpg
var thumbnailUrl = 'http://img.youtube.com/vi/' + youtubeId + '/hqdefault.jpg';
event.detail.container.style.backgroundImage = 'url(' + thumbnailUrl + ')';
event.detail.container.style.backgroundSize = 'contain';
}
} catch (e) {
// Ignore errors
}
});
</script>
<iframe
width="560" height="315"
src="https://www.youtube-nocookie.com/embed/5J3-W28gMlo" allowfullscreen
data-sg-cookie-optin-service="youtube">
</iframe>
Protect Content Elements
The reverse case can also occur, where elements store personal data in the background, but are not recognized by the Cookie OptIn script. This could be, for example, images that are generated via PHP and even set cookies. We have a similar solution for this: You can either set the attribute data-external-content-protection directly in HTML or select External Content in the Appearance tab of a content element.
<div style="height: 110px;" class="frame-external-content-protection"> This is an element that potentially stores personal data. </div>
This is very handy for Google Maps or other complex elements that can be integrated with JavaScript. In this example we used the frame class from the TYPO3 Backend.
Edit External Content after Loading
If you look closely at the source code, you will see that we have explicitly set the height of the element to 110 px. Otherwise it would be too small for the Opt-In box. However, we do not want the content element to take up that much space after we have loaded it on the page. Accordingly, we need to edit the element after loading so that it fits into the design. For this we use the API function SgCookieOptin.addAcceptHandlerToProtectedElements.
As first parameter we pass the callback function and as second parameter we pass the CSS selector, which uniquely addresses the element. This will get our element from the stack with the replaced external content and append our callback function as an EventListener. When the element is loaded, the function is executed.
In the callback function itself, we have the parameter/event that has property externalContent, there is our element. We then address this property and set the height back to "auto" and for fun we make the text green. Click on it and see what happens.
<div id="external-content-to-edit" style="height: 100px;" class="frame-external-content-protection">
This is an element that potentially stores personal data.
</div>
<script>
function doAfterLoad(event) {
event.detail.externalContent.style.height = 'auto';
event.detail.externalContent.style.color = '#629755';
}
SgCookieOptin.addAcceptHandlerToProtectedElements(doAfterLoad, '#external-content-to-edit');
</script>
Cookie Opt-In Extension for TYPO3
A solution for optional cookie and script integration in accordance with DSGVO (GDPR) and ePrivacy – Could you already convince yourself of our extension or do you need further information?