Implémentation avec Shopify

Vous trouverez sur cette page la méthode pour implémenter AppConsent CMP avec Shopify.

1. Ouvrir l'édition de code de votre modèle Shopify

Dans Shopify :

Aller dans Boutique en ligne → Thèmes
Puis cliquer sur le bouton ...
Enfin cliquer sur "Modifier le code"

2. Ajouter la CMP web dans le code du thème

Dans le menu latéral, ouvrir le fichier de votre thème contenant la base html de votre site. Pour notre thème exemple, nous allons utiliser theme.liquid
Puis placer vous avant la fin de la balise <head>

Et ajouter le code suivant


<div data-gb-custom-block data-tag="unless" data-0='Shopify.designMode' data-1='Shopify.designMode'>

// PUT THE CODE OF CMP IMPLEMENTATION HERE

</div>

INFO

Nous sommes obligés d'envelopper le code d'implémentation de la cmp, car le mode de personnalisation de shopify n'est pas compatible avec le code de la CMP.

Récupérer le code d'implémentation de votre notice, en allant dans l'onglet Notices dans l'interface de configuration, puis sous la notice que vous souhaitez intégrer, copier le code d'intégration à l'aide du bouton " Copié"
Supprimer le texte "PUT THE CODE OF CMP IMPLEMENTATION HERE" de l'implémentation Shopify et coller le code de l'implémentation web à la place
Sauvegarder la page de votre thème et vous devez avoir une implémentation qui ressemble à ceci :


<div data-gb-custom-block data-tag="unless" data-0='Shopify.designMode' data-1='Shopify.designMode'>

<!-- MANDATORY: BEGIN IAB STUB -->
<script type="text/javascript">
  !function(){var e=function(){var e,t="__tcfapiLocator",a=[],n=window;for(;n;){try{if(n.frames[t]){e=n;break}}catch(e){}if(n===window.top)break;n=n.parent}e||(!function e(){var a=n.document,r=!!n.frames[t];if(!r)if(a.body){var s=a.createElement("iframe");s.style.cssText="display:none",s.name=t,a.body.appendChild(s)}else setTimeout(e,5);return!r}(),n.__tcfapi=function(){for(var e,t=arguments.length,n=new Array(t),r=0;r<t;r++)n[r]=arguments[r];if(!n.length)return a;if("setGdprApplies"===n[0])n.length>3&&2===parseInt(n[1],10)&&"boolean"==typeof n[3]&&(e=n[3],"function"==typeof n[2]&&n[2]("set",!0));else if("ping"===n[0]){var s={gdprApplies:e,cmpLoaded:!1,cmpStatus:"stub"};"function"==typeof n[2]&&n[2](s)}else a.push(n)},n.addEventListener("message",(function(e){var t="string"==typeof e.data,a={};try{a=t?JSON.parse(e.data):e.data}catch(e){}var n=a.__tcfapiCall;n&&window.__tcfapi(n.command,n.version,(function(a,r){var s={__tcfapiReturn:{returnValue:a,success:r,callId:n.callId}};t&&(s=JSON.stringify(s)),e&&e.source&&e.source.postMessage&&e.source.postMessage(s,"*")}),n.parameter)}),!1))};"undefined"!=typeof module?module.exports=e:e()}();
</script>
<!-- MANDATORY: END IAB STUB -->

<script type="text/javascript">
  const configSFBXAppConsent = {
    appKey: 'YOUR APPKEY'
    // targetCountries: ['FR', 'UK', 'US'],
    // forceGDPRApplies: true,
  }
</script>
<script src="https://cdn.appconsent.io/tcf2-clear/current/core.bundle.js" defer async></script>

</div>

PrécédentWeb CMP SuivantPrivacy Center Kit

Mis à jour il y a 19 jours

hashtag1. Ouvrir l'édition de code de votre modèle Shopify

hashtag2. Ajouter la CMP web dans le code du thème

1. Ouvrir l'édition de code de votre modèle Shopify

2. Ajouter la CMP web dans le code du thème