Para poder posicionar al usuario en el mapa de Locator, Uberall Locator tiene que enviar la dirección IP del usuario a Google. Para respetar la privacidad del usuario final, el mapa no se mostrará antes de recibir el consentimiento del usuario final. Este manejo del consentimiento del usuario final debe considerarse al implementar Uberall Locator & Pages.

Forma recomendada de configurar la gestión del consentimiento

Configuración básica

El buscador de tiendas debe implementarse de la misma manera que se menciona en Editar Locator & Pages.

Cuando se carga la página donde está insertado el buscador de tiendas y se muestra el banner de cookies, debe mostrarse la versión sin el mapa. Esto puede hacerse con los siguientes pasos:

1. Agregar data-autostart="false" a la configuración:

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

Esto evita que el Storefinder se cargue hasta que puedas identificar si el usuario consintió en la cookie o no.

2. Esperar a que se carguen los scripts del buscador de tiendas:

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

3. Cargar el widget con window.UberallStorefinderRestart

Luego puedes mostrar el buscador de tiendas usando la función global window.UberallStorefinderRestart - dependiendo del argumento que uses, mostrará el mapa con o sin el mapa.

Con Mapa:

window.UberallStorefinderRestart({ withoutMap: false })

Sin Mapa:

window.UberallStorefinderRestart({ withoutMap: true })

4. Mostrar la versión con mapa sin recargar cuando el usuario acepta las cookies

Cuando un usuario hace clic en el botón de aceptación de cookies, el buscador de tiendas aún no cambiaría directamente a la versión que muestra el mapa. Necesitas volver a llamar a window.UberallStorefinderRestart en el evento click del botón.

document
 .getElementById("cookie-accept")
 .addEventListener("click", async function () {                
 // alguna lógica para establecer la cookie del consentimiento, p. ej. 
 // localStorage.setItem("cookieConsent", "accepted");

 // reiniciar el buscador de tiendas con mapa
 window.UberallStorefinderRestart({ withoutMap: false });
});

Ejemplo de implementación

Combinando todo esto, puedes entonces mostrar el buscador de tiendas sin mapa hasta que el usuario haya consentido:

<script>
      // escuchar que el buscador de tiendas está listo
      window.addEventListener(
        "uberall-storefinder-ready",
        () => {
          async function cookieConsent() {

            // esto sería reemplazado por una verificación adecuada del consentimiento de cookies en un escenario real
            const consent = localStorage.getItem("cookieConsent");

            if (consent !== null) {
              // dependiendo del consentimiento, mostrar el buscador de tiendas con o sin mapa
              window.UberallStorefinderRestart({
                withoutMap: consent !== "accepted",
              });
            } else {
              // si no, mostramos la versión sin mapa hasta que el usuario dé su consentimiento
              window.UberallStorefinderRestart({ withoutMap: true });
            }
          }

        document
         .getElementById("cookie-accept")
         .addEventListener("click", async function () {                
         // alguna lógica para establecer la cookie del consentimiento, p. ej. 
         // localStorage.setItem("cookieConsent", "accepted");

         // reiniciar el buscador de tiendas con mapa
         window.UberallStorefinderRestart({ withoutMap: false });
       });
       cookieConsent();
    },
  { once: true }
);
</script>

Ejemplo de una implementación completa

Aquí hay un ejemplo de implementación completa de un buscador de tiendas funcional (solo necesitas agregar tu clave para que funcione)

Avanzado

También puedes crear una promesa del listener de «uberall-storefinder-ready» que luego puede usarse para crear estados de UI de carga. Esto puede hacerse así:

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

Luego puedes usarlo así

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

Forma heredada de configurar la gestión del consentimiento

Evitar la carga del mapa de Locator

En primer lugar, el mapa del localizador no debe cargarse de inmediato al entrar en el sitio web. Esto puede realizarse configurando:

data-showbacklink="false"

Esto evita que el mapa se cargue en primer lugar y se asegura de que no se envíen datos a Google.

Consentimiento

A continuación, se debe pedir a los usuarios que acepten las cookies y den su consentimiento para el envío de su dirección IP a Google para el posicionamiento. Implementa lo siguiente:

// Manejar el estado del consentimiento
      // Cambiar categoría aquí, siempre en el formato ',<categoryID>,'
      if (OptanonActiveGroups.indexOf(",3,") > -1) {
        locatorSrc = "locator.uberall.com/locator-assets/storeFinderWidget-v2.js";
        window.dataLayer.push({ event: "OneTrustGroupsUpdated" }); // no debería ser necesario si no usas 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";
      }

En caso de que el usuario no dé su consentimiento, será dirigido a la página «Todas las ubicaciones», donde no se carga ningún mapa, pero se enumeran todas las páginas de ubicación

Se utiliza este locatorSrc:

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

En caso de que el usuario dé su consentimiento, se debe usar la fuente normal y el mapa debe cargarse.

Se utiliza este locatorSrc:

{
        locatorSrc = "https://locator.uberall.com/locator-assets/storeFinderWidget-v2.js";
        window.dataLayer.push({ event: "OneTrustGroupsUpdated" }); // no debería ser necesario si no usas GTM
        var storeFinder = document.getElementById("store-finder-widget");
        storeFinder.setAttribute("data-showbacklink", true);
      }

También lee: ¿Un Locator añade cookies al sitio web en el que ha sido implementado?