> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Onsite-Personalisierung

> Shopinhalte zielgruppenspezifisch ausliefern, gesteuert über ein verschlüsseltes Design-Cookie, das über Besuche hinweg erhalten bleibt.

Mit der Onsite-Personalisierung liefern Sie Shopinhalte zielgruppenspezifisch aus. Je nach Kundengruppe blenden Sie andere Banner ein, gestalten eigene Farbwelten oder leiten den Kunden bei jedem Shop-Aufruf auf eine für ihn bestimmte Landingpage weiter.

Die Steuerung übernimmt ein Cookie, das der Shop selbst verwaltet. Sein Inhalt ist verschlüsselt, der Kunde kann ihn also nicht verändern. Das ist der wesentliche Unterschied zu einer Steuerung über URL-Parameter, die jeder Besucher in der Adresszeile umschreiben kann.

![Dc Hund Katze](https://mintcdn.com/websaleag-44ee7ea6/-4O6W3x8MU7HVGrG/images/dc-hund_katze.png?fit=max\&auto=format\&n=-4O6W3x8MU7HVGrG\&q=85\&s=1e123f2534287920a179eb7e8bae417d)

## Wie die Personalisierung funktioniert

Am Beispiel eines Tierbedarfs-Shops für Hunde und Katzen:

| Schritt | Was geschieht |
| - | - |
| Sie verschicken zielgruppenspezifische Newsletter | Ein Newsletter für Katzenhalter, einer für Hundehalter |
| Der Kunde klickt auf einen Link im Newsletter | Er landet auf einer bestimmten Shopseite |
| Diese Seite setzt das Cookie | Schlüssel `kundengruppe`, Wert `katze` |
| Bei jedem weiteren Seitenaufruf liest der Shop das Cookie | Der Katzenhalter sieht die Bestseller aus dem Katzenbedarf, der Hundehalter die aus dem Hundebedarf |

Dasselbe Verfahren trägt auch andere Personalisierungen, beispielsweise eigene Farbwelten oder eine Weiterleitung auf eine feste Landingpage, sowohl in der laufenden Sitzung als auch bei späteren Besuchen.

### Was im Cookie steht

Der Shop speichert beliebig viele Schlüssel-Wert-Paare in einem einzigen Cookie. Er verschlüsselt den Inhalt mit AES-256 und komprimiert ihn anschließend. Aus dem Cookie lässt sich also weder ablesen noch beeinflussen, welcher Zielgruppe ein Besucher zugeordnet ist.

Der Cookiename lautet `ws_<Shop>_<Sprache>_design_cookie`.

> [!WARNING]
>
> Der Sprachcode steckt im Cookienamen. Ein Besucher, der die Sprache wechselt, startet damit in der neuen Sprache ohne Zuordnung. Wenn Ihre Personalisierung über Sprachen hinweg gelten soll, müssen Sie das Cookie in jeder Sprache erneut setzen.

Schlüssel werden ohne Rücksicht auf Groß- und Kleinschreibung verglichen. `Kundengruppe` und `kundengruppe` sind also derselbe Schlüssel. Setzen Sie denselben Schlüssel erneut, wird der bisherige Wert ersetzt.

> [!WARNING]
>
> Schlüssel und Werte dürfen keinen senkrechten Strich enthalten. Der Shop trennt die Einträge im Cookie mit diesem Zeichen, ein Wert wie `hund|katze` zerlegt das Cookie also fehlerhaft.

## Voraussetzungen

Für die Onsite-Personalisierung ist keine Freischaltung durch die WEBSALE AG nötig.

Zwei Dinge müssen jedoch erfüllt sein, damit das Cookie überhaupt geschrieben wird:

1. Der Kunde hat Cookies in seinem Browser aktiviert.
2. Es liegt eine Einwilligung für den Dienst vor, sofern Sie das Consent-Management einsetzen.

### Einwilligung im Consent-Management

Sobald Sie die Einwilligungsverwaltung des Shops produktiv einsetzen, ist die Onsite-Personalisierung zustimmungspflichtig. Der zugehörige WEBSALE-Dienst heißt `DesignCookie` und muss einem Einwilligungseintrag in der Shopkonfiguration zugeordnet sein.

> [!WARNING]
>
> Liegt keine Einwilligung vor, arbeitet `DC-CookieData_set` ohne jede Rückmeldung nicht. Es gibt keine Fehlermeldung und keinen leeren Ausgabewert, das Cookie wird schlicht nicht geschrieben und nicht gelesen. Wenn Ihre Personalisierung im Livebetrieb wirkungslos bleibt, prüfen Sie deshalb zuerst, ob der Dienst `DesignCookie` in einer zugestimmten Einwilligungsgruppe liegt.

Ist die Einwilligungsverwaltung gar nicht aktiv, entfällt diese Prüfung und das Cookie wird immer geschrieben. Bitte klären Sie die Frage, welche Informationstexte Ihre Kunden zum Cookie-Einsatz brauchen, mit Ihrem Datenschutzbeauftragten ab.

Wegweiser: [Cookies](https://dokumentation.websale.de/v8s/einstellungen/cookies.md) · Einwilligungsverwaltung

## Schritt 1: Den Gültigkeitszeitraum festlegen

Der Gültigkeitszeitraum des Cookies beträgt standardmäßig 30 Tage. Sie legen ihn in der Shopkonfiguration `shop.config` im Abschnitt `Basic` fest.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Basic>
   ...
   DesignCookieDays       = 30
   ...
</Basic>
```

Ohne Eintrag oder mit dem Wert `0` gelten 30 Tage.

Referenz: [Abschnitt Basic](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/grundlagen-und-technik.md#basic)

## Schritt 2: Die Einblendungen als Includes anlegen (optional)

Sie haben zwei Wege, die zielgruppenspezifischen Inhalte auszuspielen. Entweder laden Sie separate Include-Templates, oder Sie hinterlegen die Inhalte direkt im Template und blenden sie mit Klammerungen ein und aus. Beide Wege zeigt Schritt 4.

Für den Weg über Includes legen Sie die Templates jetzt an und speichern sie im Templateverzeichnis `benutzer/templates/translation`. Im Beispiel sind das:

| Datei | Inhalt |
| - | - |
| `incl_katze.htm` | Einblendung für Katzenhalter |
| `incl_hund.htm` | Einblendung für Hundehalter |
| `incl_startseite.htm` | Standardinhalt, wenn kein Cookie vorliegt |

Der Aufbau der Dateinamen ist kein Zufall. Der Shop setzt den Dateinamen später aus einem festen Präfix und dem Wert des Cookies zusammen, nach dem Muster `incl_<Wert des Cookies>.htm`. Aus den Dateinamen ergeben sich damit die Werte, die Sie im nächsten Schritt vergeben: `katze` und `hund`.

## Schritt 3: Das Cookie setzen

Ergänzen Sie auf den Seiten, die eine Zielgruppe kennzeichnen sollen, den folgenden Code. Im Beispiel ist das die Landingpage für Katzenhalter.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~DC-CookieData_set(kundengruppe,katze)~
{DC-CookieData_cookieHasChanged}
<script type="text/javascript">
   var newDate=new Date();
   var days=30; //{WS-TPLComment} Muss mit DesignCookieDays in der shop.config übereinstimmen {/WS-TPLComment}
   newDate.setTime(newDate.getTime()+(days*24*60*60*1000));
   document.cookie ="~DC-CookieData_cookieName~=\"~DC-CookieData_cookieValue~\"; expires="+newDate.toGMTString();
</script>
{/DC-CookieData_cookieHasChanged}
```

Auf der Landingpage für Hundehalter steht derselbe Block, nur mit dem Wert `hund`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~DC-CookieData_set(kundengruppe,hund)~
```

Der Shop sendet das Design-Cookie zusätzlich selbst als `Set-Cookie`-Header und verwendet dafür den Wert aus `DesignCookieDays`. Deshalb muss `var days` im Skript denselben Wert tragen. Stimmen die beiden nicht überein, hängt die Lebensdauer des Cookies davon ab, welcher der beiden Wege es zuletzt geschrieben hat.

Die Klammerung `DC-CookieData_cookieHasChanged` greift nur, wenn sich am Cookie-Inhalt tatsächlich etwas geändert hat. Setzen Sie denselben Schlüssel mit demselben Wert erneut, wird das Skript nicht ausgegeben. Das ist beabsichtigt und spart unnötige Schreibvorgänge im Browser.

> [!WARNING]
>
> `DC-CookieData_set` braucht beide Angaben. Fehlt der Schlüssel oder der Wert, passiert nichts. Achten Sie deshalb darauf, dass ein Tag, das Sie als Wert übergeben, auch wirklich gefüllt ist.
>
> Browser begrenzen die Größe eines Cookies auf etwa 4 KB. Der Shop protokolliert außerdem eine Warnung, wenn der verschlüsselte Inhalt zu groß wird, und verwirft ihn vollständig, wenn er die doppelte Obergrenze überschreitet. Schreiben Sie deshalb nur kurze Kennungen in das Cookie, keine ganzen Datensätze.

Referenz: [DC-CookieData\_set()](https://dokumentation.websale.de/v8s/referenz/tags/dc/cookie-daten.md#die-tags-im-uberblick) · [DC-CookieData\_cookieHasChanged](https://dokumentation.websale.de/v8s/referenz/tags/dc/cookie-daten.md#die-tags-im-uberblick) · DC-CookieData\_cookieName · DC-CookieData\_cookieValue

## Schritt 4: Die Inhalte ausspielen

Beide Wege stehen und fallen mit derselben Klammerung. `{DC-CookieData(kundengruppe)}` greift, wenn der Schlüssel im Cookie vorhanden ist, die verneinte Form `{!DC-CookieData(kundengruppe)}` greift, wenn er fehlt. Innerhalb der Klammerung merkt sich `~DC-CookieData_touchKey(kundengruppe)~`, welcher Schlüssel gerade gemeint ist. Erst dadurch liefert `$DC-CookieData_lastValueTouched$` dessen Wert.

### Weg A: Include-Technik

Der Wert aus dem Cookie wird in den Dateinamen eingesetzt. Steht im Cookie der Wert `hund`, wird aus

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~WS-DynIncludeTpl(incl_$DC-CookieData_lastValueTouched$.htm)~
```

der Aufruf `~WS-DynIncludeTpl(incl_hund.htm)~`. Vollständig sieht das so aus:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- Anfang Content mit Cookie -->
{DC-CookieData(kundengruppe)}
   ~DC-CookieData_touchKey(kundengruppe)~
   ~WS-DynIncludeTpl(incl_$DC-CookieData_lastValueTouched$.htm)~
{/DC-CookieData(kundengruppe)}

{!DC-CookieData(kundengruppe)}
   ~WS-IncludeTpl(incl_startseite.htm)~
{/!DC-CookieData(kundengruppe)}
<!-- Ende Content mit Cookie -->
```

> [!WARNING]
>
> Der Dateiname entsteht aus einem Wert, der im Cookie steht. Legen Sie für jeden Wert, den Sie jemals setzen, auch ein Include-Template an. Fehlt eine Datei, bleibt an dieser Stelle einfach nichts stehen, und der Kunde sieht auch den Standardinhalt nicht, weil der Schlüssel ja vorhanden ist.

Wegweiser: [Wiederverwendung: Includes](https://dokumentation.websale.de/v8s/templates/wiederverwendung-includes.md)

Referenz: [DC-CookieData()](https://dokumentation.websale.de/v8s/referenz/tags/dc/cookie-daten.md#die-tags-im-uberblick) · [DC-CookieData\_touchKey](https://dokumentation.websale.de/v8s/referenz/tags/dc/cookie-daten.md#die-tags-im-uberblick) · [DC-CookieData\_lastValueTouched](https://dokumentation.websale.de/v8s/referenz/tags/dc/cookie-daten.md#die-tags-im-uberblick) · WS-DynIncludeTpl · WS-IncludeTpl

### Weg B: Klammerung direkt im Template

Statt Include-Templates zu laden, übergeben Sie den Wert an einen Design-Parameter und klammern die Inhalte damit direkt im Template.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- Anfang Content mit Cookie -->
{DC-CookieData(kundengruppe)}
   ~DC-CookieData_touchKey(kundengruppe)~
   ~DC-FPZielgruppe_set($DC-CookieData_lastValueTouched$)~

   {DC-FPZielgruppe(katze)}
      Unsere Bestseller: die meistverkauften Produkte für Katzen
      {CAT-LoadData(<Index Kategorie Katze>,999)}
         {CAT-LoadData_OK}
            {CAT-LoadData_HasProducts}
               {@PR-Data}
                  ~PR-Name~
               {/@PR-Data}
            {/CAT-LoadData_HasProducts}
         {/CAT-LoadData_OK}
      {/CAT-LoadData(<Index Kategorie Katze>,999)}
   {/DC-FPZielgruppe(katze)}

   {DC-FPZielgruppe(hund)}
      Unsere Bestseller: die meistverkauften Produkte für Hunde
      {CAT-LoadData(<Index Kategorie Hund>,999)}
         {CAT-LoadData_OK}
            {CAT-LoadData_HasProducts}
               {@PR-Data}
                  ~PR-Name~
               {/@PR-Data}
            {/CAT-LoadData_HasProducts}
         {/CAT-LoadData_OK}
      {/CAT-LoadData(<Index Kategorie Hund>,999)}
   {/DC-FPZielgruppe(hund)}
{/DC-CookieData(kundengruppe)}

{!DC-CookieData(kundengruppe)}
   Katzen- und Hundefreunde finden bei uns die besten Angebote für ihre Lieblinge.
{/!DC-CookieData(kundengruppe)}
<!-- Ende Content mit Cookie -->
```

Ersetzen Sie `<Index Kategorie Katze>` und `<Index Kategorie Hund>` durch die Indizes Ihrer Kategorien.

Weg B eignet sich für überschaubare Unterschiede wie Überschriften, Banner oder Farbwelten. Sobald sich ganze Seitenbereiche unterscheiden, wird Weg A übersichtlicher, weil jede Zielgruppe ihre eigene Datei bekommt und das Haupttemplate schlank bleibt.

Referenz: [DC-FPX](https://dokumentation.websale.de/v8s/referenz/tags/dc/parameter.md#die-tags-im-uberblick) · [DC-CookieData()](https://dokumentation.websale.de/v8s/referenz/tags/dc/cookie-daten.md#die-tags-im-uberblick) · DC-CookieData\_touchKey · DC-CookieData\_lastValueTouched

## Weitere Tags für den Zugriff auf das Cookie

Neben den oben verwendeten Tags stehen weitere zur Verfügung, die in manchen Fällen kürzer zum Ziel führen.

| Tag | Wirkung |
| - | - |
| `DC-CookieData_get(schlüssel)` | gibt den Wert zu einem Schlüssel aus, ohne vorheriges `touchKey` |
| `DC-CookieData_lastKeyTouched` | gibt den zuletzt mit `touchKey` gesetzten Schlüssel aus |
| `{DC-CookieData}` ohne Parameter | Schleife über alle Schlüssel-Wert-Paare im Cookie |

Innerhalb der Schleife liefert `~DC-CookieData~` den Schlüssel und `~DC-CookieData_get~` ohne Parameter den zugehörigen Wert. Das ist der bequemste Weg, um im Testmodus zu prüfen, was tatsächlich im Cookie steht.

Referenz: [DC-CookieData\_get](https://dokumentation.websale.de/v8s/referenz/tags/dc/cookie-daten.md#die-tags-im-uberblick) · [DC-CookieData\_lastKeyTouched](https://dokumentation.websale.de/v8s/referenz/tags/dc/cookie-daten.md#die-tags-im-uberblick)

## Verwandte Themen

* Wegweiser: [Cookies](https://dokumentation.websale.de/v8s/einstellungen/cookies.md)
* Wegweiser: [Wiederverwendung: Includes](https://dokumentation.websale.de/v8s/templates/wiederverwendung-includes.md)
* Wegweiser: Einwilligungsverwaltung


## Related topics

- [Glossar: Fachbegriffe der WEBSALE-Dokumentation](https://dokumentation.websale.de/glossar.md)
- [$wsCookie - Browser-Cookies](https://dokumentation.websale.de/frontend/referenz/module/ws-cookie-browser-cookie.md)
- [DC- (Cookie-Daten)](https://dokumentation.websale.de/v8s/referenz/tags/dc/cookie-daten.md)
- [Verwendete Cookies](https://dokumentation.websale.de/v8s/referenz/verwendete-cookies.md)
- [REST WEBSALE-App](https://dokumentation.websale.de/v8s/schnittstellen/rest-osb-dienste/rest-websale-app.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.