In order to be able to position the user on the Locator map, the Uberall Locator has to send the user's IP address to Google. In order to respect the end-user's privacy, the map will not be displayed before receiving consent from the end-user. This end-user consent handling needs to be considered when implementing the Uberall Locator & Pages.

Recommended way to setup consent management

Basic setup

The storefinder should be implemented the same way as usual as mentioned in Edit Locator & Pages. 

When the page where the storefinder is embedded is loaded and the cookie banner is showing, the version without the map should be showing. This can be done with the following steps:

1. Adding data-autostart="false" to the configuration:

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

 This prevents the Storefinder to load until you're able to identify if the user consented with the cookie or not.   

2. Waiting for the storefinder scripts to load:

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

3. Loading the widget with window.UberallStorefinderRestart

You can then show the storefinder by using the global function window.UberallStorefinderRestart - depending on what argument you use it will show the map with or without the map.

With Map:

window.UberallStorefinderRestart({ withoutMap: false })

Without Map:

window.UberallStorefinderRestart({ withoutMap: true })

4. Show the map version without reload on a user accepting the cookies

When a user is clicking on the "accept" cookie button, the storefinder would not yet change directly to the version showing the map. You need to again call window.UberallStorefinderRestart in the click event of the button.

document
 .getElementById("cookie-accept")
 .addEventListener("click", async function () {                
 // some logic to set the cookie for the consent, e.g. 
 // localStorage.setItem("cookieConsent", "accepted");

 // restart the storefinder with map
 window.UberallStorefinderRestart({ withoutMap: false });
});

Implementation example

Bringing this all together, you can then for example show the storefinder without map until the user has consented:

<script>
      // listen for the storefinder being ready
      window.addEventListener(
        "uberall-storefinder-ready",
        () => {
          async function cookieConsent() {

            // this would be replaced by a proper cookie consent check in a real world scenario
            const consent = localStorage.getItem("cookieConsent");

            if (consent !== null) {
              // depending on consent, show the storefinder with or without map
              window.UberallStorefinderRestart({
                withoutMap: consent !== "accepted",
              });
            } else {
              // else we show the without map version until user gives consent
              window.UberallStorefinderRestart({ withoutMap: true });
            }
          }

        document
         .getElementById("cookie-accept")
         .addEventListener("click", async function () {                
         // some logic to set the cookie for the consent, e.g. 
         // localStorage.setItem("cookieConsent", "accepted");

         // restart the storefinder with map
         window.UberallStorefinderRestart({ withoutMap: false });
       });
       cookieConsent();
    },
  { once: true }
);
</script>

Example of a full implementation

Here is a full example implementation of a working storefinder (you just need to add your key to it to make it work)

Advanced

You can also create a promise of the listener of "uberall-storefinder-ready" which then can be used to create loading UI states. This can be done like this:

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

Then you can use it like this

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

Legacy way to setup consent management

Prevent loading of Locator map

First of all, the map of the locator should not load right away when entering the website. This can be realized by setting:

data-showbacklink=“false”

This prevents the map from loading in the first place and makes sure, that no data is submitted towards Google.

Consent

Next, users should be asked to accept Cookies and consent to the submission of their IP address to Google for positioning. Implement the following:

// Handle consent status
      // Change category here, always in the format ',<categoryID>,'
      if (OptanonActiveGroups.indexOf(",3,") > -1) {
        locatorSrc = "locator.uberall.com/locator-assets/storeFinderWidget-v2.js";
        window.dataLayer.push({ event: "OneTrustGroupsUpdated" }); // shouldn't be needed if not using 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";
      }

In case the user does not consent, they will be directed to the "All locations" page, where no map is loaded, but all location pages are listed

This locatorSrc is being used:

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

In case users consent, the regular source should be used and the map should load.

This locatorSrc is being used:

{
        locatorSrc = "https://locator.uberall.com/locator-assets/storeFinderWidget-v2.js";
        window.dataLayer.push({ event: "OneTrustGroupsUpdated" }); // shouldn't be needed if not using GTM
        var storeFinder = document.getElementById("store-finder-widget");
        storeFinder.setAttribute("data-showbacklink", true);
      }

Also read: Does a Locator add cookies to the website it has been implemented in?