FitConsent

By DIGITLOAD

Italiano

Documentazione

In questa pagina

Trova tutto ciò di cui hai bisogno per iniziare con FitConsent, dall’installazione all’uso avanzato.

Introduzione

Benvenuto nella documentazione di FitConsent.

Cos’è una Piattaforma di Gestione del Consenso (CMP)?

Una CMP è uno strumento che aiuta i siti web a raccogliere e gestire legalmente il consenso degli utenti al trattamento dei dati, un requisito di leggi sulla privacy come il GDPR in Europa e il CCPA in California. È la tecnologia alla base dei “banner dei cookie” che vedi su molti siti web.

FitConsent va oltre un semplice banner. Ti fornisce gli strumenti non solo per essere conforme, ma anche per ottimizzare l’esperienza utente, costruire fiducia e migliorare i tassi di consenso. Il nostro servizio include il supporto completo e automatico per il Google Consent Mode V2 e il Microsoft UET Consent Mode, garantendo che i tuoi tag di analisi e marketing adattino il loro comportamento in base al consenso dell’utente, il che è cruciale per il marketing basato sui dati in un mondo orientato alla privacy.

Installazione e configurazione

L’integrazione di FitConsent è progettata per essere rapida e semplice. Devi solo aggiungere un singolo snippet di script nella sezione <head> del tuo sito web. Questo script si occupa di tutto, dalla visualizzazione del banner alla gestione dei valori predefiniti del Google e Microsoft Consent Mode.

Prerequisito importante: Consent Mode

Il nostro script imposta automaticamente gli stati di consenso predefiniti necessari per Google Consent Mode v2 e Microsoft UET Consent Mode. Questo è cruciale affinché servizi come Google Analytics e Microsoft Advertising operino in modo conforme al consenso dell’utente. Assicurati di posizionare questo script il più in alto possibile nel tag <head> del tuo sito web, prima di qualsiasi altro script che possa utilizzare i cookie.

Inclusione diretta

Per l’installazione diretta, copia il seguente snippet di codice e incollalo nella sezione <head> del codice HTML del tuo sito web. È fondamentale posizionarlo il più in alto possibile, prima di qualsiasi altro script che possa impostare cookie (come Google Analytics o Microsoft UET).

<!-- FitConsent Banner Script -->
<script>
  // Define dataLayer and the gtag helper.
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  // Initialize Microsoft UET queue
  window.uetq = window.uetq || [];

  // Set default consent states for Google and Microsoft.
  // This MUST run before any other scripts using cookies.
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied'
  });
  
  window.uetq.push('consent', 'default', {
    'ad_storage': 'denied'
  });
</script>

<!-- Load your other scripts (e.g., Google Analytics, Microsoft UET) here -->
<!-- ... -->

<!-- Load FitConsent Banner to update consent based on user interaction -->
<script async defer src="https://app.fitconsent.com/api/banner?websiteId=YOUR_WEBSITE_ID"></script>
<!-- End FitConsent Banner Script -->

Google Tag Manager (Raccomandato)

Utilizzare il nostro template della community di Google Tag Manager (GTM) è il modo raccomandato per installare FitConsent. Gestisce correttamente il Google Consent Mode v2 e assicura che i tag si attivino in base al consenso dell’utente.

Passaggio 1: Abilitare la panoramica del consenso (configurazione una tantum)
  • 1. Nel tuo spazio di lavoro GTM, fai clic sulla scheda “Admin”.
  • 2. Sotto la colonna “Container”, fai clic su “Impostazioni del contenitore”.
  • 3. Nella sezione “Impostazioni aggiuntive”, seleziona la casella “Abilita la panoramica del consenso”.
  • 4. Fai clic su “Salva” nell’angolo in alto a destra.
Passaggio 2: Aggiungere il template di FitConsent
  • 1. Vai alla sezione “Template” nella barra laterale sinistra.
  • 2. Nel riquadro “Template dei tag”, fai clic su “Cerca nella galleria”.
  • 3. Cerca “FitConsent” e fai clic su “Aggiungi allo spazio di lavoro”.
  • 4. Conferma i permessi per aggiungere il template.
Passaggio 3: Creare un tag “Google Consent Default”
  • 1. Vai su “Tag” e fai clic su “Nuovo”.
  • 2. Nomina il tag “FitConsent – Consenso predefinito”.
  • 3. Fai clic su “Configurazione tag” e scegli “FitConsent” dall’elenco.
  • 4. Nel menu a discesa “Tipo di tag”, seleziona “Google Consent Default”. Questo imposterà i valori predefiniti sia per Google che per Microsoft.
  • 5. Nel campo “FitConsent Website ID”, incolla il tuo ID sito web unico dal tuo dashboard.
  • 6. Per l’attivatore, seleziona l’opzione integrata “Consent Initialization – Tutte le pagine”. Questo è cruciale.
  • 7. Salva il tag.
Passaggio 4: Creare il tag “FitConsent Banner Loader”
  • 1. Crea un altro tag “Nuovo”. Chiamalo “FitConsent – Caricatore banner”.
  • 2. Fai clic su “Configurazione tag” e scegli di nuovo “FitConsent”.
  • 3. Il “Tipo di tag” dovrebbe essere predefinito su “FitConsent Banner Loader”.
  • 4. Nel campo “FitConsent Website ID”, incolla il tuo ID sito web unico dal tuo dashboard.
  • 5. Per l’attivatore, seleziona anche “Consent Initialization – Tutte le pagine”.
  • 6. Salva il tag.

Passaggio 5: Configurare il tuo tag Google

Il passo finale è assicurarsi che il tuo tag Google principale (quello che invia i dati a Google Analytics) venga attivato correttamente in base al consenso dell’utente.

A) Se hai già un tag Google (es. “G-XXXXXXXXXX”) nel tuo contenitore:
  • 1. Fai clic sul tuo tag Google per modificarlo.
  • 2. Vai su “Impostazioni avanzate” > “Impostazioni di consenso”.
  • 3. Assicurati che sia selezionato “Nessun consenso aggiuntivo richiesto”. Il template di FitConsent gestisce i segnali di consenso per te.
  • 4. Salva le modifiche al tuo tag.
B) Se NON hai ancora un tag Google:
  • 1. Fai clic su “Tag” > “Nuovo”.
  • 2. Nomina il tag “Google Tag – GA4” o simile.
  • 3. Per “Configurazione tag”, scegli “Tag Google”.
  • 4. Inserisci il tuo ID di misurazione GA4 nel campo “ID tag” (es. “G-XXXXXXXXXX”).
  • 5. Per “Attivazione”, seleziona “Initialization – Tutte le pagine”.
  • 6. Vai su “Impostazioni avanzate” > “Impostazioni di consenso” e assicurati che sia selezionato “Nessun consenso aggiuntivo richiesto”.
  • 7. Salva il tag.
Passaggio 6: Gestire altri script (es. Microsoft Clarity, Facebook Pixel)

L’integrazione di FitConsent con il Google Consent Mode ti permette di gestire qualsiasi script di terze parti tramite GTM. Ecco come configureresti un tag come Microsoft Clarity:

  • 1. Aggiungi il tag: Aggiungi il tuo tag di terze parti a GTM (sia tramite un template della community che come tag HTML personalizzato).
  • 2. Configura le impostazioni di consenso: Modifica il tag, vai su “Impostazioni avanzate” > “Impostazioni di consenso”.
  • 3. Aggiungi un controllo del consenso: Seleziona “Richiedi consenso aggiuntivo perché il tag si attivi”. Apparirà una tabella.
  • 4. Scegli il tipo di consenso: Fai clic su “Aggiungi consenso richiesto” e seleziona il tipo di consenso appropriato. Per uno strumento di analisi come Clarity, sceglieresti analytics_storage. Per uno script di marketing come un Facebook Pixel o un tag Microsoft UET, potresti aggiungere sia ad_storage che analytics_storage.
  • 5. Imposta l’attivatore: Imposta l’attivatore del tag in modo che si attivi sul tuo evento di visualizzazione di pagina standard (es. “Initialization – Tutte le pagine” o un evento di “Visualizzazione pagina” personalizzato).

Ora, GTM verificherà automaticamente lo stato di consenso fornito da FitConsent. Il tag di Microsoft Clarity si attiverà solo dopo che l’utente ha acconsentito alla categoria “Analytics” nel tuo banner di consenso, e un tag UET si attiverà solo se “Marketing” è accettato.

Infine, fai clic su “Invia” e “Pubblica” il tuo contenitore GTM per rendere effettive le modifiche.

Plugin WordPress FitConsent CMP

Integra FitConsent con WordPress e la WP Consent API per una compatibilità senza soluzione di continuità con Google Site Kit.

Scarica da WordPress.org

FitConsent è una Piattaforma di Gestione del Consenso (CMP) potente e al tempo stesso semplice, progettata per aiutarti a rispettare le normative sulla privacy come il GDPR e il CCPA. Questo plugin rende incredibilmente facile aggiungere il banner di FitConsent al tuo sito WordPress. Soprattutto, fornisce una compatibilità automatica e pronta all’uso con la WP Consent API, che è lo standard utilizzato da Google Site Kit.

Utilizzando questo plugin, puoi attivare la funzione di modalità consenso di Google Site Kit ed essere certo che le scelte di consenso dei tuoi utenti vengano rispettate, consentendo un’analisi e un tracciamento degli annunci conformi ed efficaci.

Caratteristiche Principali

  • Configurazione Semplice: Ti basta inserire il tuo ID del sito web FitConsent e il plugin si occupa del resto.
  • Pronto per Google Site Kit: Funziona perfettamente con la modalità consenso di Google Site Kit, integrandosi con la WP Consent API.
  • Leggero: Il plugin è snello e non aggiunge alcun tipo di rallentamento al tuo sito web.
  • Comunicazione Standardizzata: Assicura che i segnali di consenso vengano trasmessi correttamente tra il tuo banner di consenso e gli altri plugin.

Guida all’installazione

Metodo 1: Installazione tramite la bacheca di WordPress
  1. Accedi alla tua bacheca di WordPress.
  2. Vai su Plugin > Aggiungi nuovo.
  3. Nella barra di ricerca, digita “FitConsent CMP” e premi Invio.
  4. Trova il plugin “FitConsent CMP” nei risultati della ricerca e clicca su Installa ora.
  5. Dopo l’installazione, clicca su Attiva.
Metodo 2: Installazione manuale via FTP
  1. Scarica il plugin FitConsent CMP dalla fonte ufficiale.
  2. Decomprimi il file scaricato per estrarre la cartella fitconsent-cmp.
  3. Connettiti al server del tuo sito web utilizzando un client FTP (ad esempio, FileZilla).
  4. Vai alla directory /wp-content/plugins/.
  5. Carica l’intera cartella fitconsent-cmp in questa directory.
  6. Torna alla tua bacheca di WordPress, vai su Plugin > Plugin installati e clicca su Attiva per “FitConsent CMP”.

Configurazione post-installazione

  1. Nella tua bacheca di WordPress, vai su Impostazioni > FitConsent.
  2. Trova il tuo ID del sito web FitConsent nella tua Dashboard FitConsent.
  3. Inserisci questo ID nel campo fornito e clicca su Salva modifiche.

Integrazione con Google Site Kit (se applicabile)

  1. Se stai utilizzando il plugin Google Site Kit, vai alle sue impostazioni.
  2. Assicurati che l’opzione Modalità di consenso sia abilitata.

Altre piattaforme (CMS)

Puoi usare FitConsent con qualsiasi sito web o sistema di gestione dei contenuti (CMS) come WordPress o Shopify che ti permetta di aggiungere codice HTML o JavaScript personalizzato. Ti raccomandiamo vivamente di usare la loro integrazione con Google Tag Manager se disponibile e di seguire le istruzioni GTM sopra menzionate. Altrimenti, puoi usare il metodo di “Inclusione diretta”.

Configurazione del tuo banner

Personalizza l’aspetto, il contenuto e il comportamento del banner dal tuo dashboard.

Impostazioni generali

Framework: Scegli la principale normativa sulla privacy a cui devi essere conforme (es. GDPR, CCPA, IAB TCF 2.2). Questa scelta adatta il comportamento predefinito del banner e le opzioni disponibili per allinearsi ai requisiti di quel framework.

Geotargeting (Premium): Scegli di mostrare il banner solo ai visitatori di regioni specifiche, come l’UE.

Layout: Seleziona tra un banner flottante (in varie posizioni sullo schermo) o un dialogo centrato che si sovrappone al tuo contenuto.

Aspetto

Personalizza i colori, i font e l’elevazione (ombre) per abbinarli perfettamente all’immagine e al feeling del tuo brand.

Logo e immagine di sfondo: Puoi anche aggiungere il logo della tua azienda o persino un’immagine di sfondo al banner per un’esperienza di branding completa.

Contenuto e lingue

Modifica tutto il testo del banner e del modal delle preferenze. FitConsent supporta più lingue, permettendoti di offrire un’esperienza nativa a tutti i tuoi utenti. Il Markdown di base è supportato nei campi di testo principali.

Ottimizzazione guidata dall’IA

Utilizza il nostro ottimizzatore guidato dall’IA per ottenere suggerimenti su colori, testo e layout che hanno dimostrato di aumentare i tassi di consenso in base al contenuto del tuo sito web e al tuo pubblico di riferimento.

FitConsent può visualizzare un elenco dettagliato e che si aggiorna automaticamente dei cookie e di altri elementi di archiviazione che il tuo sito utilizza. Questo viene spesso incluso in una pagina di Informativa sulla privacy per fornire piena trasparenza ai tuoi utenti.

Incorporare la dichiarazione

Per visualizzare la dichiarazione sui cookie, devi aggiungere un semplice elemento <div> alla tua pagina dove desideri che la tabella appaia, e quindi includere il nostro script di dichiarazione. Puoi trovare lo snippet di codice esatto per il tuo sito web nella scheda ‘Dichiarazione sui cookie’ della pagina di configurazione del tuo sito web.

Siti web HTML standard

Per siti web HTML standard o siti web costruiti con un CMS come WordPress (senza un frontend React headless), puoi aggiungere il seguente snippet direttamente all’HTML della tua pagina.

Lo script troverà automaticamente il <div> con l’ID fitconsent-declaration e inietterà la tabella dei cookie al suo interno.

<div id="fitconsent-declaration"></div>
<script async defer src="https://fitconsent.com/api/declaration.js"></script>
Siti web React e Next.js

Per evitare “errori di idratazione” nei framework basati su React come Next.js, è cruciale che lo script di dichiarazione non modifichi la pagina prima che React abbia terminato il suo rendering iniziale sul client.

Il modo raccomandato per ottenere ciò è creare un componente client dedicato che carichi lo script utilizzando un hook useEffect.

  1. Crea un componente client

Crea un nuovo file componente, ad esempio StorageDeclarationEmbed.tsx. Assicurati di includere la direttiva "use client"; in cima.

'use client';

import { useEffect } from 'react';

type StorageDeclarationEmbedProps = {
  websiteId: string;
};

export function StorageDeclarationEmbed({ websiteId }: StorageDeclarationEmbedProps) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = https://app.fitconsent.com/api/declaration.js?websiteId=${websiteId};
    script.async = true;
    script.defer = true;

    const container = document.getElementById('fitconsent-declaration');
    if (container) {
      container.appendChild(script);
    }

    return () => {
      // Clean up the script when the component unmounts
      if (container && container.contains(script)) {
        container.removeChild(script);
      }
    };
  }, [websiteId]);

  return <div id="fitconsent-declaration"></div>;
}

2. Utilizza il componente nella tua pagina

Ora puoi importare e usare questo componente su qualsiasi pagina, come la tua pagina sulla privacy.

import { StorageDeclarationEmbed } from '@/components/StorageDeclarationEmbed'; // Adjust the import path

export default function PrivacyPolicyPage() {
  return (
    <div>
      <h1>Informativa sulla privacy</h1>
      {/* ... other content ... */}

      <h3>Dichiarazione sull'archiviazione</h3>
      <p>
        Per una totale trasparenza, di seguito è riportato un elenco dei cookie specifici e
        di altri elementi di archiviazione che il nostro servizio potrebbe inserire nel tuo browser.
      </p>
      <StorageDeclarationEmbed websiteId="YOUR_WEBSITE_ID" />

      {/* ... other content ... */}
    </div>
  );
}

Questo approccio assicura che lo script venga caricato ed eseguito in modo sicuro sul lato client, evitando qualsiasi conflitto con il ciclo di vita del rendering di React.

Uso avanzato

Sfrutta i dati di consenso e comprendi il comportamento del banner.

Utilizzo dei dati di consenso sul tuo sito web

Dopo che un utente interagisce con il banner, FitConsent memorizza le sue scelte e i dati di geolocalizzazione in un cookie chiamato fitconsent_given. Puoi leggere questo cookie sul lato client o server per adattare l’esperienza utente.

Struttura del cookie

Il cookie contiene un oggetto JSON con due chiavi principali: choices e geo.

choices: Un oggetto in cui le chiavi sono le categorie di consenso (es. marketing, analytics) e i valori sono true o false.

geo: Un oggetto che contiene le informazioni geografiche dell’utente (es. codice paese, stato) al momento del consenso.

{
  "choices": {
    "marketing": true,
    "analytics": true
  },
  "geo": {
    "country": "US",
    "state": "CA"
  }
}

Esempio: Visualizzare un componente in base al consenso

Ecco come potresti visualizzare un banner promozionale speciale solo agli utenti in California che hanno acconsentito ai cookie di marketing.

import { useState, useEffect } from 'react';

function PromotedFeatures() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const cookie = document.cookie
      .split('; ')
      .find(row => row.startsWith('fitconsent_given='));

    if (cookie) {
      try {
        const consent = JSON.parse(decodeURIComponent(cookie.split('=')[1]));
        // Esempio: Controlla se l'utente è in California e ha acconsentito al marketing
        if (consent?.geo?.state === 'California' && consent?.choices?.marketing) {
          setShow(true);
        }
      } catch (e) {
        console.error('Errore durante il parsing del cookie FitConsent', e);
      }
    }
  }, []);

  if (!show) {
    return null;
  }

  return (
    // Il tuo componente per gli utenti che hanno acconsentito al marketing
    <div>Promozione speciale per la California!</div>
  );
}
Rilevamento automatico della lingua

Il banner di FitConsent rileva automaticamente la lingua preferita dell’utente e mostra la traduzione appropriata se ne hai fornita una. Questo processo segue un ordine di precedenza specifico:

  • 1. Per prima cosa controlla l’attributo lang sul tag html del tuo sito web (es. <html lang=”it”>). Questo è il metodo più affidabile.
  • 2. Se l’attributo lang non è presente, utilizzerà l’impostazione della lingua del browser dell’utente (navigator.language).
  • 3. Se nessuno dei precedenti corrisponde alle lingue che hai configurato, tornerà all’inglese (en) o alla prima lingua nel tuo elenco selezionato.
Best practice

Per ottenere i migliori risultati sui siti multilingue, assicurati che il tag <html> della tua pagina rifletta correttamente la lingua attuale visualizzata all’utente.