ロケーターのマップ上でユーザーの位置を特定するために、Uberall ロケーターはユーザーの IP アドレスを Google に送信する必要があります。エンドユーザーのプライバシーを尊重するため、エンドユーザーの同意を得るまでマップは表示されません。Uberall ロケーター＆ページを実装する際は、このエンドユーザーの同意への対応を考慮する必要があります。

同意管理の推奨設定方法

基本設定

ストアファインダーは、次の記事で説明されている通常の方法で実装してください：ロケーター＆ページの編集。

ストアファインダーが埋め込まれたページが読み込まれ、Cookie バナーが表示されているときは、マップなしのバージョンが表示されるようにします。これは次の手順で行えます：

1. 設定に data-autostart="false" を追加する：

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

これにより、ユーザーが Cookie に同意したかどうかを判断できるまで、ストアファインダーの読み込みが行われません。

2. ストアファインダーのスクリプトの読み込みを待つ：

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

3. ウィジェットの読み込みには window.UberallStorefinderRestart を使用します

その後、グローバル関数 window.UberallStorefinderRestart を使用してストアファインダーを表示できます。使用する引数に応じて、マップあり／なしのいずれかで表示されます。

マップあり：

window.UberallStorefinderRestart({ withoutMap: false })

マップなし：

window.UberallStorefinderRestart({ withoutMap: true })

4. ユーザーが Cookie を受け入れたら、再読み込みせずにマップ版を表示する

ユーザーが Cookie の「同意する」ボタンをクリックしても、ストアファインダーはすぐにはマップ表示版に切り替わりません。ボタンのクリックイベント内で、再度 window.UberallStorefinderRestart を呼び出す必要があります。

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 });
});

実装例

これらをまとめると、たとえばユーザーが同意するまでマップなしでストアファインダーを表示できます：

<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>

完全な実装例

こちらは、動作するストアファインダーの完全な実装例です（キーを追加するだけで動作します）

応用

"uberall-storefinder-ready" のリスナーの Promise を作成し、読み込み中の UI 状態の作成に利用することもできます。次のように実装できます：

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

その後、次のように使用できます

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

同意管理の従来の設定方法

ロケーターマップの読み込みを防ぐ

まず、ウェブサイトにアクセスした時点でロケーターのマップがすぐに読み込まれないようにします。これは次のように設定することで実現できます：

data-showbacklink=“false”

これにより、そもそもマップが読み込まれず、Google にデータが送信されないようになります。

同意

次に、ユーザーに Cookie の受け入れと、位置特定のための IP アドレスの Google への送信への同意を求めます。次のように実装してください：

// 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";
      }

ユーザーが同意しない場合は、「すべてのロケーション」ページに移動します。このページではマップは読み込まれず、すべてのロケーションページが一覧表示されます

この場合、次の locatorSrc が使用されます：

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

ユーザーが同意した場合は、通常のソースを使用し、マップが読み込まれます。

この場合、次の locatorSrc が使用されます：

{
        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);
      }

あわせて読む：ロケーターは、実装されたウェブサイトに Cookie を追加しますか？