Cookiebot throwing console errors in Magento 2.3.4

magento.stackexchange https://magento.stackexchange.com/questions/315203

Question

I have added cookiebot script into head tag,

here is the script

<script id="Cookiebot" src="https://consent.cookiebot.com/uc.js" data-cbid="0000-0000-0000-0000" data-blockingmode="auto" type="text/javascript"></script>

After adding this script, I am getting are many console errors,

Uncaught Error: Mismatched anonymous define() module: function ( $ ) {

Tried contacting support, but could not succeed in that, please advise me how to resolve this error,

Thanks in Advance!!

Was it helpful?

Solution

  1. Create a JS file here replacing VENDOR/THEME with your theme name - app/design/frontend/VENDOR/THEME/Magento_Theme/web/js/cookiebot.js and populate it with the below content:
require([
    'https://consent.cookiebot.com/uc.js?cbid=00000000-0000-0000-0000-000000000000',
    'domReady!'
], function () {
    'use strict';
    console.log(Cookiebot);
});
  1. Create app/design/frontend/VENDOR/THEME/Magento_Theme/layout/default_head_blocks.xml with the following content:
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script src="Magento_Theme::js/cookiebot.js"/>
    </head>
</page>
  1. Flush all caches

The network request to show it working: enter image description here

The console warning because I do not have a key: enter image description here

You can then access CookieBot with Cookiebot:

enter image description here

The Cookiebot script loads and constructs a client-side JavaScript object named 'Cookiebot' which exposes the public properties, methods, events and callback functions. For more info see their docs - https://www.cookiebot.com/en/developer/.

OTHER TIPS

You need to use requirejs concept for including this file .

Can you use following link for the same ?

https://webkul.com/blog/call-configurable-external-js-url-magento2/

This line is worth a try:

<script src="https://consent.cookiebot.com/uc.js" id="Cookiebot" data-cbid="0000-0000-0000-0000" async defer></script>

then flush the cache ensure you are in developer mode: php bin/magento deploy:mode:set developer

if you have doubts whether the cache was not flushed, do ensure the cookie line is present or not.

enter image description hereCan you try in magento backend following thing ?

Admin >> content >> design >> configuration >> Select Store >> html HEAD/Footer (Miscellaneous HTML)

But this script will be displayed on all pages or else if you want to add on particular page than add following code in your layout xml file

    <referenceContainer name="before.body.end">
        <block class="Magento\Framework\View\Element\Template" template="Namespace_Modulename::before.phtml" name="before_body_js"/>
</referenceContainer>

add template file before.phtml add below code

<script src="https://consent.cookiebot.com/uc.js" id="Cookiebot" data-cbid="0000-0000-0000-0000" async defer></script>

Assumption:

  • You are using a Custom Magento Theme.
  • You need the Cookiebot JS in all Frontend pages.

(Step 1) Update Entries

If you already have a app/design/frontend/VENDOR/THEME/Magento_Theme/layout/default_head_blocks.xml file in place - add the code-snippet shown below to it:

Note: If you don't already have a default_head_blocks.xml file in place - i.e. inside your Custom Theme - copy the file vendor/magento/theme-frontend-blank/Magento_Theme/layout/default_head_blocks.xml to the location app/design/frontend/VENDOR/THEME/Magento_Theme/layout/ and then add the following entry to the end of it:

<link src="js/includes/Cookiebot.js"/>

(Step 2) Create JS Payload File

Create the File app/design/frontend/VENDOR/THEME/web/js/includes/Cookiebot.js with the following content:

require([
    'jquery',
    'https://consent.cookiebot.com/uc.js?cbid=00000000-0000-0000-0000-000000000000'
], function ($) {
    'use strict';

    $(document).ready(function() {
        console.log(">>> CookieBot has been initialized ...");
    });
});

Step 3) Clear Caches:

Depending on the kind of caching-mechanisms you have deployed on your server (File/Varnish/Redis/etc) you may need to run some or all of these:

Clear Magento-Caches:

bin/magento cache:flush
bin/magento cache:clean

Remove Cached-Files:

# TO-DO: Please replace $MAGENTO_HOME/ - in the commands below - with the path to your Magento-Home-Folder on the server
rm -rfv $MAGENTO_HOME/var/cache/
rm -rfv $MAGENTO_HOME/var/page_cache/
rm -rfv $MAGENTO_HOME/var/session/*
rm -rfv $MAGENTO_HOME/generated/*

Remove Static-Content:

# TO-DO: Please replace $MAGENTO_HOME/ - in the commands below - with the path to your Magento-Home-Folder on the server
rm -rfv $MAGENTO_HOME/pub/static/frontend
rm -rfv $MAGENTO_HOME/pub/static/deployed_version.txt
rm -rfv $MAGENTO_HOME/pub/static/adminhtml

Remove Cached Content in your Redis:

# To Check if Redis is Running
sudo systemctl status redis.service ; 

# To Check Restart Redis
sudo systemctl restart redis.service ; 

# To Check if Redis is back up and running
# Hint: The PID in Previous and Current `Status` commands shoudl be different.
sudo systemctl -l status redis.service ;

Remove Cached Content in your Varnish:

# To Check if Varnish is Running on your Server
sudo systemctl status varnish.service ; 

# To Restart Redis on your Server
sudo systemctl restart varnish.service ; 

# To Check if Varnish is back up and running
# Hint: The PID in Previous and Current `Status` commands should be different.
sudo systemctl -l status varnish.service ;

Step 4) Re-deploy

Execute the following CLI Commands:

# IF you're running `Developer Mode` use the command below:
bin/magento setup:static-content:deploy -f --strategy standard

# IF you're running `Production Mode` use the command below:
bin/magento setup:static-content:deploy

# If you have `Developer Mode` Enabled - you shouldn't really need to run this. 
# But, if you're running `Production Mode` - you should do so.
bin/magento setup:di:compile

Step 5) Clear Your Browser Caches

To avoid the possibility of Browser-Caching issues - please follow the Instructions specific to your Browser to clear It's Caches.

Step 6) Test on Frontend

Open a New Browser Window (Preferrably in Incognito-Mode) and go to your Magento Instances HomePage.

  • VALIDATION CRITERIA # 1:

Check the Homepage's source code - i.e. on your Browser - for the following Code Snippet:

<link src="js/includes/Cookiebot.js"/>
  • VALIDATION CRITERIA # 2:

Once the Homepage has finished loading - Check the Browsers Console for following Log message:

>>> CookieBot has been initialized ...

At this point, your Cookiebot snippet should be working as expected.

I hope this helps!

Cheers,

Sharath

Licensed under: CC-BY-SA with attribution
Not affiliated with magento.stackexchange
scroll top