Cookiebot throwing console errors in Magento 2.3.4
-
14-04-2021 - |
Domanda
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!!
Soluzione
- 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);
});
- 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>
- Flush all caches
The network request to show it working:
The console warning because I do not have a key:
You can then access CookieBot with Cookiebot
:
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/.
Altri suggerimenti
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.
Can 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