Deploy Didomi’s SDK for your Adobe Commerce website

Adobe Commerce (formerly Magento 2) is a platform that offers various tools to manage, personalize and optimize your e-commerce website.

Prerequisites

Publish a consent notice in the Didomi Console.
Create a website using Adobe Commerce (Magento 2).
⚠️ If you were using the Didomi Consent Management Extension with Magento 2, please deactivate it by executing the following command and then flush Magento 2 caches:
```
$ bin/magento module:disable Didomi_ConsentManagement
$ bin/magento module:status Didomi_ConsentManagement

Didomi_ConsentManagement : Module is disabled
```

Step 1: Fetch Didomi’s SDK

Login to the Didomi Console
Go to Consent Notices
Open you consent notice in edit mode
Go to Embed tab
In the "3. Publish" Section: copy the script tag

💡You can find more details on the Didomi SDK in this developer doc.

Step 2: Insert Didomi’s SDK

The goal is to insert our SDK right after the opening <head> tag. To do so you will need to manipulate the root.phtml file which is used by default to setup the content of the head in Magento 2.

You will find your root.phtml under this path: vendor/magento/module-theme/view/base/templates/root.phtml (unless it has been overridden in your custom theme)
The root.phtml should contain something like this:

<?php
<script>
    var BASE_URL = '<?= $block->escapeUrl($block->getBaseUrl()) ?>';
    var require = {
        "baseUrl": "<?= /* @escapeNotVerified */ $block->getViewFileUrl('/') ?>"
    };
</script>

It contains a reference to the require.js block which is defined in : vendor/Magento/module-theme/view/frontend/layout/default.xml content of which is as follows:

<block name="require.js" class="Magento\\Framework\\View\\Element\\Template" template="Magento_Theme::page/js/require_js.phtml" />

What you will need to do now is to override the file in your custom theme. To do so follow these steps:
1. Copy therequire_js.phtml file from vendor/magento/module-theme/view/frontend/templates/page/js
2. Paste it to your theme app/design/frontend/{VENDOR}/{THEME_NAME}/Magento_Theme/templates/page/js/ path
3. Insert Didomi’s SDK just above the requireJS block i.e:

<script type="text/javascript">
    (function(){(function(e){var r=document.createElement("link");r.rel="preconnect";r.as="script";var t=document.createElement("link");t.rel="dns-prefetch";t.as="script";var n=document.createElement("script");n.id="spcloader";n.type="text/javascript";n["async"]=true;n.charset="utf-8";var o="{{SDK-URL}}"+e+"/loader.js?target="+document.location.hostname;if(window.didomiConfig&&window.didomiConfig.user){var i=window.didomiConfig.user;var a=i.country;var c=i.region;if(a){o=o+"&country="+a;if(c){o=o+"&region="+c}}}r.href="{{SDK-URL}}";t.href="{{SDK-URL}}";n.src=o;var d=document.getElementsByTagName("script")[0];d.parentNode.insertBefore(r,d);d.parentNode.insertBefore(t,d);d.parentNode.insertBefore(n,d)})("{{Your-API-Key}}")})();
    var require = {
        "baseUrl": "<?php /* @escapeNotVerified */ echo $block->getViewFileUrl('/') ?>"
    };
</script>

To manage tags and Vendors please refer to this documentation.
Magento native cookies could be handled by following this documentation (through the creation of custom purposes and vendors)

PreviousDidomi-mParticle integration for your CMP NextPreference Management Platform integrations

Last updated 1 year ago