Per posizionare l'utente sulla mappa di Locator, Uberall Locator deve inviare l'indirizzo IP dell'utente a Google. Per rispettare la privacy dell'utente finale, la mappa non verrà visualizzata prima di ricevere il consenso da parte dell'utente finale. Questa gestione del consenso dell'utente finale deve essere considerata durante l'implementazione di Uberall Locator e Pages.

Modo consigliato per configurare la gestione del consenso

Configurazione di base

Il store finder dovrebbe essere implementato nello stesso modo di consueto come menzionato in Modifica Locator e Pages.

Quando la pagina in cui è incorporato il store finder viene caricata e il banner dei cookie è visibile, dovrebbe essere visualizzata la versione senza la mappa. Questo può essere fatto con i seguenti passaggi:

1. Aggiunta di data-autostart="false" alla configurazione:

 <div
      style="min-height: 600px"
      id="store-finder-widget"
      data-key="YOUR_STOREFINDER_KEY"
      data-autostart="false"
    ></div>

Questo impedisce a Storefinder di caricarsi finché non potrai identificare se l'utente ha acconsentito al cookie o meno.

2. In attesa del caricamento degli script del store finder:

window.addEventListener("uberall-storefinder-ready", () => {}, { once: true });

3. Caricamento del widget con window.UberallStorefinderRestart

Puoi quindi visualizzare il store finder utilizzando la funzione globale window.UberallStorefinderRestart – a seconda dell'argomento che utilizzi, verrà visualizzata la mappa con o senza la mappa.

Con mappa:

window.UberallStorefinderRestart({ withoutMap: false })

Senza mappa:

window.UberallStorefinderRestart({ withoutMap: true })

4. Visualizzazione della versione con mappa senza ricarica quando un utente accetta i cookie

Quando un utente fa clic sul pulsante "accetta" dei cookie, il store finder non cambierebbe ancora direttamente alla versione che visualizza la mappa. Devi nuovamente chiamare window.UberallStorefinderRestart nell'evento click del pulsante.

document
 .getElementById("cookie-accept")
 .addEventListener("click", async function () {                
 // logica per impostare il cookie per il consenso, ad es. 
 // localStorage.setItem("cookieConsent", "accepted");

 // riavvia il store finder con mappa
 window.UberallStorefinderRestart({ withoutMap: false });
});

Esempio di implementazione

Mettendo tutto insieme, puoi quindi ad esempio visualizzare il store finder senza mappa finché l'utente non ha acconsentito:

<script>
      // ascolta il caricamento del store finder
      window.addEventListener(
        "uberall-storefinder-ready",
        () => {
          async function cookieConsent() {

            // questo verrebbe sostituito con un corretto controllo del consenso dei cookie in uno scenario reale
            const consent = localStorage.getItem("cookieConsent");

            if (consent !== null) {
              // a seconda del consenso, visualizza il store finder con o senza mappa
              window.UberallStorefinderRestart({
                withoutMap: consent !== "accepted",
              });
            } else {
              // altrimenti mostriamo la versione senza mappa finché l'utente non dà il consenso
              window.UberallStorefinderRestart({ withoutMap: true });
            }
          }

        document
         .getElementById("cookie-accept")
         .addEventListener("click", async function () {                
         // logica per impostare il cookie per il consenso, ad es. 
         // localStorage.setItem("cookieConsent", "accepted");

         // riavvia il store finder con mappa
         window.UberallStorefinderRestart({ withoutMap: false });
       });
       cookieConsent();
    },
  { once: true }
);
</script>

Esempio di implementazione completa

Qui c'è un esempio di implementazione completa di un store finder funzionante (devi solo aggiungere la tua chiave per farlo funzionare)

Avanzato

Puoi anche creare una promessa del listener di "uberall-storefinder-ready" che può essere utilizzata per creare stati dell'interfaccia utente di caricamento. Questo può essere fatto così:

const storefinderLoaded = new Promise(function (resolve) {
    window.addEventListener('uberall-storefinder-loaded', resolve, { once: true });
});

Quindi puoi usarlo così

await storefinderLoaded;
await window.UberallStorefinderRestart({ withoutMap: false });

Modo legacy per configurare la gestione del consenso

Impedire il caricamento della mappa di Locator

Prima di tutto, la mappa del locator non dovrebbe caricarsi subito quando si accede al sito web. Questo può essere realizzato impostando:

data-showbacklink="false"

Questo impedisce il caricamento della mappa in primo luogo e assicura che nessun dato venga inviato a Google.

Consenso

Successivamente, agli utenti dovrebbe essere chiesto di accettare i Cookie e di acconsentire all'invio del loro indirizzo IP a Google per il posizionamento. Implementa quanto segue:

// Gestisci lo stato del consenso
      // Cambia categoria qui, sempre nel formato ',<categoryID>,'
      if (OptanonActiveGroups.indexOf(",3,") > -1) {
        locatorSrc = "locator.uberall.com/locator-assets/storeFinderWidget-v2.js";
        window.dataLayer.push({ event: "OneTrustGroupsUpdated" }); // non dovrebbe essere necessario se non si utilizza GTM
        var storeFinder = document.getElementById("store-finder-widget");
        storeFinder.setAttribute("data-showbacklink", true);
      } else {
        locatorSrc =
          "https://locator.uberall.com/locator-assets/storeFinderWidget-v2-withoutMap.js";
      }

Nel caso in cui l'utente non dia il consenso, verrà indirizzato alla pagina «Tutte le posizioni», dove nessuna mappa viene caricata, ma tutte le pagine delle posizioni vengono elencate

Questo locatorSrc viene utilizzato:

else {
        locatorSrc =
          "https://locator.uberall.com/locator-assets/storeFinderWidget-v2-withoutMap.js";
      }

Nel caso in cui gli utenti consentano, dovrebbe essere utilizzata la fonte regolare e la mappa dovrebbe caricarsi.

Questo locatorSrc viene utilizzato:

{
        locatorSrc = "https://locator.uberall.com/locator-assets/storeFinderWidget-v2.js";
        window.dataLayer.push({ event: "OneTrustGroupsUpdated" }); // non dovrebbe essere necessario se non si utilizza GTM
        var storeFinder = document.getElementById("store-finder-widget");
        storeFinder.setAttribute("data-showbacklink", true);
      }

Leggi anche: Un Locator aggiunge cookie al sito web in cui è stato implementato?