Installare ConsentJoy

Lo snippet

Incollalo il più in alto possibile nel <head> di ogni pagina, prima degli altri script. Il codice del sito te lo diamo in dashboard: resta lo stesso anche quando cambi testi, colori o categorie.

<script src="https://consent.joyadv.it/v1/cmp.js"
        data-site-id="IL_TUO_ID_SITO"></script>

Lo script è caricato senza async di proposito: imposta Google Consent Mode su "negato" prima che partano i tag di Google. Pesa circa 8 KB compressi.

Se usi Google Tag Manager o tag di Google che rispettano il consenso solo tramite Consent Mode (senza bloccarli come spiegato sotto), aggiungi prima dello snippet anche questa riga. Così i tag partono su "negato" anche nel caso raro in cui lo script di ConsentJoy non si carichi, per esempio per un problema di rete.

<script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments);}
gtag("consent","default",{ad_storage:"denied",ad_user_data:"denied",ad_personalization:"denied",
analytics_storage:"denied",functionality_storage:"denied",personalization_storage:"denied",
security_storage:"granted"});</script>

Bloccare uno script finché non c'è il consenso

Cambia il tipo dello script in text/plain e indica la categoria. Il browser non lo esegue; ConsentJoy lo attiva solo quando il visitatore accetta quella categoria.

<script type="text/plain" data-cj-category="statistiche"
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXX"></script>

Le categorie sono preferenze, statistiche, marketing e contenuti. I cookie necessari non si bloccano.

Se uno script bloccato deve avere un tipo particolare (per esempio module), indicalo con data-cj-type="module": verrà ripristinato quando lo script si attiva.

Video, mappe e iframe

Sposta l'indirizzo in data-cj-src e indica la categoria: l'iframe si carica solo dopo il consenso.

<iframe data-cj-src="https://www.youtube-nocookie.com/embed/ID"
        data-cj-category="contenuti" width="560" height="315"></iframe>

Scelta per singolo servizio

Se nell'editor del banner hai elencato i servizi, il visitatore può spegnerne uno dentro una categoria accettata. Aggiungi allo script o all'iframe l'attributo data-cj-service con l'identificativo che vedi nell'editor:

<script type="text/plain" data-cj-category="statistiche"
        data-cj-service="hotjar" src="..."></script>

Integrazioni

Il codice qui sotto è quello che verifichiamo con test automatici: resta fermo senza consenso e parte quando il visitatore accetta la categoria (e non ha spento il servizio). Non possiamo garantire cosa faccia poi lo strumento di terzi una volta attivato: per questo il blocco passa sempre dal consenso.

<script type="text/plain" data-cj-category="statistiche" data-cj-service="google-analytics"
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script type="text/plain" data-cj-category="statistiche" data-cj-service="google-analytics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

<!-- dopo lo snippet ConsentJoy -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>

<script type="text/plain" data-cj-category="marketing" data-cj-service="meta-pixel">
  !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
  n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
  document,'script','https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'IL_TUO_PIXEL_ID');
  fbq('track', 'PageView');
</script>

<script type="text/plain" data-cj-category="marketing" data-cj-service="tiktok-pixel">
  !function (w, d, t) { w.TiktokAnalyticsObject=t; var ttq=w[t]=w[t]||[];
  /* ... codice fornito da TikTok ... */
  ttq.load('IL_TUO_PIXEL_ID'); ttq.page(); }(window, document, 'ttq');
</script>

<iframe data-cj-src="https://www.youtube-nocookie.com/embed/ID_VIDEO"
        data-cj-category="contenuti" data-cj-service="youtube"
        width="560" height="315" title="Video" allowfullscreen></iframe>

<iframe data-cj-src="https://www.google.com/maps/embed?pb=..."
        data-cj-category="contenuti" data-cj-service="google-maps"
        width="600" height="450" title="Mappa" loading="lazy"></iframe>

Per i tag gestiti con Tag Manager, ConsentJoy invia a ogni scelta gli aggiornamenti di Google Consent Mode v2 e l'evento cj_consent_update nel dataLayer, con le variabili cj_consent (le categorie) e cj_denied_services (i servizi spenti).

WordPress

Il modo più semplice è il plugin ConsentJoy: scarica consentjoy-wordpress.zip, poi in WordPress vai su Plugin, Aggiungi nuovo, Carica plugin, e attivalo.

1. In Impostazioni, ConsentJoy incolla il codice del sito (il valore di data-site-id che trovi nella dashboard, oppure tutto lo snippet). La pagina ti dice subito se il collegamento funziona.
2. Il blocco automatico è già attivo. Il plugin riconosce nelle pagine e tiene fermi fino al consenso Google Analytics, Google Ads, Meta Pixel, TikTok, LinkedIn, Pinterest, Microsoft Advertising, Hotjar, Microsoft Clarity, i video di YouTube e Vimeo, Google Maps, Instagram e X. Video e mappe mostrano un riquadro con il pulsante per caricarli. Puoi escludere i servizi che non vuoi bloccare.
3. Premi "Controlla la home": vedi cosa resta in attesa del consenso e quali script partono ancora da altri domini.
4. Per il link alle preferenze aggiungi a un menu un link personalizzato con indirizzo #consentjoy-preferenze, oppure usa lo shortcode [consentjoy_preferenze].

Il plugin passa le scelte dei visitatori alla WP Consent API, letta da plugin come WooCommerce e Site Kit di Google. Funziona con WP Rocket, LiteSpeed Cache, Autoptimize, W3 Total Cache, WP Super Cache, SiteGround Optimizer e Cloudflare, e ne svuota la cache quando cambi le impostazioni. Si aggiorna da solo, come gli altri plugin.

Google Tag Manager non viene bloccato: parte con Consent Mode su "negato" e sono i singoli tag a dover rispettare il consenso. Gli script che il plugin non riconosce si bloccano dalle regole manuali nelle impostazioni, o modificandoli come mostrato sopra. La scansione di ConsentJoy ti segnala quelli che partono ancora prima del consenso.

Shopify

Da Negozio online, Temi, Modifica codice, apri theme.liquid e incolla lo snippet subito dopo <head>. Le app di Shopify che caricano script da sole e il pixel dei clienti di Shopify non passano da questo blocco: per quelli usa le impostazioni di privacy dei clienti di Shopify. Prima di andare online prova il risultato in un tema duplicato.

Lingue

Il banner usa la lingua dichiarata dalla pagina, per esempio <html lang="en">, se nell'editor hai attivato i testi in quella lingua (inglese, tedesco, francese, spagnolo). Altrimenti resta in italiano.

Riaprire le preferenze

Il visitatore deve poter cambiare idea in qualsiasi momento. ConsentJoy mostra un piccolo pulsante permanente; se preferisci un link nel footer, usa:

<a href="#" onclick="ConsentJoy.open(); return false;">Preferenze cookie</a>

Per sapere da JavaScript cosa ha scelto il visitatore:

ConsentJoy.getConsent();          // { statistiche: true, marketing: false, ... } oppure null
ConsentJoy.getDeniedServices();   // ["hotjar"]: servizi spenti singolarmente
ConsentJoy.getConsentId();        // codice pseudonimo della scelta, per chiederne la cancellazione
ConsentJoy.onChange(function (scelte) { /* ... */ });

Se il visitatore toglie un consenso già dato, la pagina si ricarica: uno script già partito non si può fermare in altro modo.

Domande sull'installazione? Scrivici.