Cookie Consent su Shopify: banner nativo vs CookieConsent v3. Quando serve un'alternativa?

Shopify include gia un cookie banner nativo, gratuito e conforme al GDPR. Per molti store e piu che sufficiente. Ma in alcuni scenari specifici potresti aver bisogno di qualcosa di diverso. In questo articolo facciamo chiarezza su cosa copre il banner nativo, dove si fermano i suoi limiti, e quando ha senso valutare un'alternativa open source come CookieConsent v3 (oltre 5.300 stelle su GitHub).

Il cookie banner nativo di Shopify: cosa fa e cosa copre

Shopify offre un cookie banner integrato, gratuito e configurabile da Impostazioni > Privacy dei clienti > Cookie banner. Ecco cosa fa: si attiva automaticamente per i visitatori nelle regioni che lo richiedono (EEA, UK) se hai mercati attivi in quelle aree; blocca i cookie non essenziali di Shopify e degli Shopify Pixels fino a quando il visitatore non da il consenso; supporta la personalizzazione di colori, posizione e contenuti del banner; si traduce automaticamente nelle 20 lingue supportate da Shopify tramite l'app Translate & Adapt; include un link per modificare le preferenze cookie in qualsiasi momento; genera automaticamente una privacy policy e una pagina di opt-out per la condivisione dati.

Per la maggior parte degli store Shopify che usano solo app dall'App Store e Shopify Pixels, il banner nativo e sufficiente e conforme al GDPR. Non serve installare nient'altro.

Dove si fermano i limiti del banner nativo

Il punto cruciale lo dice la stessa documentazione di Shopify: il banner nativo gestisce solo i cookie e i pixel di Shopify e delle app integrate tramite la Customer Privacy API. Se hai installato manualmente script di terze parti (non tramite app Shopify compatibili), il banner nativo non li controlla e non li blocca.

In pratica, potresti aver bisogno di un banner custom se: hai inserito manualmente tag di Google Analytics, Google Tag Manager, Meta Pixel o altri script di tracking direttamente nel tema o tramite un'app come XO Insert Code; usi servizi di terze parti (chat widget, heatmap, A/B testing) che non sono integrati con la Customer Privacy API di Shopify; vuoi un controllo granulare su quali singoli script vengono attivati o bloccati in base alla scelta del visitatore, con callback personalizzate; hai requisiti di design specifici che il banner nativo non soddisfa, oppure vuoi un livello di personalizzazione dell'interfaccia che va oltre colori e posizione.

CookieConsent v3: l'alternativa open source

Se rientri in uno degli scenari descritti sopra, CookieConsent v3 e un'ottima scelta. E una libreria JavaScript gratuita (licenza MIT), senza dipendenze, con oltre 5.300 stelle su GitHub. Ti da il controllo completo: definisci le categorie di cookie, colleghi callback onAccept e onReject per attivare o bloccare ogni singolo script, e personalizzi completamente il design del banner e del pannello preferenze. Puoi provarlo nel playground interattivo: playground.cookieconsent.orestbida.com

Come installarlo su Shopify senza toccare il codice del tema

Sconsigliamo di editare direttamente il file theme.liquid: perdi gli aggiornamenti automatici del tema. Usa invece l'app gratuita XO Insert Code (5.0 stelle, 112 recensioni, certificata "Built for Shopify"): XO Insert Code

Nell'header, aggiungi il CSS:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.1.0/dist/cookieconsent.css">

Nel footer, aggiungi lo script completo che include l'integrazione con la Customer Privacy API di Shopify: le callback onFirstConsent e onChange sincronizzano automaticamente il consenso tra CookieConsent e Shopify. Il parametro autoDetect: 'document' rende il banner multilingua automaticamente.

Come reagire alle scelte dell'utente

CookieConsent v3 offre due meccanismi: l'attributo data-category sugli script (aggiungendo type="text/plain" e data-category="analytics") e le callback onConsent e onChange.

Come inserire il link per riaprire il pannello preferenze

Il GDPR richiede che l'utente possa modificare le proprie preferenze cookie in qualsiasi momento. Basta aggiungere:

<a href="#" onclick="CookieConsent.showPreferences(); return false;">Gestisci preferenze cookie</a>

Perche e importante l'integrazione con la Customer Privacy API di Shopify

Anche se usi un banner esterno come CookieConsent v3, devi comunque comunicare le scelte del visitatore a Shopify tramite la sua Customer Privacy API. Documentazione: shopify.dev/docs/api/customer-privacy.

E Google Tag Manager? La questione della sandbox Lax

Su Shopify, gli script di GTM caricati tramite Custom Pixel vengono eseguiti in una sandbox Lax (iframe isolato). CookieConsent non funzionera correttamente se caricato tramite Custom Pixel. La soluzione migliore resta caricare CookieConsent separatamente nell'header e nel footer.

Conclusioni

Il banner nativo di Shopify copre la maggior parte degli scenari. Per script di terze parti non integrati con la Customer Privacy API, CookieConsent v3 e un'alternativa solida e validata. Playground: playground.cookieconsent.orestbida.com. GitHub: github.com/orestbida/cookieconsent.

Codice di esempio

<script type="module">
import 'https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.1.0/dist/cookieconsent.umd.js';

// Sincronizza le scelte del visitatore con la Customer Privacy API di Shopify
function syncConsentWithShopify() {
  var analytics = CookieConsent.acceptedCategory('analytics');
  var marketing  = CookieConsent.acceptedCategory('marketing');
  window.Shopify.customerPrivacy.setTrackingConsent(
    { analytics: analytics, marketing: marketing, preferences: analytics },
    function() { console.log('Consenso sincronizzato con Shopify'); }
  );
}

// Carica la Customer Privacy API, poi avvia CookieConsent
window.Shopify.loadFeatures(
  [{ name: 'consent-tracking-api', version: '0.1' }],
  function(error) {
    if (error) return;

    CookieConsent.run({
      categories: {
        necessary: { enabled: true, readOnly: true },
        analytics: {
          autoClear: {
            cookies: [{ name: /^_ga/ }, { name: '_gid' }]
          }
        },
        marketing: {}
      },

      // Sincronizza con Shopify al primo consenso e ad ogni modifica
      onFirstConsent: function() { syncConsentWithShopify(); },
      onChange:       function() { syncConsentWithShopify(); },

      language: {
        default: 'it',
        autoDetect: 'document',
        translations: {
          it: {
            consentModal: {
              title: 'Questo sito utilizza i cookie',
              description: 'Utilizziamo cookie per migliorare la tua esperienza.',
              acceptAllBtn: 'Accetta tutti',
              acceptNecessaryBtn: 'Solo necessari',
              showPreferencesBtn: 'Gestisci preferenze'
            },
            preferencesModal: {
              title: 'Preferenze cookie',
              acceptAllBtn: 'Accetta tutti',
              acceptNecessaryBtn: 'Solo necessari',
              savePreferencesBtn: 'Salva preferenze',
              closeIconLabel: 'Chiudi',
              sections: [
                { title: 'Cookie necessari',  description: 'Essenziali per il funzionamento del sito.', linkedCategory: 'necessary' },
                { title: 'Cookie analitici',  description: 'Ci aiutano a capire come usi il sito.',    linkedCategory: 'analytics' },
                { title: 'Cookie di marketing', description: 'Usati per mostrarti annunci pertinenti.', linkedCategory: 'marketing' }
              ]
            }
          },
          en: {
            consentModal: {
              title: 'This website uses cookies',
              description: 'We use cookies to improve your experience.',
              acceptAllBtn: 'Accept all',
              acceptNecessaryBtn: 'Necessary only',
              showPreferencesBtn: 'Manage preferences'
            },
            preferencesModal: {
              title: 'Cookie preferences',
              acceptAllBtn: 'Accept all',
              acceptNecessaryBtn: 'Necessary only',
              savePreferencesBtn: 'Save preferences',
              closeIconLabel: 'Close',
              sections: [
                { title: 'Necessary cookies', description: 'Essential for the website to function.', linkedCategory: 'necessary' },
                { title: 'Analytics cookies', description: 'Help us understand how you use the site.', linkedCategory: 'analytics' },
                { title: 'Marketing cookies', description: 'Used to show you relevant ads.',            linkedCategory: 'marketing' }
              ]
            }
          }
        }
      }
    });
  }
);
</script>