> ## 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. # GeoIP und User Detection > Erkennen, mit welchem Gerät und aus welchem Land ein Besucher kommt, und ihm den passenden Shop anbieten. Ein Besucher mit dem Smartphone in der Hand soll im Mobile-Shop landen, ein Besucher aus Österreich im österreichischen Subshop. Beides beantwortet dieselbe Frage: Welcher der vorhandenen Shops passt zu diesem Besucher, und wie kommt er dorthin, ohne selbst suchen zu müssen. ## Die Mobile WebApp Der mobile Zugang zu einem WEBSALE-Shop ist keine App, die installiert werden muss, sondern ein eigener Subshop. Daraus ergeben sich drei Eigenschaften: * Sie sind in Design und Funktionsumfang frei, genau wie bei jedem anderen Subshop. * Der Shop läuft auf jedem Gerät, unabhängig vom Betriebssystem, und ohne Installation. * Das Sortiment kann dem des Hauptshops entsprechen oder abweichen, wie bei jedem Subshop. Eine klassische App müsste für jedes Betriebssystem eigens entwickelt und bei jeder Erweiterung neu ausgeliefert werden. Hier genügt der Aufruf einer Adresse. Ob ein mobiler Subshop für Sie eingerichtet wird, klären Sie mit Ihrem WEBSALE Ansprechpartner. ## Was erkannt wird | Erkennung | Grundlage | Ergebnis | | - | - | - | | Gerät | UserAgent des Browsers, wahlweise zusätzlich die Bildschirmauflösung | Angebot, in den Mobile-Shop zu wechseln | | Land | IP-Adresse des Besuchers über GeoIP | Angebot, in den Shop des Landes zu wechseln | Beides lässt sich einzeln oder gemeinsam einsetzen. Die Geräteerkennung ist mit einem mobilen Subshop automatisch verfügbar und braucht keine gesonderte Freischaltung. > [!WARNING] > > Eine automatische Weiterleitung allein aufgrund des Herkunftslandes ist nach der Geoblocking-Verordnung nicht zulässig. Besprechen Sie mit Ihrem Rechtsberater, ob und unter welchen Bedingungen eine länderabhängige Weiterleitung in Ihrem Fall eingerichtet werden darf. Ein sachlicher Grund kann beispielsweise ein Werbe- oder Vertriebsverbot für bestimmte Produkte oder die Buchpreisbindung sein. Ein Teil der hier beschriebenen Technik arbeitet mit Cookies, damit die Entscheidung des Besuchers nicht bei jedem Aufruf erneut abgefragt werden muss. Betriebsnotwendige Cookies sind ohne Einwilligung zulässig, stimmen Sie den Einsatz dennoch mit Ihrem Datenschutzbeauftragten ab. Alle Beispiele auf dieser Seite verwenden jQuery. Stellen Sie sicher, dass es auf den betroffenen Seiten eingebunden ist. ## Bibliotheken einbinden Für beide Erkennungen werden dieselben zwei Dateien gebraucht. Sie gehören in den ``-Bereich aller Seiten, auf denen erkannt werden soll. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ... ... ``` Materialien: [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md) Referenz: WS-FirstCall ## Das Gerät erkennen ### Das Grundgerüst Das folgende Skript gehört ebenfalls in den ``-Bereich. Es legt fest, wonach geprüft wird und wohin weitergeleitet werden soll. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` | Variable | Typ | Pflicht | Bedeutung | | - | - | - | - | | `ws_mobile_domain` | String | ja | Domain, zu der weitergeleitet wird | | `ws_mobile_subshopid` | String | ja | Subshop, zu dem weitergeleitet wird | | `ws_mobile_question` | String | ja | Text der Rückfrage, ob gewechselt werden soll | | `ws_mobile_detection_type` | String | nein | `useragents` prüft nur den UserAgent (Vorgabe), `resolution` entscheidet nach der Bildschirmauflösung | | `ws_mobile_cookie` | String | nein | Gültigkeit des Cookies, beispielsweise `2 days`, `6 hours` oder `30 minutes` | | `ws_mobile_agent_list` | Object | nein | Liste der UserAgents mit der jeweiligen Aktion | | `ws_mobile_resolution_list` | Object | nein | Liste der Auflösungen mit der jeweiligen Aktion | | `ws_mobile_replace_list` | Array | nein | Zeichenketten, die vor der Weiterleitung in der Adresse ersetzt werden | Die Rückfrage aus `ws_mobile_question` erscheint nur bei Geräten, die den Standardshop ebenso darstellen können. Wo das nicht der Fall ist, wird ohne Rückfrage gewechselt. ### Welches Gerät was auslöst Zu jedem UserAgent und zu jeder Auflösung gehört eine von drei Aktionen: | Aktion | Verhalten | | - | - | | `ws_mobile_auto` | Weiterleitung ohne Rückfrage | | `ws_mobile_ask` | Weiterleitung nach Rückfrage | | `ws_mobile_no` | keine Rückfrage und keine Weiterleitung | Für die Zuordnung gibt es zwei Wege, und der Unterschied zwischen ihnen entscheidet darüber, was mit unbekannten Geräten geschieht: | Weg | Schreibweise | Unbekannte UserAgents | | - | - | - | | Standardliste ergänzen | `ws_mobile_agent_list["ipad"] = ws_mobile_no;` | werden nach der Standardliste von WEBSALE behandelt | | eigene Liste setzen | `ws_mobile_agent_list = { "android": ws_mobile_auto };` | lösen nichts aus | **Standardliste ergänzen.** Jeder Eintrag überschreibt genau den gleichnamigen Eintrag der Standardliste, alles andere bleibt bestehen. ```js theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ws_mobile_agent_list["ipad"] = ws_mobile_no; ws_mobile_agent_list["iphone"] = ws_mobile_no; ``` **Eigene Liste setzen.** Hier gilt ausschließlich, was Sie aufführen. ```js theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ws_mobile_agent_list = { "android" : ws_mobile_auto, "iphone" : ws_mobile_ask, "symbian" : ws_mobile_no }; ``` > [!WARNING] > > Mit einer eigenen Liste greift die Standardliste von WEBSALE nicht mehr. Jedes Gerät, das Sie nicht aufführen, sieht den Standardshop, auch wenn es ein Smartphone ist. Wollen Sie nur einzelne Geräte anders behandeln, nehmen Sie den ersten Weg. ### Nach der Bildschirmauflösung entscheiden Steht `ws_mobile_detection_type` auf `resolution`, entscheidet die Auflösung über die Weiterleitung. Die UserAgent-Liste dient dann nur noch dazu, überhaupt ein mobiles Gerät zu erkennen, ihre Aktionen werden nicht mehr ausgewertet. Im folgenden Beispiel wird ab 800 Pixel Höhe oder Breite nachgefragt, ab 1000 Pixel gar nicht mehr gewechselt, und alles darunter wird ohne Rückfrage weitergeleitet. ```js theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ws_mobile_detection_type = "resolution"; ws_mobile_resolution_list = { "800" : ws_mobile_ask, "1000" : ws_mobile_no, "default" : ws_mobile_auto }; ``` ### Teile der Adresse ersetzen Bei der Weiterleitung tauscht der Shop Domain und Subshop-ID aus. Soll an der Adresse mehr geändert werden, etwa weil der Mobile-Shop ein Template anders benennt, listen Sie die Ersetzungen auf. ```js theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ws_mobile_replace_list = [ { from: "tpl_meintemplate.htm", to: "tpl_meinanderestemplate.htm" }, { from: "&meinparameter=wert", to: "" } ]; ``` Ein leerer Wert bei `to` entfernt die Zeichenkette ersatzlos. ### Bei jedem Aufruf fragen Im Normalfall wird die Frage nur beim ersten Aufruf des Shops gestellt. Sie lässt sich auch bei jedem weiteren Aufruf stellen, solange der Besucher nicht ausdrücklich in die Desktop-Fassung gewechselt ist. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` Damit der Besucher bewusst in der Desktop-Fassung bleiben kann, hängen Sie an den entsprechenden Link den Parameter aus der `WS-OTP1`-Klammerung an: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} Zur Desktop-Ansicht ``` ### Umschalten zwischen den Versionen Unabhängig von der Erkennung sollten Besucher jederzeit selbst wechseln können. Dafür braucht es je einen Link und ein Skript, das sich die Entscheidung merkt. ![Mobil Dektop](https://mintcdn.com/websaleag-44ee7ea6/-VOorhOnZ4aGhsis/images/mobil-dektop.jpg?fit=max\&auto=format\&n=-VOorhOnZ4aGhsis\&q=85\&s=ae4bd3f84c97752e2057455067dec740) In der mobilen Fassung: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` In der Desktop-Fassung: ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Zur mobilen Ansicht wechseln
``` Das folgende Skript gehört direkt hinter das Erkennungsskript. Es schreibt beim Klick ein Cookie, das die Entscheidung des Besuchers festhält. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` > [!WARNING] > > Passen Sie die Kennung und die Klasse im Skript an Ihre eigenen Namen an. Das Beispiel wertet nur die Klasse `footer_switch_to_mobil` aus, also den Weg von der Desktop- in die mobile Fassung. Den umgekehrten Weg erkennt es allein daran, dass der Besucher von der mobilen Domain kommt. Prüfen Sie beide Richtungen, bevor Sie das produktiv schalten. ## Das Land erkennen Bei der Ländererkennung bestimmt der Shop über die IP-Adresse das Herkunftsland und bietet dem Besucher in einer Ebene über der Seite den passenden Shop an. ### Das Skript ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` | Variable | Typ | Bedeutung | | - | - | - | | `ws_country_user_country` | String | Ländercode des Besuchers, geliefert vom Tag `WS-GeoIPCountryCode` | | `ws_country_shop_country` | String | Ländercode des aktuellen Subshops | | `ws_redirect_cookie_age` | Number | Gültigkeit des Cookies in Tagen | | `ws_redirect_shopid` | String | aktuelle Shop-ID, geliefert vom Tag `WS-ShopID` | | `ws_redirect_subshopid` | String | aktuelle Subshop-ID, geliefert vom Tag `WS-SubShopID` | | `ws_country_shop_list` | Array | die Länderliste, siehe unten | | `ws_redirect_open_layer` | Function | zeigt die Auswahlebene an | | `ws_redirect_close_layer` | Function | schließt die Auswahlebene | Ist `ws_redirect_cookie_age` gesetzt, kann der Besucher seine Auswahl über ein Kästchen in der Ebene speichern. Die Ebene erscheint dann für die angegebene Dauer nicht mehr, und er wird direkt in seinen Shop geführt. Gibt die Funktion in `ws_redirect_open_layer` ihrerseits eine Funktion zurück, wird `ws_redirect_close_layer` damit überschrieben. Sie können das Schließen also in derselben Funktion festlegen, in der Sie das Öffnen beschreiben. ### Die Länderliste Jeder Eintrag der Liste ordnet einem oder mehreren Ländern einen Shop zu. ![Bild](https://mintcdn.com/websaleag-44ee7ea6/ZpqrUDlxS94uTw6k/images/bild.jpg?fit=max\&auto=format\&n=ZpqrUDlxS94uTw6k\&q=85\&s=8dda12c0bd3dc04c7b65469bccc5b206) | Angabe | Bedeutung | | - | - | | `country` | kommagetrennte Liste dreistelliger Ländercodes, kleingeschrieben. `DEFAULT` gilt für alle Länder, die nicht aufgeführt sind | | `domain` | Domain, zu der weitergeleitet wird | | `subshop` | Subshop, zu dem weitergeleitet wird | | `device` | für welche Geräte der Eintrag gilt: `ws_redirect_mobile`, `ws_redirect_std` oder `ws_redirect_all` | > [!WARNING] > > Die Ländercodes müssen kleingeschrieben werden, `DEFAULT` dagegen immer groß. Eine gemischte Schreibweise führt dazu, dass der Eintrag nicht greift. Ein weiteres Land kommt als zusätzlicher Eintrag hinzu: ```js theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} { country : "irl", domain : "www.testshop.ie", device : ws_redirect_all, subshop : "irish" } ``` ### Die Auswahlebene Den sichtbaren Teil gestalten Sie selbst. Die Kennungen, Klassen und Feldnamen im folgenden Gerüst dürfen dabei weder entfernt noch umbenannt werden, das Skript findet die Elemente daran wieder. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
schließen
Welcome! You are in our English online shop. Would you like to switch to another one?
Herzlich willkommen! Sie sind im deutschen Onlineshop. Möchten Sie Ihre Bestellung lieber über einen unserer anderen Shops abgeben?
Auf www.testshop.de bleiben
Shop-Version auswählen:
Mobile Standard

``` | Kennung oder Name | Wofür | | - | - | | `#redirect_layer` | umschließt die Ebene, daran wird sie ein- und ausgeblendet | | `.ws_redirect_country_text` | markiert einen länderabhängigen Text. Beim Aufruf werden alle so markierten Bereiche versteckt | | `.ws_country_text_` | der Bereich, der für dieses Land angezeigt wird | | `.ws_country_text_DEFAULT` | der Bereich für alle Länder ohne eigenen Text | | `#ws_country_selection` | umschließt die Auswahl des Shops | | `ws_redirect_location` | Name der Auswahlknöpfe "bleiben" und "wechseln" | | `ws_redirect_target_select` | Name der Auswahlliste der Shops | | `#ws_mobile_section` | umschließt die Auswahl zwischen mobiler und normaler Fassung | | `ws_redirect_version` | Name dieser Auswahlknöpfe | | `#ws_redirect_cookie_section` | umschließt das Kästchen zum Speichern der Auswahl | | `ws_redirect_cookie` | Name dieses Kästchens | | `ws_redirect_check` | Name der Schaltfläche, die den Wechsel auslöst | Im Gegensatz zu den Ländercodes in der Länderliste stehen die Ländercodes in den Klassennamen groß, also `ws_country_text_DEU`. ### Prüfen Ob die Ebene richtig erscheint, prüfen Sie mit dem GeoIP-Testmodus, ohne dafür das Land wechseln zu müssen. Wegweiser: [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md) ## Gerät und Land gemeinsam auswerten Beide Prüfungen lassen sich verbinden. Dafür bekommt dasselbe Land zwei Einträge, die sich in `device` und in der Domain unterscheiden. ```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} ``` Aufgerufen wird hier `ws_redirect_detection()` und nicht `ws_country_detection()`. Nur diese Funktion wertet Land und Gerät gemeinsam aus. ## Die Standardliste der UserAgents Diese Liste gilt, solange Sie `ws_mobile_agent_list` nicht vollständig selbst setzen. ```js theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}} var ws_mobile_agent_list = { // Apple "iphone" : ws_mobile_auto, "ipad" : ws_mobile_ask, "ipod" : ws_mobile_auto, // Google und Android "android.*mobile" : ws_mobile_auto, // Smartphones "android" : ws_mobile_ask, // Tablets "googletv" : ws_mobile_no, "xoom" : ws_mobile_ask, // Symbian "symbian" : ws_mobile_auto, "series60" : ws_mobile_auto, "series70" : ws_mobile_auto, "series80" : ws_mobile_auto, "series90" : ws_mobile_auto, // Microsoft und Windows "windows phone" : ws_mobile_auto, "windows ce" : ws_mobile_auto, "iemobile" : ws_mobile_auto, "nuvifone" : ws_mobile_auto, // Blackberry "blackberry" : ws_mobile_auto, "vnd.rim" : ws_mobile_auto, // Emulator "playbook" : ws_mobile_ask, // Tablet // Palm "palm" : ws_mobile_auto, "webos" : ws_mobile_ask, "blazer" : ws_mobile_auto, // Weitere Browser "netfront" : ws_mobile_ask, "up.browser" : ws_mobile_ask, // Hersteller "sonyericsson" : ws_mobile_ask, "ericsson" : ws_mobile_ask, "sony" : ws_mobile_ask, "sec-sgh" : ws_mobile_ask, "htc" : ws_mobile_ask, "lg" : ws_mobile_ask, "phonifer" : ws_mobile_ask, "samsung" : ws_mobile_ask, "sharp" : ws_mobile_ask, "sie-" : ws_mobile_ask, // Netzbetreiber "docomo" : ws_mobile_ask, "kddi" : ws_mobile_ask, "vodafone" : ws_mobile_ask }; ``` Die Einträge werden gegen den UserAgent geprüft und dürfen einfache Muster enthalten, siehe `android.*mobile`. Ein Teil der aufgeführten Systeme spielt heute keine Rolle mehr. Die Liste schadet dadurch nicht, sie greift für diese Geräte nur nicht mehr. ## Verwandte Themen * Wegweiser: [Sitemaps, robots.txt und Mobile-Subshops](https://dokumentation.websale.de/v8s/seo/sitemaps-robots-txt-und-mobile-subshops.md) * Wegweiser: [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md) * Wegweiser: [JavaScript und jQuery](https://dokumentation.websale.de/v8s/templates/javascript-und-jquery.md) ## Related topics - [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md) - [Testmodi des Shops ein- und ausschalten](https://dokumentation.websale.de/v8s/domains/testmodi-des-shops-ein-ausschalten.md) - [Währungen](https://dokumentation.websale.de/v8s/preise/waehrungen.md) - [Shop, Seite und Technik](https://dokumentation.websale.de/v8s/referenz/tags/ws/shop-seite-und-technik.md) - [Kunde, Anmeldung und Kundenkonto](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/kunde-anmeldung-und-kundenkonto.md) This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.