Knowledge Base

How do I create an individual content blocker?

You use a WordPress plugin or service for which there is no content blocker template in Real Cookie Banner? You can always request a new cookie and content blocker template for free, and we will try to implement it for you in a reasonable time. Alternatively, you can always create a custom content blocker by yourself. This article shows you step by step how to find all the necessary information.

We must point out that the following statements do not constitute legal advice. Therefore, we can only give you evaluations from our intensive experience with the EU legal regulations in practice and a technical assessment of the situation.

Where can I create a content blocker?

Go to your WordPress backend and there in the left sidebar by clicking on Cookies in the Real Cookie Banner settings. On this page you will find several tabs. One of them is called Content Blocker and is relevant for us. In the tab there is an “Add content blocker” button in the upper-right corner, which we can use to create a content blocker. In addition to the selection from content blocker templates, we find in this view at the top a “Create from scratch” button, with which we can create a content blocker.

Please note that each content blocker requires one or multiple services. Once these services are accepted, the content is loaded (instead of the content blocker). Therefore, you should create all required services (with their cookies) before you create your individual content blocker. How to do that you can read in the article How do I create an individual cookie (service)?.

What must be specified in a content blocker?

To create the content blocker, you will see a number of fields. Under each field you will find a description of what exactly needs to be entered in the field. Please read the description carefully to understand what you need to enter in which field. In the following, we will go into each field in more detail with examples.

There are the following fields to fill:

Name

The name of the content blocker is displayed in the headline of a visible content blocker. It should clearly describe which service cannot be loaded so that your visitor can easily decide whether to agree to the cookie (service) to see the current content.

Example: YouTube

Name of content blocker in title of content blocker

Description

The description is a free text field in which you can give your visitors more information about what could not be loaded and for what reason. In particular with e.g. contact forms, this can be helpful to show the user the benefit of agreeing to load the service or to provide them with an email address as an alternative way to contact you.

Example: Video from YouTube has been blocked because you did not allow to load it.

Description displayed in content blocker

URLs / Elements to block

The most important thing with a content blocker is to correctly specify which elements should be blocked. One rule per line must be specified according to the syntax explained below the input field.

Below is a brief explanation of each of the syntax elements:

  • *: With an asterisk you can express a wildcard (any character) within a string. You can use the wildcard both inside a string and before and after the string. For a URL, it is recommended to define e.g. only the hostname and a part of the path as fixed, but to define protocol as well as variables (at the end of the path) as wildcard arbitrary. Rules with or without wildcard are applied to all elements within the HTML that your WordPress generates.
  • div[id="my-embed"]: You can block HTML elements by their ID. You can apply the rule to any HTML element and attribute.
  • p[class*="my-embed"]: Just like in the previous rule, you can block an HTML element by its class property. However, an HTML element can have multiple classes. With an asterisk after class you can express a contains-condition, so that this class must be included, but also other classes can be specified for the element.
  • div[data-href^="https://example.com"]: The ^= selector matches every element whose attribute value begins with a specified value.
  • div[data-href$=".pdf"]: The $= selector matches every element whose attribute value ends with a specified value.
  • div[data-gyp-href]: This syntax matches all elements with a given attribute, regardless of the value.

The rules are abstract, so we would like to give you a few examples of what is blocked in which case. Note that for the examples shown, we already have a template as well.

Blocking e.g. an iframe based on a URL

HTML code in your website:

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

Rule for blocking: *youtube.com/embed/*

Blocking e.g. a script based on a URL

HTML code in your website:

<script async src="https://www.<strong>googletagmanager.com/gtag/js?id=</strong>UA-123456789-1"></script> <script> <strong>window.dataLayer</strong> = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-123456789-1'); </script>

Rules for blocking:

*googletagmanager.com/gtag/js?id=*
*window.dataLayer*

Not only the external script is blocked based on the URL, but also the inline script based on the specified keyword.

Blocking an HTML element by its ID

HTML code in your website:

<div <strong>id="addtoany_list"</strong> class="green">
   [...]
</div>

Rule for blocking: div[id="addtoany_list"]

Blocking an HTML element by its class name

HTML code in your website:

<div <strong>class="addtoany addtoany_share_save_container addtoany_widget"</strong>>
   [...]
</div>

Rule for blocking: div[class*="addtoany_share_save_container"]

Blocking an HTML element by custom attribute

HTML code in your website:

<div <strong>data-youtube-embed="https://www.youtube.com/embed</strong>/XtLWonUXAmO">
   [...]
</div>

Rule for blocking: div[data-youtube-embed*="youtube.com/embed"]

Blocking a script from a plugin

In some cases you want to block a plugin completely because it loads external data (e.g. Contact Form 7 with Google reCAPTCHA).

HTML code in your website:

<script src="https://your-domain.com/<strong>wp-content/plugins/contact-form-7/</strong>js/script.js" />

Rule for blocking: *wp-content/plugins/contact-form-7/*

Connected cookies

Content is only blocked until your visitor gives consent. You have to define which cookies have to be accepted for the content blocker so that the content can be loaded. The content will only be loaded if all defined cookies (services) are accepted.

Themen

Find helpful articles

WordPress Plugins

Menu
Cookie plugin by Real Cookie Banner