Migrer l'intégration Shopify

Avant le lancement de l’intégration native Didomi/Shopify, Didomi fournissait deux scripts qui pouvaient être ajoutés manuellement à la boutique Shopify de votre organisation.

Script 1

Propagation du consentement à partir des catégories de consentement Shopify

Script 2

Gestion du paiement

Dans cet article, nous verrons comment supprimer ces anciens scripts afin que votre organisation puisse migrer vers l’intégration native Didomi/Shopify.

Les organisations qui ont précédemment implémenté les scripts 1 et 2 doivent supprimer ces scripts avant de poursuivre la configuration de l’intégration native Didomi/Shopify.

Supprimer le script 1

Le script 1 permettait à votre organisation de propager les valeurs de consentement pour les fournisseurs configurés dans le CMP Didomi à partir des quatre catégories de consentement Shopify: Analytics, Marketing, Preferences et Sale of Data. L’intégration native Didomi/Shopify prendra en charge cette propagation une fois implémentée, ce script doit donc être supprimé du code du thème de votre boutique Shopify.

Accédez à la vue administrateur de votre boutique Shopify et cliquez sur Boutique en ligne dans le panneau de gauche.

Cliquez sur les points de suspension alignés avec le thème actif de votre boutique en ligne et sélectionnez Modifier le code dans le menu déroulant.

Dans l’éditeur de code du thème de la boutique Shopify, développez le menu layout et sélectionnez le fichier theme.liquid .

Supprimez le script SDK Didomi de la balise <head> dans le fichier. Voici un exemple du script SDK Didomi.

Exemple de script SDK Didomi

<script type="text/javascript">(function(){function i(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(){i(e)},5)}}}function e(n,o,r,f,s){function e(e,t,n,i){if(typeof n!=="function"){return}if(!window[o]){window[o]=[]}var a=false;if(s){a=s(e,i,n)}if(!a){window[o].push({command:e,version:t,callback:n,parameter:i})}}e.stub=true;e.stubVersion=2;function t(i){if(!window[n]||window[n].stub!==true){return}if(!i.data){return}var a=typeof i.data==="string";var e;try{e=a?JSON.parse(i.data):i.data}catch(t){return}if(e[r]){var o=e[r];windown{var n={};n[f]={returnValue:e,success:t,callId:o.callId};if(i.source){i.source.postMessage(a?JSON.stringify(n):n,"*")}},o.parameter)}}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");i("__tcfapiLocator")})();</script><script type="text/javascript">(function(){(function(e,i,o){var n=document.createElement("link");n.rel="preconnect";n.as="script";var t=document.createElement("link");t.rel="dns-prefetch";t.as="script";var r=document.createElement("script");r.id="spcloader";r.type="text/javascript";r["async"]=true;r.charset="utf-8";window.didomiConfig=window.didomiConfig||{};window.didomiConfig.sdkPath=window.didomiConfig.sdkPath||o||"https://sdk.privacy-center.org/";const d=window.didomiConfig.sdkPath;var a=d+e+"/loader.js?target_type=notice&target="+i;if(window.didomiConfig&&window.didomiConfig.user){var c=window.didomiConfig.user;var s=c.country;var f=c.region;if(s){a=a+"&country="+s;if(f){a=a+"&region="+f}}}n.href=d;t.href=d;r.src=a;var m=document.getElementsByTagName("script")[0];m.parentNode.insertBefore(n,m);m.parentNode.insertBefore(t,m);m.parentNode.insertBefore(r,m)})("myAPIKey","NoticeID")})();</script>

Ensuite, repérez la ligne suivante dans le theme.liquid fichier et supprimez-la pour ne plus utiliser le script dans le thème de votre boutique Shopify :

{% render 'didomi-shopify-integration' %}

Enregistrez les modifications apportées au fichier une fois terminé.

Enfin, développez le menu snippets et repérez didomi-shopify-integration.liquid .

Faites un clic droit sur le fichier et sélectionnez Supprimer définitivement dans le menu déroulant suivant.

Confirmez la suppression du fichier didomi-shopify-integration.liquid dans la fenêtre modale suivante et cliquez sur Supprimer.

Supprimer le script 2

Le script 2 permettait à votre organisation d’intégrer le CMP Didomi au processus de paiement Shopify à l’aide d’un pixel personnalisé dans la boutique Shopify.

Afin de supprimer ce script, accédez à la vue administrateur de votre boutique Shopify et cliquez sur Paramètres dans le panneau de gauche.

Cliquez sur Événements clients dans le panneau de gauche de la page suivante.

Sélectionnez dans la liste le pixel où le script Didomi est ajouté.

Repérez le script dans l’éditeur de code du pixel et supprimez-le du code. Voici un exemple.

Exemple de script 2

window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}

function areVendorsEnabledInToken() {
  const cookieName = "didomi_token";
  const vendorsToCheck = ["google", "c:googleana-4TXnJigR"];

  // Get the value of a specific cookie
  const getCookieValue = (cookieName) => {
    const cookies = document.cookie.split("; ");
    const cookie = cookies.find((c) => c.startsWith(`${cookieName}=`));
    return cookie ? decodeURIComponent(cookie.split("=")[1]) : null;
  };

  // Decode Base64 and parse JSON
  const decodeBase64Cookie = (base64String) => {
    const decodedString = atob(base64String);
    return JSON.parse(decodedString);
  };

  // Check which vendors are enabled
  const checkVendors = (cookieData, vendorsToCheck) => {
    const result = {};
    vendorsToCheck.forEach((vendor) => {
      result[vendor] =
        cookieData &&
        cookieData.vendors &&
        cookieData.vendors.enabled &&
        cookieData.vendors.enabled.includes(vendor);
    });
    return result;
  };

  // Retrieve Didomi token from cookies or localStorage
  const didomiToken =
    getCookieValue(cookieName) || localStorage.getItem(cookieName);

  if (!didomiToken) {
    console.error(`Cookie ${cookieName} not found.`);
    return null;
  }

  return checkVendors(decodeBase64Cookie(didomiToken), vendorsToCheck);
}

if (
  window.location.href.includes("/checkout/") ||
  window.location.href.includes("/checkouts/")
) {
  gtag("consent", "default", {
    ad_storage: "denied",
    analytics_storage: "denied",
    functionality_storage: "denied",
    personalization_storage: "denied",
    security_storage: "granted",
    ad_user_data: "denied",
    ad_personalization: "denied",
    wait_for_update: 500,
  });

  analytics.subscribe("page_viewed", () => {
    const { google, "c:googleana-4TXnJigR": googleAnalytics } =
      areVendorsEnabledInToken();
    gtag("consent", "update", {
      ad_storage: google ? "granted" : "denied",
      analytics_storage: googleAnalytics ? "granted" : "denied",
      functionality_storage: google ? "granted" : "denied",
      personalization_storage: google ? "granted" : "denied",
      security_storage: "granted",
      ad_user_data: google ? "granted" : "denied",
      ad_personalization: google ? "granted" : "denied",
      wait_for_update: 500,
    });
  });
}

Cliquez sur Enregistrer une fois terminé.

Mis à jour il y a 2 jours

window.dataLayer = window.dataLayer || [];
function gtag() {
  dataLayer.push(arguments);
}

function areVendorsEnabledInToken() {
  const cookieName = "didomi_token";
  const vendorsToCheck = ["google", "c:googleana-4TXnJigR"];

  // Get the value of a specific cookie
  const getCookieValue = (cookieName) => {
    const cookies = document.cookie.split("; ");
    const cookie = cookies.find((c) => c.startsWith(`${cookieName}=`));
    return cookie ? decodeURIComponent(cookie.split("=")[1]) : null;
  };

  // Decode Base64 and parse JSON
  const decodeBase64Cookie = (base64String) => {
    const decodedString = atob(base64String);
    return JSON.parse(decodedString);
  };

  // Check which vendors are enabled
  const checkVendors = (cookieData, vendorsToCheck) => {
    const result = {};
    vendorsToCheck.forEach((vendor) => {
      result[vendor] =
        cookieData &&
        cookieData.vendors &&
        cookieData.vendors.enabled &&
        cookieData.vendors.enabled.includes(vendor);
    });
    return result;
  };

  // Retrieve Didomi token from cookies or localStorage
  const didomiToken =
    getCookieValue(cookieName) || localStorage.getItem(cookieName);

  if (!didomiToken) {
    console.error(`Cookie ${cookieName} not found.`);
    return null;
  }

  return checkVendors(decodeBase64Cookie(didomiToken), vendorsToCheck);
}

if (
  window.location.href.includes("/checkout/") ||
  window.location.href.includes("/checkouts/")
) {
  gtag("consent", "default", {
    ad_storage: "denied",
    analytics_storage: "denied",
    functionality_storage: "denied",
    personalization_storage: "denied",
    security_storage: "granted",
    ad_user_data: "denied",
    ad_personalization: "denied",
    wait_for_update: 500,
  });

  analytics.subscribe("page_viewed", () => {
    const { google, "c:googleana-4TXnJigR": googleAnalytics } =
      areVendorsEnabledInToken();
    gtag("consent", "update", {
      ad_storage: google ? "granted" : "denied",
      analytics_storage: googleAnalytics ? "granted" : "denied",
      functionality_storage: google ? "granted" : "denied",
      personalization_storage: google ? "granted" : "denied",
      security_storage: "granted",
      ad_user_data: google ? "granted" : "denied",
      ad_personalization: google ? "granted" : "denied",
      wait_for_update: 500,
    });
  });
}