Come integrare il CMP in un negozio Shopify?

Informazioni sulla deprecazione della Checkout Extensibility su Shopify: Probabilmente sei già a conoscenza del fatto che gli script della Checkout Extensibility su Shopify sono stati deprecati. Di conseguenza, il banner di consenso non apparirà più durante il processo di checkout. Tuttavia, se implementi la modalità di consenso di Shopify come indicato nei nostri documenti di aiuto, Shopify gestirà il consenso per te senza problemi. State tranquilli, seguire le nostre linee guida garantirà che tutto funzioni senza intoppi. Per istruzioni dettagliate, continuate a leggere.

Nota bene: la descrizione sottostante è valida solo per il codice di blocco manuale. Se desideri utilizzare il blocco automatico del codice, assicurati che il codice CMP sia inserito direttamente dopo l' <head> elemento del codice del tuo sito web.

API sulla privacy dei clienti di Shopify

Per attivare in modo sicuro determinati plugin all'interno di Shopify, è necessario richiamare l'API Shopify Customer Privacy. Il CMP lo farà automaticamente, se seguirai attentamente i passaggi di integrazione descritti di seguito.

Video di integrazione

Integrazione passo dopo passo

Per integrare il codice CMP in un negozio Shopify, segui questi passaggi:

  1. Nel tuo account Consentmanager, vai su Menu > CMP > Integrazioni e attiva la modalità Consenso Shopify

  2. Assicurati in Menu > CMP > Finalità che tu abbia un numero sufficiente di finalità attive nel tuo CMP
  3. (facoltativo) Se si utilizza il blocco automatico, consigliamo di disabilitare il blocco automatico degli URL sconosciuti:

  4. Vai su Menu > CMP > Fornitori e assicurati di avere i fornitori denominati "Shopify International Limited …" (ID s971, s2789, s2790, s2791, s2697) nel tuo elenco fornitori

    (Nota: non tutti questi fornitori sono necessari in tutti i casi)
  5. Nel tuo elenco fornitori, assicurati che tutti i fornitori Shopify siano assegnati a uno scopo corrispondente
  6. Vai su Menu > CMP > Ottieni codici per… Sito web e copia il codice CMP
  7. Accedi al tuo account Shopify
  8. Nel menu clicca su Negozio online > Temi e modifica il codice del tema attuale:

  9. Apri il file theme.liquid, cerca <body ...> (se vuoi usare il codice di blocco manuale) oppure <head ...> (se vuoi usare il codice di blocco automatico) e inserisci il codice CMP subito dopo:

  10. Clicca su Salva e torna alla home page dello store
  11. Clicca su Impostazioni > Privacy dei clienti e disattiva il banner sui cookie (se il banner sui cookie di Shopify è abilitato, altrimenti salta questo passaggio)



    Nota: se Shopify non ti mostra il menu Banner cookie > Altre azioni > Disattiva banner cookie, assicurati di eliminare prima tutti gli altri plugin relativi al banner cookie tramite Impostazioni > App e canali di vendita > … > Disinstalla). In alcuni casi è utile anche abilitare il banner cookie di Shopify e poi disabilitarlo nuovamente.

    Nota: in alcune versioni di Shopify l'impostazione dice "Rimuovi banner cookie" invece di "Disattiva banner cookie":

     

  12. Torna su Impostazioni > Privacy dei clienti e clicca su Banner sui cookie, quindi su Altre azioni > Usa banner


    sui cookie personalizzato Nota: in alcune versioni di Shopify questa impostazione non è presente; dovresti invece vedere le seguenti schermate:

    L'avviso che Shopify mostra qui può essere ignorato poiché hai inserito manualmente il codice nel tema.

  13. Quando abiliti il banner dei cookie personalizzato (o se è già abilitato in Impostazioni > Privacy dei clienti > Banner dei cookie > Regioni > Modifica), assicurati che tutte le regioni siano selezionate e poi clicca su Conferma.

Importante: assicurati sempre di aver disattivato tutti gli altri plugin per i banner sui cookie e i plugin per la modalità di consenso nel tuo negozio Shopify in Impostazioni > App e canali di vendita:

 

Problemi tipici

Problema: l'analisi di Shopify non conta più / conta meno

In alcuni casi, il blocco automatico potrebbe bloccare anche il sistema di tracciamento interno di Shopify. Per evitare ciò, accedi al tuo account Consentmanager, vai su Menu > CMP > Altro e disattiva l'impostazione Blocca script inline:

Problema: l'impostazione predefinita della Modalità Consenso di Google è "concesso"

Purtroppo il sistema di tracciamento di Shopify imposta lo stato di consenso della Modalità Consenso di Google su granted per impostazione predefinita. Per evitare ciò, aggiungi il seguente codice nel tuo tema:

  1. Nel menu clicca su Negozio online > Temi e modifica il codice del tema attuale:

  2. Apri il file theme.liquid, cerca <head>
  3. Subito dopo <head> inserisci il seguente codice (dopo <head> e prima di qualsiasi altro codice):
 <script>
  //Prevent Shopify from writing default consent mode before consentmanager loaded
  window.dataLayer = window.dataLayer || [];
  function gtag ()
  {
   if (!('cmploaded' in this))
   {this.cmploaded = false;}
   if (arguments.length > 1 && arguments[0] == 'consent' && arguments[1] == 'default' && !this.cmploaded)
   { return; }
   if (arguments.length > 1 && arguments[0] == 'set' && arguments[1] == 'developer_id.dMzk4MW')
   {this.cmploaded = true;}
   dataLayer.push(arguments);
  }
  window.dataLayer.push(['consent', 'default', {
   'ad_storage':         'denied',
   'analytics_storage':  'denied',
   'ad_user_data':       'denied',
   'ad_personalization': 'denied',
   'wait_for_update':    500
  }]);
 </script>

Problema: il Consent Layer di Consentmanager non è visibile

Alcuni temi Shopify hanno uno stile CSS aggiuntivo che nasconde gli elementi DIV vuoti. Se hai attivato l'opzione WCAG nel tuo design (Menu > Design > Modifica design > Impostazioni box), il CMP viene posizionato in una radice ombra, quindi il DIV padre sembra essere vuoto e viene nascosto dal CSS di Shopify. Per risolvere questo problema, devi aggiungere una regola personalizzata per non nascondere i DIV vuoti:

  1. Nel tuo pannello di amministrazione di Shopify, vai su Negozio online > Temi
  2. Clicca su Personalizza.
  3. Clicca su Impostazioni tema.
  4. Clicca su CSS personalizzato.
  5. Aggiungi una nuova regola CSS e premi Salva:
div#cmpwrapper {display: block;}

We do our best to keep this purely informative documentation up to date. However, if you notice that any of these guides need a little touch-up, let us know!