Aller au contenu principal

Comment mettre en place la cmp web 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 :

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

Ouverture de l'interface du mode édition

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

  1. 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
  2. Puis placer vous avant la fin de la balise <head>

Ouverture du fichier

  1. Et ajouter le code suivant
{% unless content_for_header contains "Shopify.designMode" %}

// PUT THE CODE OF CMP IMPLEMENTATION HERE

{% endunless %}
Information

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.

  1. 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é"

Quick start copie code

  1. 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

  2. Sauvegarder la page de votre thème et vous devez avoir une implémentation qui ressemble à ceci :

{% unless content_for_header contains "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>
{% endunless %}
Dernière mise à jour le