Passa al contenuto principale

Installazione del banner

⚠️ NOTA: Per l'integrazione di Avacy su Google Tag Manager con la nuova Google Consent Mode V2 seguire questa guida

Per integrare il banner è anzitutto necessario generare il relativo script dalla piattaforma Avacy SaaS. Esso consiste, come affermato precedentemente, in tre script:

<script id="oil-configuration" type="application/configuration" data-remote-config="https://avacy-cdn.url/domain-group-uuid.json"></script>
<script src="https://unpkg.com/@jumpgroup/avacy-banner/dist/oil.min.js"></script>
<script src="https://unpkg.com/@jumpgroup/avacy-banner/dist/oilstub.min.js"></script>

L’integrazione può avvenire sia tramite l’inserimento manuale nella propria pagina web, ossia semplicemente copiando lo script generato all’interno della pagina web, oppure tramite un tag manager.

Gli script vanno inseriti nella propria pagina web prima di qualsiasi altro script da caricare, affinché questi possano essere gestiti da Avacy.

Il primo script contiene la configurazione del banner, essa è rappresentata da un oggetto JSON (i cui dettagli sono visibili nel paragrafo seguente e può essere acquisita in due modi, da locale o da remoto. Nel caso di configurazione locale, l’oggetto JSON si trova direttamente inserito all’interno del tag script.

Nel caso di configurazione remota, invece, sarà presente un attributo data-remote-config che avrà come valore l’URL in cui è salvato l’oggetto di configurazione.

Una volta inseriti gli script in pagina, il banner sarà visibile all’interno di essa.

Release self-hosted e hosting remoto

È possibile utilizzare una Release self-hosted di Avacy al fine di migliorare le prestazioni di utilizzo del banner.

Le operazioni da effettuare sono:

  1. Upload in locale della cartella contenente la release di Avacy: verrà fornito uno zip della stessa.
  2. Inserire nell’oggetto di configurazione il percorso contenente la release di Avacy
 "publicPath": "/path/della/cartella"
  1. Cambiare il percorso dell’attributo src negli script di oil e oilstub
<script src="/path/della/cartella/oilstub.2.12.2-SNAPSHOT.min.js"></script>
<script src="/path/della/cartella/oil.2.12.2-SNAPSHOT.min.js" ></script>

In caso di configurazione da remoto, non sarà necessario inserire la cartella all’interno del progetto, ma sarà necessario specificare la path remota della cdn su cui essa viene hostata (es. se si utilizza unpkg la path sarà nel formato https://unpkg.com/:package@:version/:files)

Installare il Banner su Wordpress

Il Cookie Banner di Avacy si può inserire facilmente nel proprio sito con uno script che si integra nella maggior parte dei siti web.

Per integrare lo script del Banner su un sito realizzato con Wordpress segui questi step:

  1. Copia lo script del banner da Avacy ed entra nel backoffice del tuo sito in Wordpress.

avacy

  1. Nella lista di strumenti a sinistra cerca la sezione Plugin, cliccando su questo strumento troverai la lista dei plugin installati e/o da scaricare.

backofficewordpress

  1. Cerca il plugin "Header Footer Code Manager" nella barra di ricerca a destra, installalo se non già presente.

plugin

  1. Entra sulle impostazioni del plugin e aggiungi un nuovo Snippet cliccando il bottone in alto a sinistra.

  2. Configura lo snippet nominandolo, settando il type su HTML e la locazione su Header.

impostazioni

  1. Incolla lo script del banner nello spazio dedicato al codice dello snippet come da esempio e salva.

code

Ora il banner di Avacy sarà visibile nel sito e comparirà a ogni nuovo utente che atterrerà nel sito.

Installare il Banner su Elementor

Per installare il Cookie Banner di Avacy in un sito realizzato con Elementor, copia negli appunti lo script del banner e continua con le seguenti indicazioni:

  1. Entra nel backoffice del sito, nella lista di strumenti a sinistra troverai la voce Elementor con la relativa sottovoce "Codice personalizzato".

elementor-code

  1. Clicca la sottovoce "Codice personalizzato" e aggiungi un nuovo codice

  2. Inserisci un nome al codice e inserisci lo script del Cookie Banner di Avacy che hai copiato in precedenza nell'apposito spazio. Assicurati che la locazione dello script sia <head> e pubblica il codice.

NB: Assicurati che le impostazioni generali dello stile del sito in Elementor non sovrascriva lo stile del banner, quindi spostati nel frontend del sito e sotto la voce "Modifica con Elementor" troverai la voce "impostazioni del sito".

edit-elementor

Entra nelle impostazioni del sito e nella parte relativa agli stili del tema dei pulsanti, assicurati che non ci siano settati colore e font che possano cambiare lo stile del cookie banner di Avacy.

Installare il Banner su Shopify

Per integrare lo script del Banner su un sito realizzato con Shopify segui questi passaggi:

  1. Entra nel sito, clicca la voce “Negozio online” nel menu degli strumenti a sinistra, e vai sui Temi.

  2. Ora clicca sui tre puntini rispetto il tema che stai utilizzando e clicca “modifica codice”

edit-elementor

  1. Nella barra di ricerca a sinistra in alto, cerca il file theme.liquid, aprilo, copia il codice del cookie banner da Avacy e incollalo nella riga prima della riga con <head>

edit-elementor

  1. Salva la modifica, così che appaia il cookie banner all’interno del sito.

Installare il Banner su Magento

  1. Per integrare il cookie banner di Avacy su Magento bisogna andare nella sezione Contenuto nel pannello degli strumenti a sinistra e cliccare su Configurazione.

edit-elementor

  1. Clicca modifica sul tema che utilizzi, apri la sezione Head HTML, premi invio per creare una riga vuota e incolla il codice del banner nello spazio dedicato agli script, mantenendo comunque gli altri codici inseriti in quello spazio.

edit-elementor

  1. Salva la configurazione.

Installare il Banner su Hubspot

  1. Per integrare Avacy su HubSpot, vai nella sezione marketing e clicca la sotto categoria sito web, poi apri pagine del sito web

edit-elementor

  1. Clicca su modifica in una pagina del sito per poi andare nelle impostazioni avanzate

edit-elementor

  1. Incolla il codice del cookie banner nello spazio HTML Head, poi salva. NB: Ripeti questi passaggio per ogni pagina del sito.

edit-elementor

Installare il Banner su Google tag Manager

  1. Per integrare il banner su Google tag manager, accedi alla dashboard di GTM, clicca su aggiungi un nuovo tag

edit-elementor

  1. Clicca su configurazione tag, cerca e seleziona HTML Personalizzato

edit-elementor

  1. Incolla il codice del banner nell’apposito spazio e clicca il blocco Attivazione selezionando All Pages così che il banner compaia in tutte le pagine del sito

edit-elementor

  1. Copia il codice di attivazione eventi del consenso qui sotto:
<script>
window.addEventListener('avacy_consent', function(event) {  
  console.log('event.detail', event.detail)
  if (event.detail.purposes) {
    event.detail.purposes.forEach(function(element){
        window.dataLayer.push({
          event: 'avacy_consent_given_purpose_' + element
        });
      })
  }
  
  if (event.detail.customVendorsWithConsent) {
    event.detail.customVendorsWithConsent.forEach(function(element){
        window.dataLayer.push({
          event: 'avacy_custom_vendor_' + element.id
        });
      })
  }
  
  if (event.detail.iabVendorsWithConsent) {
    event.detail.iabVendorsWithConsent.forEach(function(element){
        window.dataLayer.push({
          event: 'avacy_iab_vendor_' + element.id
        });
      })
  }
})
</script>
  1. Crea un tag HTLM personalizzato con attivatore All Pages. Nominalo Avacy Eventi

edit-elementor

Creare degli attivatori per tag su GTM

  1. Vai nella lista fornitori attivi su Avacy e seleziona un fornitore ad esempio Google e copia l’id dell’attivatore (avacy_iab_vendor_755) che si legge nel messaggio di info del fornitore.

  2. Crea un attivatore di tipo evento personalizzato e nominalo Avacy Attivatore Google (nominalo con il nome del fornitore che hai scelto).

edit-elementor

NB: Questa procedura deve essere ripetuta per tutti i fornitori che si trovano nella lista fornitori attivi su Avacy

Creare Tag Page View Basici

  1. Crea il Tag di visualizzazione di pagina e come attivatore inserisci l’attivatore precedentemente creato nella guida precedente su come Creare degli attivatori per tag su GTM

edit-elementor

Creare Tag per il tracciamento di Eventi particolari

Degli eventi particolari potrebbero essere l’iscrizione ad una newsletter ad esempio se si vuole tracciare l'iscrizione su Google Analytics 4, Meta e Pinterest, i gruppi di attivatori per il tag "Iscrizione newsletter" saranno tre, uno per ogni fornitore.

  1. Crea l’attivatore di tipo evento personalizzato/clic etc per il vostro evento

  2. Crea un gruppo di attivatori con l’attivatore appena creato e l’attivatore del fornitore creato in precedenza seguendo la guida Creare degli attivatori per tag su GTM. Nominalo in modo che riesca a riconoscerlo.

I gruppi di attivatori devono essere creati per ciascun evento e per tutti quei fornitori all’interno della lista fornitori attivi per i quali volete effettuare il tracciamento.

edit-elementor

  1. Crea il tag apposito e come attivatore seleziona il gruppo di attivatore appena realizzato.

edit-elementor

NB: L’operazione va ripetuta allo stesso modo per tutti gli eventi successivi che si vogliono tracciare all’interno del proprio sito. L’attivatore di Google è valido per tutti i prodotti Google.

Una volta completata correttamente tutta la procedura pubblica il contenitore.