Seiteninhalt vor dem Widget

Diese Datei simuliert eine Host-Seite, die das Such-Widget direkt in den DOM rendert.

Seiteninhalt nach dem Widget

Da kein iframe verwendet wird, kann sticky normal auf den Browser-Viewport reagieren.

JS API Demo

Tracking und Consent Wiki

Das Widget wird direkt in den DOM der Host-Seite eingebaut. Es setzt keinen eigenen Google Consent, sondern liest den Consent der Host-Seite. Suche, Chat und Tracking sind gesperrt, bis Google Consent Mode fuer analytics_storage den Status granted meldet.

Widget einbauen

<div
  id="wk-search-widget"
  style="min-height: 56px;"
  data-language="de"
  data-consent-privacy-link="https://www.weisseskreuz.bz.it/de/privacy"
  data-consent-privacy-link-it="https://www.crocebianca.bz.it/it/privacy"
  data-consent-banner-open-code="klaro.show();"
  data-consent-check-interval="1000"
></div>
<script src="/pfad/zum/widget.js" defer></script>

data-consent-privacy-link setzt den Link zur deutschen Datenschutzerklaerung im Consent-Hinweis des Widgets. data-consent-privacy-link-it setzt den italienischen Privacy-Link und wird bei data-language="it" bevorzugt. data-consent-banner-open-code ist JavaScript, das ausgefuehrt wird, wenn der Nutzer im Widget den Cookie-Banner der Host-Seite oeffnen soll.

Cookie-Banner verbinden

Der Code in data-consent-banner-open-code laeuft im Kontext der Host-Seite. Beispiele sind klaro.show();, UC_UI.showSecondLayer() oder ein eigenes Event wie window.dispatchEvent(new CustomEvent("open-cookie-banner")).

Consent aktualisieren

Beste Loesung: Das Cookie-Banner der Host-Seite ruft nach jeder Consent-Aenderung direkt refreshConsent auf. Dann reagiert das Widget sofort, ohne Polling. 

window.WKSearchWidget.refreshConsent("#wk-search-widget", {
  source: "cookie-banner"
});

Wenn das Cookie-Banner keinen Callback anbietet, kann data-consent-check-interval als Fallback verwendet werden. Der direkte Callback per refreshConsent ist trotzdem zu bevorzugen.

Cookie-Banner z-index

Der Cookie-Banner muss visuell ueber dem Widget liegen. Setze den z-index des Cookie-Banners deshalb hoeher als den z-index des Widgets, sonst kann der Banner hinter dem geoeffneten Widget liegen oder nicht klickbar sein.

Erforderlicher Consent

Die Host-Seite muss Google Consent Mode fuer analytics_storage auf granted setzen. Das Widget liest zuerst window.google_tag_data und danach als Fallback passende dataLayer Consent-Eintraege wie gtag("consent", "update", { analytics_storage: "granted" }).

Tracking an Google Analytics senden

Das Widget sendet Tracking Events automatisch an gtag, wenn Google Analytics auf der Host-Seite vorhanden ist. Wenn stattdessen ein GTM dataLayer vorhanden ist, pusht das Widget ein Custom Event mit dem jeweiligen Eventnamen.

Tracking in der Browser Console anzeigen

window.WKSearchWidget.setTrackingDebug("#wk-search-widget", true);

// Wieder ausschalten:
window.WKSearchWidget.setTrackingDebug("#wk-search-widget", false);

Aktuelle Tracking Events

search_started, search_completed und search_failed enthalten den Suchbegriff als query.

click wird bei Klicks im Widget gesendet und enthält selector, wkRef, wkRefSelector, tagName, className, classList, text, href und den aktuellen Suchfeldwert als searchQuery.

chat_message_sent, chat_response_completed und chat_response_failed enthalten den bisherigen Chatverlauf als conversation. Wenn der KI-Chat Quellen findet, enthält chat_response_completed zusätzlich search.

Lokale Demo