Weisses Kreuz Suche Direct Embed

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

Alle Events enthalten user_identification mit der Google Analytics Client ID aus dem _ga Cookie und widget_site mit der URL der Host-Seite.

`wk_search`

Parameter	Beschreibung
`user_identification`	Google Analytics Client ID aus dem `_ga` Cookie.
`widget_site`	URL der Host-Seite, auf der das Widget eingebunden ist.
`query`	Suchbegriff.
`query_length`	Zeichenanzahl des Suchbegriffs.
`word_count`	Wortanzahl des Suchbegriffs.
`semantic_ratio`	Anteil der semantischen Suche im Hybrid-Request.
`result_count`	Gesamte Trefferzahl.
`processing_time_ms`	Verarbeitungszeit in Millisekunden.
`hits`	Liste aller Treffer-URLs.

`wk_search_failed`

Parameter	Beschreibung
`user_identification`	Google Analytics Client ID aus dem `_ga` Cookie.
`widget_site`	URL der Host-Seite, auf der das Widget eingebunden ist.
`query`	Suchbegriff.
`query_length`	Zeichenanzahl des Suchbegriffs.
`word_count`	Wortanzahl des Suchbegriffs.
`semantic_ratio`	Anteil der semantischen Suche im Hybrid-Request.

`wk_click`

Parameter	Beschreibung
`user_identification`	Google Analytics Client ID aus dem `_ga` Cookie.
`widget_site`	URL der Host-Seite, auf der das Widget eingebunden ist.
`result_source`	Ursprung des Treffers: `search` oder `ai`.
`position`	1-basierte Position des geklickten Treffers.
`total_hits`	Anzahl der angezeigten Treffer im aktuellen Kontext.
`query`	Suchbegriff oder Chat-Frage, aus der die Treffer stammen.
`hit_urls`	Liste aller aktuell angezeigten Treffer-URLs.
`clicked_url`	URL des geklickten Treffers.

`wk_chat_message_sent`

Parameter	Beschreibung
`user_identification`	Google Analytics Client ID aus dem `_ga` Cookie.
`widget_site`	URL der Host-Seite, auf der das Widget eingebunden ist.
`conversation`	Bisheriger Chatverlauf, neueste Nachricht zuerst.
`message_length`	Zeichenanzahl der gesendeten Chat-Frage.
`word_count`	Wortanzahl der gesendeten Chat-Frage.

`wk_chat_response_completed`

Parameter	Beschreibung
`user_identification`	Google Analytics Client ID aus dem `_ga` Cookie.
`widget_site`	URL der Host-Seite, auf der das Widget eingebunden ist.
`conversation`	Bisheriger Chatverlauf inklusive KI-Antwort, neueste Nachricht zuerst.
`hits`	Liste aller Quellen-URLs der KI-Antwort.
`answer_length`	Zeichenanzahl der KI-Antwort.

`wk_chat_response_failed`

Parameter	Beschreibung
`user_identification`	Google Analytics Client ID aus dem `_ga` Cookie.
`widget_site`	URL der Host-Seite, auf der das Widget eingebunden ist.
`conversation`	Bisheriger Chatverlauf, neueste Nachricht zuerst.

Seiteninhalt vor dem Widget