How to Block Your JavaScript Code Until a Customer Accepts Cookies

In this guide, you can learn how to block a specific JavaScript code until a user accepts cookies. Please note that “Option 1” and “Option 2” are only available for the Magento 2 Cookie Consent extension from v1.4.0.

Option 1 (recommended): Block JS Using Tag Attribute

If you need to run the JS code only when a user agreed to the Marketing cookie category, you need to add a specific type attribute to the script tag.

How does it work? Generally, you can include any JS in the <script> tag, however, it’s all about its type attribute. A browser recognizes <script> and <script type="text/javascript"> tags as JavaScript and can run it, but when you change the tag to a custom one, it becomes unknown and cannot be run. This is where the Cookie Consent extension comes into play. You should add the specific custom type attribute to the script tag (e.g. <script type="pr_cookie_category/marketing">), so that the plugin can change it to a recognizable <script type="text/javascript"> only after a user allows the Marketing cookie category. As a result, you can run only the necessary scripts.

For example, let’s add the "pr_cookie_category/marketing" type to the following inline JS code:

<script>
	alert('Marketing script was executed');
</script>

After adding the type attribute, the code will look as follows:

<script type="pr_cookie_category/marketing">
	alert('Marketing script was executed');
</script>

In the case of external JavaScript, add the “pr_cookie_category/marketing” type in the same way to the following code:

<script src="https://example.com/file.js"></script>

After adding the type attribute, the code will look as follows:

<script type="pr_cookie_category/marketing" src="https://example.com/file.js"></script>

The extension supports the following type values:

• pr_cookie_category/all – a script with this attribute will be run if a user agrees to all cookies.
• pr_cookie_category/{{category_key}} – a script with this attribute will be run if a user agrees to the specific cookie category or allows all cookies.

Option 2 (partial blocking): Block JS Using Our JavaScript Model

Wrap your javascript code as in the example below:

requirejs(['prCookieRestriction'], function (prCookieRestriction) {
        'use strict';
	prCookieRestriction.userScript.execute(function() {
		// your code goes here ...
	}, 'marketing');
});

“marketing” is the key of the Marketing category. The script will be executed if a customer allows the marketing category. Please, learn how to find a category key.

To find out more about the “prCookieRestriction” JS model, go to the following file:

Plumrocket/CookieConsent/view/frontend/web/js/model/restriction.js

Option 3 (advanced): Block JS Using “pr-cookie-consent” Cookie

If you are not able to use our js model, you can write your own solution based on the “pr-cookie-consent” cookie.

A “pr-cookie-consent” value is an array that includes categories allowed by a customer. The value is a URL encoded JSON string. For instance, if a customer allows cookies from the Statistics category, the consent will be recorded as [%22statistics%22] in the “pr-cookie-consent” array.

In the list below, you can see the examples of possible “pr-cookie-consent” cookie values (for illustrative purposes, the values are URL decoded):

• [“statistics”] – a user allowed a Statistics category only.
• [“preferences”,”statistics”]  – a user allowed Preferences and Statistics categories.
• [“all”]  – a user allowed all cookies.
• [] – a user declined all cookies or disabled all categories in a Cookie Settings Panel.

Please, note:

• If a user has not allowed cookies yet, a “pr-cookie-consent” cookie is not created.
• All but the essential categories are stored in the “pr-cookie-consent” cookie. Since the Essential categories are required and users are not able to decline them, these categories are not recorded in the cookie.