Zum Inhalt springen

Banner mit Web-Targeting automatisch einfügen

Für Web-Placements können Sie optional Web-Targeting in den Placement-Einstellungen konfigurieren, um festzulegen, wo das Banner auf der Seite erscheinen soll. Wenn Web-Targeting konfiguriert ist, fügt das Braze Web SDK Banner automatisch an der angegebenen Stelle ein, statt über einen expliziten Aufruf von insertBanner(). Weitere Informationen finden Sie unter Web-Targeting für Banner. Hintergrundinformationen zu Bannern und Banner-Placements finden Sie unter Über Banner und Placements verwalten.

Voraussetzungen

Da beim Einfügen per Web-Targeting HTML in Ihre Seite eingefügt wird, ist dasselbe Opt-in wie bei insertBanner erforderlich:

braze.initialize("YOUR-API-KEY", {
  baseUrl: "YOUR-ENDPOINT",
  allowUserSuppliedJavascript: true, // required for Web Targeting auto-insert
});

Ohne allowUserSuppliedJavascript: true bewirkt das automatische Einfügen nichts, und das SDK protokolliert einen Fehler.

Einfügen per Web-Targeting auslösen

Beim Aufruf versucht die Methode insertWebTargetingBanners(), die Web-Targeting-Informationen jedes Banners (sofern vorhanden) zu verwenden, um die vorgesehene Stelle für dieses Banner auf der Seite zu finden und es dort automatisch einzufügen. Rufen Sie diese Methode kurz nach der SDK-Initialisierung und nach jeder abgeschlossenen Banner-Synchronisierung über das Web SDK auf.

Wenn das Web SDK die anvisierte Einfügestelle für ein Banner mit Web-Targeting-Informationen nicht findet, versucht es fortlaufend erneut, das Banner einzufügen. So kann Web-Targeting auch Bereiche Ihrer Seite ansprechen, die erst nach dem ersten Laden der Seite erscheinen. Dieses Wiederholungsverhalten lässt sich bei der Initialisierung des SDK über den Parameter enableWebTargetingBannerRetryLoop der Methode initialize() deaktivieren.

braze.initialize("YOUR-API-KEY", {
  baseUrl: "YOUR-ENDPOINT",
  allowUserSuppliedJavascript: true,
  enableWebTargetingBannerRetryLoop: false, // don't retry if the target isn't in the DOM yet
});

Einfügen per Web-Targeting bei Banner-Aktualisierungen aktivieren

Bei Bedarf können Sie nach der SDK-Initialisierung automaticallyInsertWebTargetingBanners() aufrufen. Dadurch wird eine Subscription eingerichtet, die das Einfügen per Web-Targeting für die vorhandenen Banner sofort ausführt, nachdem das Web SDK eine Banner-Synchronisierung abgeschlossen hat. Damit entfällt der Aufruf von insertWebTargetingBanners(). Sie können aber auch ausschließlich diese Methode verwenden, wenn Sie genauer steuern möchten, wann das Einfügen per Web-Targeting erfolgt. Diese Methode fügt beim Aufruf selbst keine Banner ein.

Single-Page-Apps (SPA)

Beachten Sie die folgenden Punkte, wenn Ihre Website eine Single-Page-App-Architektur (SPA) oder ähnliche Systeme (etwa React Router oder Vue) für Seitenrouting und Navigation verwendet oder wenn Ihre Website eingefügte Banner manuell entfernt:

  • Wenn ein Banner per Web-Targeting in das DOM eingefügt, aber später durch erneutes Rendern beim Routing entfernt wird, versucht das Web SDK nicht automatisch, es auf der neuen Seite erneut einzufügen. Bleibt das Banner nach dem erneuten Rendern zwar bestehen, ist aber per URL auf die vorherige Route beschränkt, entfernt das Web SDK es ebenfalls nicht automatisch aus dem DOM.
  • Rufen Sie insertWebTargetingBanners() nach jedem clientseitigen Rendern einer Route auf, um die gesamte vom SDK gesteuerte Verwaltungslogik auszuführen. Die Methode fügt nur Banner mit geändertem Status erneut ein, sodass Sie sie bei jeder Navigation bedenkenlos aufrufen können.

Fehlerbehebung

Häufige Gründe, warum ein Banner nicht automatisch eingefügt wird, protokolliert über den Logger des SDK (enableLogging: true):

Symptom Wahrscheinliche Ursache
Nirgendwo wird etwas eingefügt, und das SDK protokolliert „allowUserSuppliedJavascript is required“ initialize() wurde ohne allowUserSuppliedJavascript: true aufgerufen.
Das SDK protokolliert „target element not found for selector“ Der CSS-SELEKTOR passt noch auf kein Element. Wird das Element später gerendert, löst sich das Problem über die Wiederholungsschleife von selbst. Andernfalls überprüfen Sie den für das Placement konfigurierten SELEKTOR.
Das SDK protokolliert „cannot insert inside“ für ein Element Die Web-Targeting-Informationen des Banners hätten es in ein nicht unterstütztes Element eingefügt, etwa video oder img. Siehe Web-Targeting für Banner.
Ein Banner wird einmal eingefügt, aber bei Routenwechseln nicht aktualisiert Siehe Hinweise zu SPAs – rufen Sie insertWebTargetingBanners() nach jedem clientseitigen Rendern einer Route auf.
Ein Banner verschwindet nach erneutem Rendern durch das Framework Siehe Hinweise zu SPAs.

Nächste Schritte

New Stuff!