Oggetto di configurazione
In questo paragrafo mostriamo la struttura dell’oggetto di configurazione del banner, in modo da illustrare cos’è che viene effettivamente inserito in pagina attraverso lo script.
L’oggetto di configurazione è un JSON contenente i parametri di configurazione necessari alla generazione del banner. Come già affermato in precedenza, l’oggetto viene generato dalla piattaforma Avacy SaaS dalla sezione apposita per un dato gruppo di domini e ogni label corrisponde a un preciso input field nella SaaS. Ogni modifica eseguita al banner comporta una sovrascrittura dell’oggetto di configurazione con i valori aggiornati, ciò implica che non c’è alcun versionamento del banner.
{
"auto_language": true,
"customVendorListUrl": "https://cdn.url.test/custom-vendor-list.json",
"logo_url": "https://icons-for-free.com/iconfiles/png/512/cookie-1319971784454690183.png",
"close_without_consents": true,
"publisher": "publisher_name",
"deviceEnvironment": "web", // oppure 'native' per ambiente mobile
"config_version": 1,
"policy_version": 2,
"advanced_settings": true,
"iabVendorListUrl": "https://cdn.test.it/assets/",
"timeout": -1,
"poi_activate_poi": false,
"poi_group_name": "PoiGroupName",
"poi_hub_origin": "https://test.jumpgroup.it",
"poi_hub_path": "/hub.html",
"show_limited_vendors_only": true,
"iabVendorWhitelist": [3, 4, 5],
"atpWhitelist": [39, 43, 46],
"additionalConsentUrl": "https://cdn.test.it/assets/additional-consent-providers.json",
"publicPath": "/",
"cookie_expires_in_days": 15,
"language": "it",
"languages": {
"it": {
"localeId": "it",
"version": 1,
"texts": {
"label_intro_heading": "Cookie e pubblicità su questo sito",
"label_button_yes": "Acconsento",
"label_intro": "Questo sito utilizza cookie e strumenti equivalenti, anche di terzi, per misurare il consumo e garantire la fruizione dei contenuti digitali, facilitare la navigazione, proporre pubblicità mirata. Per saperne di più puoi visionare l'informativa estesa <a href=\"https://www.test.it/privacy/CookiePolicy.html\" target=\"_blank\">cliccando qui</a>, per negare il consenso o gestire le tue preferenze usa il pulsante \"ESPRIMO PREFERENZE\". Premendo \"ACCONSENTO\" acconsenti all'uso di cookie e strumenti equivalenti.",
"label_cpc_heading": "Cookie e pubblicità su questo sito",
"label_cpc_text": "Puoi visionare l'Informativa estesa sui Cookie al seguente <a href=\"https://www.test.it/privacy/CookiePolicy.html\" target=\"_blank\">link</a>.",
"label_cpc_activate_all": "Attivare tutto",
"label_cpc_deactivate_all": "Disattiva tutto",
"label_third_party": "Fornitori Che Aderiscono a IAB TCF",
"label_cpc_purpose_title": "Finalità",
"label_cpc_special_purpose_title": "Finalità Speciali",
"label_cpc_feature_title": "Funzionalità",
"label_cpc_special_feature_title": "Funzionalità Speciali",
"label_cpc_read_less": "Leggi di meno.",
"label_cpc_read_more": "Leggi di più...",
"label_button_back": "Indietro",
"label_button_advanced_settings": "Esprimo preferenze",
"label_custom_thirdparty_heading": "Altri Fornitori",
"label_third_party_object_legint": "Legittimo interesse per i fornitori",
"label_cpc_purpose_optout_confirm_heading": "Sei sicuro?",
"label_cpc_purpose_optout_confirm_text": "Queste impostazioni modificheranno l'esperienza sul sito.",
"label_cpc_purpose_optout_confirm_proceed": "Contina",
"label_cpc_purpose_optout_confirm_cancel": "Cancella",
"label_poi_group_list_heading": "Lista delle unità aziendali",
"label_poi_group_list_text": "Unità aziendali",
"label_thirdparty_list_heading": "Your consent for third party software",
"label_thirdparty_list_text": "Here is a list of third party software.",
"label_nocookie_head": "In order to be able to provide our services in the best possible way, cookies must be activated in your browser.",
"label_nocookie_text": "Please activate cookies in the properties of your browsers. So you can do it in <a href=\"https://support.google.com/chrome/answer/95647?co=GENIE.Platform%3DDesktop&hl=en-GB\" class=\"as-oil__intro-txt--link\" target=\"_blank\">Google Chrome</a> or <a href=\"https://support.mozilla.org/en-US/kb/cookies-information-websites-store-on-your-computer\" class=\"as-oil__intro-txt--link\" target=\"_blank\">Firefox</a>.\".",
"label_cpc_legal_purpose_consent": "Finalità (Consenso)",
"label_cpc_legal_purpose_leg_int": "Finalità (Legittimo Interesse)",
"label_cpc_legal_special_purposes": "Finalità Speciali",
"label_cpc_legal_features": "Funzionalità",
"label_cpc_legal_special_features": "Funzionalità Speciali",
"label_third_party_description": "Questi servizi aderiscono al <a target=\"_blank\" href=\"https://iabeurope.eu/transparency-consent-framework/\">IAB Transparency and Consent Framework (TCF)</a>.",
"label_cpc_save": "Salva e Continua",
"label_cpc_legint_box_text": "Permetti a questo servizio di trattare i tuoi dati sulla base di un interesse legittimo.",
"label_cpc_legint_infobox_title": "Legittimo interesse",
"label_cpc_legint_infobox_description": "Un \"interesse legittimo\" è un interesse che, in base alla legislazione applicabile, giustifica il trattamento di dati personali.<br>I servizi che decidono di fare affidamento su di un interesse legittimo possono processare i tuoi dati a meno che tu non ti opponga a tale trattamento.<br><p><b>Deselezionando questa casella eserciti il tuo diritto di opposizione.</b></p>",
"label_additional_consent_heading": "Google Partner"
}
}
},
"visual_configuration" : {
"colors": {
"text_color_primary": "#80888c",
"text_color_secondary": "#262628",
"background_color": "#f9f9f9",
"secondary_background_color": "#dedede",
"accent_primary": "#0099f2",
"btn_primary_background": "#0099f2",
"btn_primary_background_hover": "#0d9ef3",
"btn_primary_text_color": "#ffffff",
"btn_secondary_background": "#0099f2",
"btn_secondary_background_hover": "#0d9ef3",
"btn_secondary_text_color": "#ffffff",
"btn_disabled_background": "#dfdfdf",
"btn_disabled_text_color": "#545454",
"slider_background": "#b1b6b8",
"slider_background_circle": "#ffffff",
"third_parties_background": "#eff0f0"
},
"banner_position": "PositionBottom",
"banner_animation": "SlideIn",
"font_base_scale": 1,
"font_family": "Montserrat"
}
}
Allo stato attuale, questo JSON viene salvato in uno storage remoto e lo script con id oil-configuration integrato in pagina si occupa di recuperarlo per mostrare il banner secondo la configurazione desiderata dall’utente.
Benché questa sia l’impostazione di default, è possibile fare l’override manuale dei parametri della configurazione intervenendo sullo script inserendo un JSON con le chiavi che si desidera modificare e il relativo valore. Ad esempio, per cambiare il parametro relativo alla durata di validità del consenso basta inserire un oggetto all’interno dello script nel seguente modo:
<script id="oil-configuration" type="application/configuration" data-remote-config="https://avacy-cdn.url/domain-group-uuid.json">
{
"cookie_expires_in_days": "180"
}
</script>
Così facendo, il valore del parametro cookie_expires_in_days preso dalla configurazione remota sarà sovrascritto da quello inserito manualmente. In sostanza, i valori impostati in questo modo hanno priorità su quelli presenti nella configurazione remota.
Di seguito abbiamo una tabella con delle informazioni aggiuntive per ogni parametro presente nell’oggetto di configurazione. Per ciascuno di essi, è possibile effettuare l’override come mostrato in precedenza.
Settaggi Generali
Valori generici di configurazione
| Parametro | Descrizione | Tipo |
| config_version | Versione dell’oggetto di configurazione | int |
| policy_version | Versione della privacy vigente | int |
| timeout | Timeout per l’auto-optin (-1 per disabilitare) | int | -1 |
| publicPath | string | |
| cookie_expires_in_days | Tempo di scadenza del cookie di OIL | int |
| language | Lingua di partenza del banner | |
| auto_language | Flag di lettura automatico dell’attributo lang della pagina HTML | bool |
| advanced_settings | Abilita il pannello delle preferenze | bool |
| close_without_consents | Abilita la ‘x’ per rifiutare tutto | bool |
| reject_all | Abilita il pulsante ‘Rifiuta Tutto’ | bool |
| use_legint | Abilita il legittimo interesse | bool |
| useStacks | Abilita la visualizzazione in stacks | [int] |
Gestione Power-Optin
| Parametro | Descrizione | Tipo |
| poi_activate_poi | Attivatore power-optin | bool |
| poi_group_name | Nome del file JSON contenente i membri del gruppo | string |
| poi_hub_origin | URL dell’hub del power-optin | string |
| poi_hub_path | Percorso relativo rispetto all’hub origin | string |
Gestione IAB
| Parametro | Descrizione | Tipo |
| iabVendorListUrl | Base URL da cui la GVL prende la vendor list | string |
| iabVendorWhitelist | Array contenente gli id dei vendors visibili | [int] |
| show_limited_vendors_only | Flag per mostrare solo i vendor dello IAB in whitelist | bool |
Gestione Additional Consent
| Parametro | Descrizione | Tipo |
| additionalConsentUrl | URL che punta al JSON contenente gli additional consent vendors | string |
| atpWhitelist | Array di vendor visibili | [int] |
Gestione Custom Vendors
| Parametro | Descrizione | Tipo |
| CustomVendorListUrl | URL che punta al json contenente i custom vendors | string |
Gestione SDK
| Parametro | Descrizione | Tipo |
| publisher | Nome del publisher se si vuole personalizzare la gestione delle SDK | string |
| deviceEnvironment | Ambiente di utilizzo del banner (“web”, “native”) | string |
Oggetto Languages
| Parametro | Descrizione | Tipo |
| languages | Oggetto contenente tutte le stringhe suddivise per lang_code | object |
Aspetto del banner
Generali
| Parametro | Descrizione | Tipo |
| logo_url | URL del logo da far visualizzare | string |
| font_base_scale | Moltiplicatore del font base size | number |
| font_family | Nome della famiglia dei font da richiamare alla regola | string |
Colori
| Parametro | Descrizione | Tipo |
| colors | Oggetto contenente tutti i colori del banner | object |
Comportamento
| Parametro | Descrizione | Tipo |
| banner_position | Posizione del banner, configurabile in 5 diversi modi. | string |
| optin_on_scroll | Indica se il consenso può essere prestato con lo scroll. | bool |
| optin_scroll_amount | Indica la quantità di scroll affinchè il consenso sia prestato. | int |
| animation | Animazione in entrata scelta tra Opacità e Slide | string |
| require_optout_confirm | Valore Booleano che permette di attivare o disattivare la modale di conferma per la disattivazione dei consensi. Se non inserito il valore di default: false | bool |
Testi del banner
Primo layer
| Parametro | Descrizione |
| Bottoni | |
| label_button_yes | Label pulsante per accettazione |
| label_button_advanced_settings | Label pulsante pannello preferenze |
| label_button_reject_all | Label pulsante per rifiuto |
| Testi | |
| label_intro_heading | Titolo pannello layer 1 |
| label_intro | Testo introduttivo |
Secondo layer
| Parametro | Descrizione |
| Bottoni | |
| label_cpc_activate_all | Label pulsante ‘Attiva Tutto’ |
| label_cpc_deactivate_all | Label pulsante ‘Rifiuta Tutto’ |
| label_button_back | Label pulsante ‘Indietro’ |
| label_cpc_read_less | Label pulsante ‘Leggi di meno’ |
| label_cpc_read_more | Label pulsante ‘Leggi di più’ |
| label_cpc_save | Label pulsante ‘Salva e Continua’ |
| Testi | |
| label_cpc_heading | Titolo pannello layer 2 |
| label_cpc_text | Testo introduttivo pannello interno |
| Testi Finalità | |
| label_cpc_purpose_title | Titolo finalità |
| Testi Finalità Speciali | |
| label_cpc_special_purpose_title | Titolo finalità speciali |
| Testi Funzionalità | |
| label_cpc_feature_title | Titolo funzionalità |
| Testi Funzionalità Speciali | |
| label_cpc_special_feature_title | Titolo funzionalità speciali |
| Testi Dettaglio Vendor IAB e Custom Vendor | |
| label_cpc_legal_purpose_consent | Label dettaglio vendor finalità |
| label_cpc_legal_special_purposes | Label dettaglio vendor finalità speciali |
| label_cpc_legal_features | Label dettaglio vendor funzionalità |
| label_cpc_legal_special_features | Label dettaglio vendor funzionalità speciali |
| label_cpc_legal_purpose_leg_int | Label dettaglio vendor finalità (legittimo interesse) |
| IAB | |
| label_third_party | Titolo tab laterale per IAB |
| label_third_party_description | Testo descrittivo sezione IAB |
| Altri Fornitori (Custom Vendors) | |
| label_custom_thirdparty_heading | Titolo tab laterale per altri fornitori |
| Additional Consent | |
| label_additional_consent_heading | Titolo tab laterale per additional consent |
| Legittimo interesse | |
| label_third_party_object_legint | Testo toggle attiva legint third party |
| label_cpc_legint_box_test | Testo box di spunta legittimo interesse |
| label_cpc_legint_infobox_title | Titolo dell’infobox |
| label_cpc_legint_infobox_description | Testo dell’infobox |
| TCF 2.1 | |
| label_cpc_cookie_disclosure_info | Label pulsante Maggiori informazioni |
| label_cpc_disclosure_panel_title | Label titolo pannello Informazioni Aggiuntive |
| label_cpc_disclosure_duration_prefix | Prefisso blocco cookie comunicato |
| label_cpc_retention_snippet_session | Label durata sessione |
| label_cpc_retention_snippet_undefined | Testo durata non definita |
| label_cpc_disclose_cookie_identifier | Testo id cookie comunicato |
| label_cpc_disclose_cookie_type | Testo tipo cookie comunicato |
| label_cpc_disclose_cookie_domain | Testo dominio cookie comunicato |
| label_cpc_disclose_cookie_duration | Testo durata cookie comunicato |
| label_cpc_disclose_cookie_purposes | Testo finalità cookie comunicato |
| Utilizzo Stack | |
| label_cpc_more_stack | Testo apertura dettaglio stack |
| label_cpc_less_stack | Testo chiusura dettaglio stack |
Modifica del Consenso
Al fine di poter ri-mostrare il banner e modificare il consenso, si potrà richiamare l’API showPreferenceCenter() in due modalità:
-
absolute: mostra il Pannello di Controllo in stile conforme al Cookie Banner iniziale, quindi nella stessa posizione. In questo caso non è necessario specificare il div tag contrassegnato dall’ id
oil-preference-center. -
inline: mostra il Pannello di Controllo esattamente dove viene inserito il tag
<div id="oil-preference-center"></div>.
Se non dovesse essere inserito alcun parametro, il metodo si comporterà di default come se fosse “inline”, e mostrerà il Pannello di Controllo come ultimo elemento visibile del body.
Aggiunta dei custom vendors
I Custom Vendors sono vendors che non supportano lo standard IAB. Avacy supporta la possibilità di inserire una lista di custom vendors. Ciò è possibile dalla SaaS inserendo un URL a un file JSON che contiene la lista con i suddetti vendors.
Nell’immagine vediamo il risultato dell’aggiunta di un Custom Vendors all’interno della configurazione del banner. La sezione si colloca sotto i vendors IAB nel pannello preferenze.
Come prima cosa è necessario creare un file json contenente la lista dei Custom Vendors desiderati.
Per ogni custom vendor è necessario specificare:
- un id univoco;
- un nome che verrà mostrato nel banner;
- l’URL della policy del custom vendor;
- gli id dei purpose associati;
- due snippet Javascript uno per opt-in e uno per opt-out. Questi snippet vengono lanciati quando l'utente aggiorna il consenso.
Riportiamo un esempio di lista di custom vendors dove è stato aggiunto il vendor Google con relativi purpose e snippet.
{
"vendorListVersion": 123,
"lastUpdated": "2018-11-27T01:25:33+01:00",
"vendors": [
{
"id": "Google",
"name": "Google",
"policyUrl": "https://support.google.com/admanager/answer/9012903?hl=it",
"purposeIds": [1, 2, 4],
"optInSnippet": "hasGoogleConsent=true",
"optOutSnippet": "hasGoogleConsent=false"
}
]
}
Successivamente, è necessario effettuare due modifiche all’oggetto globale affinché il banner rispecchi l’aggiunta della lista di custom vendors.
A tale oggetto si va ad aggiungere il parametro customVendorListUrl, cioè l’URL pubblico contenente il JSON precedentemente creato (es: "//avacy.it/custom-vendors.json" ); infine vanno aggiunte le seguenti labels nell’oggetto di configurazione del banner, all’interno di ogni lingua che lo compone:
- label_custom_thirdparty_heading: il testo dell’etichetta per il centro preferenze cookie della sezione dei custom vendors.
"texts":{
// ...
"label_cpc_heading":"Centro preferenze cookie",
"label_third_party":" Fornitori che aderiscono a IAB TCF",
"label_custom_thirdparty_heading " : "Altri fornitori",
"label_intro_heading":"Utilizziamo i cookie e altre tecnologie",
// ...
Visual configuration
La parte di configurazione visuale del banner è rappresentata dalla porzione di oggetto di configurazione identificato dalla chiave visual_configuration
L’oggetto seguente contiene dei valori di default.
"visual_configuration" : {
"colors": {
"text_color_primary": "#80888c",
"text_color_secondary": "#262628",
"background_color": "#f9f9f9",
"secondary_background_color": "#dedede",
"accent_primary": "#0099f2",
"btn_primary_background": "#0099f2",
"btn_primary_background_hover": "#0d9ef3",
"btn_primary_text_color": "#ffffff",
"btn_secondary_background": "#0099f2",
"btn_secondary_background_hover": "#0d9ef3",
"btn_secondary_text_color": "#ffffff",
"btn_disabled_background": "#dfdfdf",
"btn_disabled_text_color": "#545454",
"slider_background": "#b1b6b8",
"slider_background_circle": "#ffffff",
"third_parties_background": "#eff0f0"
},
"banner_position": "PositionBottom",
"banner_animation": "SlideIn",
"font_base_scale": 1,
"font_family": "Montserrat"
}
| Colors: | |
| Label | Significato |
| text_color_primary | Colore primario del testo |
| text_color_secondary | Colore secondario del testo |
| background_color | Colore di sfondo del banner |
| secondary_background_color | Colore di sfondo del banner secondario |
| accent_primary | Accent color primario |
| btn_primary_background | Colore di sfondo del bottone primario |
| btn_primary_background_hover | Colore di hover dello sfondo del bottone primario |
| btn_primary_text_color | Colore di testo del bottone primario |
| btn_secondary_background | Colore di sfondo del bottone secondario |
| btn_secondary_background_hover | Colore di hover dello sfondo del bottone secondario |
| btn_secondary_text_color | Colore di testo del bottone secondario |
| btn_disabled_background | Colore di sfondo del bottone disabilitato |
| btn_disabled_text_color | Colore di testo del bottone disabilitato |
| slider_background | Colore di sfondo del toggle di selezione |
| slider_background_circle | Colore del cerchio del toggle di selezione |
| third_parties_background | Colore di sfondo della sezione dedicata alle terze parti |
| Label | Descrizione | Possibili valori |
| banner_position | Posizione del banner | In alto, in basso, in alto al centro, in basso al centro, al centro |
| banner_animation | Animazione in entrata | Opacità, slide |
| font_base_scale | Dimensione del testo | piccolo, medio, grande, dimensione personalizzata |
| font_family | Specifica la font family per il testo. Necessario includere il font. |