Skip to main content

Getting Started

In 30 secondi: HTML config + bundle script + listener consenso.

1. Configura il CMP​

Inserisci un blocco <script type="application/json" id="avacy-config"> nell'<head> della pagina. Il bundle lo legge una volta al boot.

<script type="application/json" id="avacy-config">
  {
    "publisherCountryCode": "IT",
    "language": "it",
    "policyVersion": 1,
    "frameworks": [
      {
        "tcf": {
          "cmpId": 297,
          "frameworkVersion": 2,
          "vendors": "all"
        }
      }
    ]
  }
</script>

→ Schema completo della config: vedi UserConfigType.

2. Carica il bundle​

<script src="https://cdn.avacy.com/cmp-web/latest/cmpweb.esm.js" type="module"></script>

Il banner viene mountato automaticamente. Se il consenso è già stato dato in una visita precedente, viene mountata invece l'icona "shield" (re-open preferences).

3. Ascolta il consenso​

document.addEventListener('avacy:consent-saved', (event) => {
  const { type, timestamp } = event.detail;
  console.log(`user saved consent (${type}) at`, new Date(timestamp));

  if (type === 'AcceptAll') initAnalytics();
  if (type === 'RejectAll') stopAnalytics();
});

→ Tutti gli eventi disponibili: vedi Events.

4. (Opzionale) Apri il pannello preferenze a richiesta​

Esponi un link "Gestisci consenso" nel footer:

<a href="#" onclick="window.Avacy.showPreferenceCenter(); return false;">
  Gestisci consenso
</a>

→ Tutti i metodi UI: vedi UI control.

5. (Opzionale) Boot programmatico​

Se hai bisogno di controllare il momento esatto in cui il banner appare (animazioni hero, SPA, config async), setta core.autoInit: false nella config inline e chiama window.Avacy.init() quando vuoi:

<script type="application/json" id="avacy-config">
  { "core": { "autoInit": false }, "publisherCountryCode": "IT", "language": "it",
    "frameworks": [{ "tcf": { "cmpId": 297, "frameworkVersion": 2, "vendors": "all" } }] }
</script>
<script src="https://cdn.avacy.com/cmp-web/latest/cmpweb.esm.js" type="module"></script>
<script>
  document.addEventListener('hero:animation-done', () => {
    window.Avacy.init();
  });
</script>

→ Dettagli + caveat su consent-gating dei vendor: vedi init.

Esempio end-to-end​

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="utf-8">
  <title>Esempio Avacy CMP</title>

  <script type="application/json" id="avacy-config">
    {
      "publisherCountryCode": "IT",
      "language": "it",
      "frameworks": [{ "tcf": { "cmpId": 297, "frameworkVersion": 2, "vendors": "all" } }]
    }
  </script>

  <script src="https://cdn.avacy.com/cmp-web/latest/cmpweb.esm.js" type="module"></script>
</head>
<body>
  <h1>Hello world</h1>

  <a href="#" onclick="window.Avacy.showPreferenceCenter(); return false;">
    Gestisci consenso
  </a>

  <script>
    document.addEventListener('avacy:consent-saved', (e) => {
      console.log('consent:', e.detail.type);
    });
  </script>
</body>
</html>

Prossimi passi​