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

  1. 1.
    Login to the Didomi Console
  2. 2.
    Go to Consent Notices
  3. 3.
    Open you consent notice in edit mode
  4. 4.
    Go to Embed tab
  5. 5.
    In the Embed 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. 1.
      Copy therequire_js.phtml file from vendor/magento/module-theme/view/frontend/templates/page/js
    2. 2.
      Paste it to your theme app/design/frontend/{VENDOR}/{THEME_NAME}/Magento_Theme/templates/page/js/ path
    3. 3.
      Insert Didomi’s SDK just above the requireJS block i.e:
<script>
type="text/javascript">window.gdprAppliesGlobally=true;(function(){function a(e){if(!window.frames[e]){if(document.body&&document.body.firstChild){var t=document.body;var n=document.createElement("iframe");n.style.display="none";n.name=e;n.title=e;t.insertBefore(n,t.firstChild)}
else{setTimeout(function(){a(e)},5)}}}function e(n,r,o,c,s){function e(e,t,n,a){if(typeof n!=="function"){return}if(!window[r]){window[r]=[]}var i=false;if(s){i=s(e,t,n)}if(!i){window[r].push({command:e,parameter:t,callback:n,version:a})}}e.stub=true;function t(a){if(!window[n]||window[n].stub!==true){return}if(!a.data){return}
var i=typeof a.data==="string";var e;try{e=i?JSON.parse(a.data):a.data}catch(t){return}if(e[o]){var r=e[o];window[n](r.command,r.parameter,function(e,t){var n={};n[c]={returnValue:e,success:t,callId:r.callId};a.source.postMessage(i?JSON.stringify(n):n,"*")},r.version)}}
if(typeof window[n]!=="function"){window[n]=e;if(window.addEventListener){window.addEventListener("message",t,false)}else{window.attachEvent("onmessage",t)}}}e("__tcfapi","__tcfapiBuffer","__tcfapiCall","__tcfapiReturn");a("__tcfapiLocator");(function(e){
var t=document.createElement("script");t.id="spcloader";t.type="text/javascript";t.async=true;t.src="<https://sdk.staging.privacy-center.org/"+e+"/loader.js?target="+document.location.hostname;t.charset="utf-8>";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n)})("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)