Google Maps in Power Pages mit React und Web Templates

Inhalt

• Wie Google Maps in React und auf Power Pages Detailseiten startet
• Wie React und Web Template den Consent-Status lesen
• Wer den Google Maps Lifecycle verwaltet
• Welche Grenzen beim Widerruf bleiben
• Wann sich die Architektur für weitere Dienste lohnt

Wie Google Maps in React und auf Power Pages Detailseiten startet

Ich binde Google Maps sowohl in einer React-Anwendung als auch über ein Power Pages Web Template auf einer Detailseite ein. Beide Varianten nutzen denselben Consent-Status aus der Registry. Erst nach einer erteilten Einwilligung lädt der jeweilige Consumer das Google Maps SDK und zeigt Google Maps an.

Die Consent-Service-Registry veröffentlicht für Google Maps nur den Einwilligungsstatus. Anders als beim Application Insights Adapter gibt es für Google Maps in der Registry keine enable- und disable-Callbacks. Das Laden des SDK und die Verwaltung der Google Maps Instanz bleiben beim jeweiligen Consumer.

Das Power Pages Web Template ordnet googleMaps einer Vendor-ID zu. consentmanager bleibt Quelle der Einwilligungsentscheidung. Die Registry übersetzt diese Entscheidung in einen Boolean. Sie lädt kein Google Maps SDK und räumt keine Google Maps Instanz auf.

Die Consent-Service-Registry mit ihren Browser-Methoden beschreibt den Statusvertrag. Der Application-Insights-Artikel zeigt den anderen Fall, in dem ein Adapter den SDK-Lifecycle übernimmt.

Wie React und Web Template den Consent-Status lesen

window.consentServices.getSnapshot() liefert einen eingefrorenen Snapshot mit einem Boolean für jeden Dienst. googleMaps beschreibt nur die Einwilligung. Solange die CMP-Daten noch nicht synchronisiert wurden, ist der Wert false. Der folgende Ausschnitt zeigt die gemeinsame Browser-API für beide Consumer:

const currentConsent = window.consentServices.getSnapshot().googleMaps;
window.addEventListener('consentserviceschange', (event) => {
  console.log(event.detail.googleMaps);
});

Beim Start liest der Consumer den Snapshot und übernimmt spätere Werte aus event.detail.googleMaps in seinen lokalen Zustand. Auch bei einem unveränderten Snapshot kann die Registry das Ereignis erneut auslösen. Ersetze deshalb den lokalen Wert aus event.detail, statt jedes Ereignis als Änderung zu behandeln.

Ein Wert von true bestätigt nur die Einwilligung, nicht den Abschluss des SDK-Ladevorgangs oder eine aktive Google Maps Instanz. Wie die React-Anwendung in Power Pages eingebunden wird, beschreibt der Beitrag zur React-Web-Template-Konfiguration. Diese App-Konfiguration ersetzt nicht die Vendor-Zuordnung im Consent Web Template.

Wer den Google Maps Lifecycle verwaltet

In der React-Anwendung verbindet die Komponente den Consent-Status mit ihrem Lifecycle. Beim Mount liest sie den Snapshot und registriert den Event-Listener. Nach einer Zustimmung lädt sie das SDK und erstellt die Google Maps Instanz. Beim Unmount entfernt sie den Listener und räumt diese Instanz auf.

Auf der Detailseite übernimmt das JavaScript im Power Pages Web Template diese Rolle. Das Template stellt den Container für Google Maps bereit. Der Consumer liest denselben Snapshot und reagiert auf dasselbe Änderungsereignis wie React. Die Detailseite benötigt dafür keine React-Komponente.

Bei einem Widerruf reagiert der jeweilige Consumer auf den geänderten Status und beendet die weitere Nutzung seiner Google Maps Instanz. Die Registry veröffentlicht die Entscheidung, übernimmt aber weder das Laden noch das Cleanup von Google Maps.

Welche Grenzen beim Widerruf bleiben

Ein Widerruf macht bereits gesendete Requests nicht rückgängig. Auch ein entfernter Google Maps Container bedeutet nicht, dass ein geladenes SDK aus dem Browser entladen wurde. Consent-Status, Google Maps Instanz und SDK bleiben deshalb getrennte Zustände.

Die ECE Fallstudie zur Power Pages Enterprise-Suche ordnet diese Umsetzung in das Portal ein. Google Maps zeigt Standorte in der React-Anwendung und auf einer Detailseite mit Power Pages Web Template.

Wenn du diesen Ansatz in deinem eigenen Power Pages Portal einsetzt, prüfe Ablehnung, Zustimmung und Widerruf in beiden Varianten. Bei verweigerter Einwilligung darf der Consumer keinen SDK-Request starten. Nach Zustimmung lädt er das SDK und zeigt Google Maps an. Beim Widerruf kontrollierst du getrennt den Consent-Status, die Google Maps Instanz und den Netzwerkverkehr.

Wann sich die Architektur für weitere Dienste lohnt

Wenn Power Pages mehrere externe Dienste über Liquid, JavaScript und React verwendet, schafft der gemeinsame Browser-Vertrag eine einheitliche Einwilligungsquelle. Die Zuständigkeit für den Laufzeit-Lifecycle bleibt trotzdem beim jeweiligen Adapter oder Consumer. Für Google Maps liegt sie bei der React-Anwendung oder beim JavaScript im Web Template der Detailseite. Für Application Insights zeigt der separate Adapter, wie Registry-Callbacks den Dienst starten und beenden.

Die Architekturübersicht für Power Pages Consent Management ordnet beide Zuständigkeiten ein. Wenn du die Consent-Grenze und das Cleanup in deinem Portal bewerten möchtest, lass uns die Umsetzung gemeinsam prüfen.