Iubenda logo
Générer dès maintenant

Documentation

Sommaire

Cookie Solution pour Shopify : comment afficher un bandeau cookies et recueillir le consentement aux cookies

Après l’intégration à votre site Shopify de la politique de confidentialité (qui inclut la politique relative aux cookies si vous l’avez activée), vous pouvez terminer la configuration par l’installation de notre Cookie Solution pour [1] afficher un bandeau cookies entièrement personnalisable, [2] recueillir le consentement aux cookies et [3] mettre en œuvre le blocage préalable, comme l’exige la Loi cookies.

En fait, sauf en ce qui concerne les cookies exemptés, la Loi cookies prévoit non seulement l’obligation de mettre une politique relative aux cookies à disposition des utilisateurs, mais aussi celle d’afficher une brève déclaration (le bandeau cookies) lors de la première visite d’un utilisateur et de bloquer les scripts qui installent (ou qui peuvent installer) des cookies jusqu’à l’obtention du consentement de l’utilisateur.

Dans ce guide, découvrez comment intégrer notre Cookie Solution à votre boutique Shopify. La méthode ci-dessous utilise l’API Customer Privacy de Shopify (qui bloque automatiquement les cookies et les traqueurs installés soit directement par Shopify, soit par des applications compatibles). Vous devez donc au préalable activer l’option Limiter le suivi des clients en Europe dans Boutique en ligne > Préférences.

Shopify - Limiter le suivi des clients en Europe

Pour commencer, rendez-vous dans votre Tableau de bord iubenda et cliquez sur [Votre site web] > Politique de Confidentialité et de Cookies > Modifier. Vous remarquerez alors une section « Politique relative aux Cookies » dans la colonne de droite.

Activer la politique relative aux cookies

Cliquez sur Activer la politique relative aux cookies et Enregistrer les modifications : votre politique relative aux cookies sera automatiquement générée à partir de la configuration de votre politique de confidentialité.

Si vous disposez déjà d’une politique relative aux cookies, vous pouvez en indiquer le lien dans les Options avancées du configurateur de la Cookie Solution. Sélectionnez Personnaliser sous Politique de Confidentialité et de Cookies > URL de la politique relative aux cookies. Pour plus d’informations, consultez le guide détaillé de la Cookie Solution.

Cliquez sur Générer dès maintenant sous Tableau de bord > [Votre site web/application] > Cookie Solution.

Cookie Solution - Générer votre bandeau cookies

Vous accéderez alors directement au panneau de configuration de votre bandeau cookies.

Cookie Solution - Configurateur du bandeau cookies

Personnalisez le bandeau comme vous le souhaitez, puis cliquez sur Sauvegarder et sur Copier à côté du code de votre Cookie Solution.

Cookie Solution - Intégrer le bandeau cookies

Vous obtiendrez alors un code similaire à l’exemple suivant :

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "countryDetection": true,
        "consentOnContinuedBrowsing": false,
        "perPurposeConsent": true,
        "lang": "en",
        "siteId": 11223344, //use your siteId
        "cookiePolicyId": 55667788, //use your cookiePolicyId
        "floatingPreferencesButtonDisplay": "bottom-right",
        "banner": {
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true,
            "rejectButtonDisplay": true,
            "position": "float-top-center"
        }
    };
</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Avant de le coller dans votre thème Shopify, vous devrez y ajouter quelques informations. Dans l’exemple suivant, notez bien les deux sections identifiées par « code for Shopify », avec les lignes onPreferenceFirstExpressedCallback, _iub.csConfiguration.callback et « Tracking API » :

<script type="text/javascript">
    var _iub = _iub || [];
    _iub.csConfiguration = {
        "countryDetection": true,
        "consentOnContinuedBrowsing": false,
        "perPurposeConsent": true,
        "lang": "en",
        "siteId": 11223344, //use your siteId
        "cookiePolicyId": 55667788, //use your cookiePolicyId
        "floatingPreferencesButtonDisplay": "bottom-right",
        "banner": {
            "acceptButtonDisplay": true,
            "customizeButtonDisplay": true,
            "rejectButtonDisplay": true,
            "position": "float-top-center"
        }
    };

    <!-- code for Shopify (1 of 2) -->
    var onPreferenceFirstExpressedCallback = function(consent) {
        if (true == _iub.csConfiguration.perPurposeConsent) {
            consent.consent = Object.keys(consent.purposes).every(function(k) {
                return consent.purposes[k]
            });
        }
        window.Shopify.customerPrivacy.setTrackingConsent(consent.consent, function() {});
    }

    if (typeof _iub.csConfiguration.callback === 'object') {
        _iub.csConfiguration.callback.onPreferenceFirstExpressed = onPreferenceFirstExpressedCallback;
    } else {
        _iub.csConfiguration.callback = {
            onPreferenceFirstExpressed: onPreferenceFirstExpressedCallback
        };
    }
</script>

<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

<!-- code for Shopify (2 of 2) - Tracking API -->
<script type="text/javascript">
    window.Shopify.loadFeatures([{
            name: 'consent-tracking-api',
            version: '0.1',
        }, ],
        function(error) {
            if (error) {
                throw error;
            }
        });
</script>

3. Ajoutez le code de la Cookie Solution à votre boutique Shopify

Vous avez désormais deux possibilités :

Utiliser une application

Vous pouvez utiliser une application comme celle-ci pour ajouter le code de votre Cookie Solution (qui doit inclure les deux sections identifiées par « code for Shopify » dans la partie 2. Générez votre bandeau cookies ci-dessus) à la section <head> de votre boutique Shopify.

1. Accédez au panneau d’administration de votre boutique Shopify et rendez-vous dans Boutique en ligne > Thèmes. Cliquez alors sur Actions à droite, puis sur Modifier le code.

Shopify - Modifier le code

2. Créez un nouvel extrait de code dans le dossier Extraits et appelez-le iub-cookie-banner.liquid

Shopify - Ajouter un nouvel extrait

3. Collez le code de la Cookie Solution (qui doit inclure les deux sections identifiées par « code for Shopify ») dans le modèle iub-cookie-banner.liquid et enregistrez-le.

Shopify - Code de la Cookie Solution

4. Ouvrez le fichier de mise en page theme.liquid (dans le dossier Mise en page) et ajoutez {% include 'iub-cookie-banner' %} entre {{ content_for_header }} et </head>.

Shopify - theme.liquid

5. Répétez l’étape nº 4 pour les fichiers de mise en page gift_card.liquid et password.liquid.

Rares sont les catégories de cookies à bénéficier d’une exemption de l’exigence de consentement. Par conséquent, tous les scripts que vous avez ajoutés à vos pages et qui installent des cookies doivent être bloqués de façon préventive jusqu’à l’obtention du consentement.

Pour configurer le blocage préalable des cookies qui ne sont pas installés directement par Shopify (ou qui sont installés par des applications qui n’utilisent pas l’API Customer Privacy de Shopify), consultez notre guide consacré au blocage par balisage manuel ou découvrez les autres méthodes décrites dans notre introduction générale au blocage préalable.

Gérez le consentement aux cookies sur votre boutique Shopify

Générez un bandeau cookies

Voir aussi