Factsheet Einbau TOSC4 Version: 4 Letzte Änderung: 19.12.2013 Geändert von: Armin Schanitz Letzte Änderungen: - Mobile Version - Reverse Proxy - Hinweise Lightbox
0. Inhaltsverzeichnis 0. 1. 2. INHALTSVERZEICHNIS... 2 EINLEITUNG... 3 VOLLE SEITE... 3 2.1.1 Voraussetzungen... 4 2.1.2 2.1.3 2.1.4 Vorteile... 5 Nachteile... 5 Einbau - Technische Details... 5 3. LIGHTBOX... 5 3.1.1 Voraussetzungen... 6 3.1.2 3.1.3 3.1.4 Vorteile... 6 Nachteile... 6 Einbau - Technische Details... 6 4. IFRAME... 7 4.1.1 Voraussetzungen... 7 4.1.2 4.1.3 4.1.4 Vorteile... 7 Nachteile... 7 Einbau - Technische Details... 8 5. NEUE SEITE... 8 5.1.1 Voraussetzungen... 10 5.1.2 5.1.3 5.1.4 Vorteile... 10 Nachteile... 10 Einbau - Technische Details... 10
1. Einleitung Um das neue Linksystem TOSC4 ideal einzusetzen beachten Sie bitte die Richtlinien in diesem Dokument. Die Mindestbreite von 950 Pixeln kann nicht verringert werden und ist Voraussetzung um das neue Linksystem einsetzen zu können. Bei der Einbindung muss stets beachtet werden, die Hürden für den Gast so gering wie möglich zu halten. Dazu zählen eine technisch einwandfreie und leicht zugängliche Einbindung, sowie die Vermeidung von Fehlern in Bezug auf die Usability. (Sichtbarkeit der Links, Platzierung des Quickfinders). 2. Volle Seite Diese neue Variante der Einbindung ist für all jene Kunden zu empfehlen, welche dem Gast den einfachsten und am besten optimierten Buchungsprozess bieten möchten. In dem Moment in dem der Gast in den Bereich der Homepage wechselt in welchem Unterkünfte angezeigt, oder gesucht werden, wird auf die TOSC4 Links gewechselt. Die TOSC4 Links werden dann anstelle der Destinationshomepage angezeigt. Um zu gewährleisten, dass der Gast das Vertrauen zum Prozess nicht verliert, müssen 2 Voraussetzungen unbedingt erfüllt werden. Domainanpassung a. Reverse Proxy
Es wird auf Kundenseite ein Proxyserver eingerichtet, der je nach Bedarf entweder vom Kundenwebserver, oder vom Deskline Webserver die Daten bezieht: www.tvb.at/service -> Proxyserver greift auf Kunden Webserver zu. www.tvb.at/tvb/de/accommodation/search -> Proxyserver greift auf Deskline Webserver zu. Beispiel: Kundenseite: http://www.tourismusservice.at/gp/help/customer/display.html/ref=hp_gw_xhpo/?nodeid=764416 Kundenseite und holt sich von dort den Inhalt in diesem Beispiel Amazon.de) (zeigt auf Desklineseite: http://www.tourismusservice.at/feratel/de/accommodation/list (zeigt auf Desklineseite, und holt sich von dort den Inhalt). Die Logik ist hier so, dass der neue Server grundsätzlich auf den Kundenwebserver geht, es sei denn, der Link beginnt mit einem oder mehreren speziellen Keys. (Hier z.b. /feratel/). Diese Variante hat den Vorteil, dass nur eine Domain (startend mit www.) genutzt wird. Dadurch sammelt sich der Traffic auf einer Domain, und somit werden bessere SEO Ergebnisse als bei der Variante Subdomain erzielt. Sollten Sie Interesse an dieser Variante haben, können Sie die detaillierte Dokumentation bei servicecenter@feratel.com anfordern. b. Subdomain Der Kunde muss eine Subdomain anlegen, welche mittels CNAME auf die Domain web4.deskline.net zeigt. Anschließend werden alle TOSC4 Links mit der Subdomain anstelle der Deskline Domain verwendet. Z.B: urlaub.destination.com/destination/de/accommodation/list IN BEIDEN VARIANTEN IST GEWÄHRLEISTET, DASS DER GAST ERKENNT, DASS ER SICH NACH DEM WECHSEL AUF DEN TOSC4 LINK IMMER NOCH AUF DER KUNDENDOMAIN BEFINDET. Header Einbindung Der Kunde stellt eine HTML Seite zur Verfügung (am Kundenwebserver gehostet) welche der normalen Navigation der Kundenseite sehr ähnlich sieht, und ähnliche Funktionalität bietet (Navigation ). Dieser Header wird direkt in die TOSC4 Links eingebunden. Somit kann dem Gast gezeigt werden, dass er sich noch auf der Homepage der Destination befinden. Es können auch für verschiedene Links und Seiten verschiedene Header eingebunden werden. Somit kann eine Interaktive Verbindung zwischen dem Deskline-Content und der Destinationsseite hergestellt werden. Beispiel: Wenn ein Vermieter aus einem bestimmten Ort angezeigt wird, wird ein alternativer Header geladen, welche Z.B. das aktuelle Wetter in dem Ort des Vermieters anzeigt. (Dies kann auch mittels Parametern erreicht werden, welche dem Header übergeben werden.) 2.1.1 Voraussetzungen
Subdomain / Reverse Proxy Header Einbindung 2.1.2 Vorteile Links werden optimal angezeigt Fokus komplett auf Buchungsabschluss gelegt. SSL Verschlüsselung direkt sichtbar -> da TOSC4 Link nicht im Iframe eingebunden ist Inhalte können einfach geteilt werden -> Link kann aus der Adresszeile kopiert und versendet werden. Alle Links bieten die Möglichkeit auf Ihre Destinationsseite zurück zu kehren -> Navigation im Header Header kann jederzeit durch den Kunden angepasst werden. Nach Einrichtung leicht erweiterbar Links können verteilt auf der Homepage platziert werden, ohne besondere Einbindung (Frames, Lightboxes ) Bessere SEO Ergebnisse dank Reverse Proxy (gleiche Domain) 2.1.3 Nachteile Header muss erstellt werden Inhalte der Kundenseite rücken in den Hintergrund 2.1.4 Einbau - Technische Details Die breite des Headers sollte ca. 950 Pixel betragen und der Content zentriert sein. Die Höhe ist beliebig, muss aber zur Einrichtung mitgeteilt werden. Zusätzlich zum Header kann auch beliebiger Javascript-Code auf den Deskline- Seiten eingebaut werden (Verlinkung auf JS File am Kundenwebserver) um die Interaktion zwischen TOSC4 Content und Header noch weiter zu vertiefen. 3. Lightbox
Die Variante Lightbox kann dann genutzt werden, wenn ein komplettes Re-Design der Kundenseite kurzfristig nicht umsetzbar ist. Die nun breiteren TOSC4 Links können innerhalb einer Lightbox geöffnet werden. 3.1.1 Voraussetzungen Lightbox Implementierung - Javascript 3.1.2 3.1.3 Vorteile Einfache Einbindung Fokus auf den Buchungsworkflow Nachteile SSL Verschlüsselung nicht sichtbar -> da TOSC4 Link in Iframe eingebunden ist Inhalte können nicht direkt geteilt werden -> Link kann nicht aus der Adresszeile kopiert und versendet werden. Bei fehlerhafter Definition (zu kleine Lightbox, klicken außerhalb der Box nicht deaktiviert) kann es zu verminderter Usability führen. 3.1.4 Einbau - Technische Details Hier muss unbedingt folgendes beachtet werden. 1. Klicken außerhalb der Box darf keinesfalls das Fenster schließen. Dies könnte zu einem ungewollten Abbruch der Buchung führen 2. Der Content im Hintergrund sollte abgedunkelt werden, um den Fokus auf den Content am Deskline Link zu legen.
3. Die Lightbox sollte möglichst hoch sein, und dynamisch je nach Auflösung des Endgerätes skalieren. Die minimale Breite liegt bei 950 Pixeln für den Inhalt. Das bedeutet, dasss auch der Rahmen der Lightbox dynamisch sein muss. Bei kleinen Auflösungen, muss dieser gänzlich verschwinden, bzw. die lightbox mittig zentriert angezeigt werden. 4. Iframe Die Links können mittels Iframe direkt in die Kundenseiten eingebaut werden. Hier ist jedoch zu beachten dass die TOSC4 Links eine Breite von 950 Pixeln haben, und somit rechts und links des Iframes im Regelfall kein Platz für Content des Kunden bleibt. (Auf Monitoren mit größerer Auflösung, kann dieser Platz natürlich genützt werden.) 4.1.1 Voraussetzungen Keine 4.1.2 Vorteile Einfache Einbindung Für Gast kaum sichtbar, dass es sich um ein externes System handelt. 4.1.3 Nachteile SSL Verschlüsselung nicht sichtbar -> da TOSC4 Link in Iframe eingebunden ist. Inhalte können nicht direkt geteilt werden -> Link kann nicht aus der Adresszeile kopiert und versendet werden. Bei fehlerhafter Definition (zu schmaler Frame, zu hoher Frame) kann es zu verminderter Usability führen.
Die Größe des IFrames ist nicht dynamisch. Dies führt entweder zu ungenützter Fläche unterhalb des Deskline Contents, oder aber zu doppelten Scroll-Leisten. Usability sinkt, da Deskline Content nicht immer im Sichtfeld des Benutzers geöffnet werden kann. 4.1.4 Einbau - Technische Details Der IFrame sollte so definiert werden, dass die Nachteile möglichst gering ausfallen. Höhe des IFrames so klein wie möglich (um zu verhindern das Fenster außerhalb der Sicht des Gastes geöffnet werden), aber so groß wie nötig (Um eine doppelte Scroll-Leiste zu verhindern). Die Höhe kann technisch mittels Javascript sowohl am Link als auch auf der Kundenseite optimiert werden. (Dadurch lassen sich doppelte Scroll-Leisten vermeiden). Voraussetzung hierfür ist, dass für die Deskline Links eine Subdomain verwendet wird. 5. Neue Seite In dem Moment in dem der Gast in den Bereich der Homepage wechselt in welchem Unterkünfte angezeigt, oder gesucht werden, wird der TOSC4 Links in einem neuen Fenster/Tab geöffnet. Der Tab mit der Kundenseite bleibt im Hintergrund geöffnet. Um zu gewährleisten, dass der Gast das Vertrauen zum Prozess nicht verliert und das neue Fester als Teil der Kundenseite sieht, müssen 2 Voraussetzungen unbedingt erfüllt werden. Domainanpassung a. Reverse Proxy
Es wird auf Kundenseite ein Proxyserver eingerichtet, der je nach Bedarf entweder vom Kundenwebserver, oder vom Deskline Webserver die Daten bezieht: www.tvb.at/service -> Proxyserver greift auf Kunden Webserver zu. www.tvb.at/tvb/de/accommodation/search -> Proxyserver greift auf Deskline Webserver zu. Beispiel: Kundenseite: http://www.tourismusservice.at/gp/help/customer/display.html/ref=hp_gw_xhpo/?nodeid=764416 Kundenseite und holt sich von dort den Inhalt in diesem Beispiel Amazon.de) (zeigt auf Desklineseite: http://www.tourismusservice.at/feratel/de/accommodation/list (zeigt auf Desklineseite, und holt sich von dort den Inhalt). Die Logik ist hier so, dass der neue Server grundsätzlich auf den Kundenwebserver geht, es sei denn, der Link beginnt mit einem oder mehreren speziellen Keys. (Hier z.b. /feratel/). Diese Variante hat den Vorteil, dass nur eine Domain (startend mit www.) genutzt wird. Dadurch sammelt sich der Traffic auf einer Domain, und somit werden bessere SEO Ergebnisse als bei der Variante Subdomain erzielt. Sollten Sie Interesse an dieser Variante haben, können Sie die detaillierte Dokumentation bei servicecenter@feratel.com anfordern. b. Subdomain Der Kunde muss eine Subdomain anlegen, welche mittels CNAME auf die Domain web4.deskline.net zeigt. Anschließend werden alle TOSC4 Links mit der Subdomain anstelle der Deskline Domain verwendet. Z.B: urlaub.destination.com/destination/de/accommodation/list IN BEIDEN VARIANTEN IST GEWÄHRLEISTET, DASS DER GAST ERKENNT, DASS ER SICH NACH DEM WECHSEL AUF DEN TOSC4 LINK IMMER NOCH AUF DER KUNDENDOMAIN BEFINDET. Header Einbindung Der Kunde stellt eine HTML Seite zur Verfügung (am Kundenwebserver gehostet) welche der normalen Navigation der Kundenseite sehr ähnlich sieht, und ähnliche Funktionalität bietet (Navigation ). Dieser Header wird direkt in die TOSC4 Links eingebunden. Somit kann dem Gast gezeigt werden, dass er sich noch auf der Homepage der Destination befinden. Es können auch für verschiedene Links und Seiten unterschiedliche Header eingebunden werden. Somit kann eine Interaktive Verbindung zwischen dem Deskline-Content und der Destinationsseite hergestellt werden. Beispiel: Wenn ein Vermieter aus einem bestimmten Ort angezeigt wird, wird ein alternativer Header geladen, welche Z.B. das aktuelle Wetter in dem Ort des Vermieters anzeigt. (Dies kann auch mittels Parametern erreicht werden, welche dem Header übergeben werden.)
5.1.1 Voraussetzungen Subdomain / Reverse Proxy Header Einbindung 5.1.2 Vorteile SSL Verschlüsselung direkt sichtbar -> da TOSC4 Link nicht im Iframe eingebunden ist Inhalte können einfach geteilt werden -> Link kann aus der Adresszeile kopiert und versendet werden. Header kann jederzeit durch den Kunden angepasst werden. Nach Einrichtung leicht erweiterbar Links können verteilt auf der Homepage platziert werden, ohne besondere Einbindung (Frames, Lightboxes ) 5.1.3 Nachteile Header muss erstellt werden Subdomain wird benötigt Kann für den Gast verwirrend und nicht vertrauenswürdig wirken, wenn 2 verschiedene Tabs geöffnet werden. 5.1.4 Einbau - Technische Details Die breite des Headers sollte ca. 950 Pixel betragen und der Content zentriert sein. Die Höhe ist beliebig, muss aber zur Einrichtung mitgeteilt werden. Zusätzlich zum Header kann auch beliebiger Javascript-Code auf den Deskline- Seiten eingebaut werden (Verlinkung auf JS File am Kundenwebserver) um die Interaktion zwischen TOSC4 Content und Header noch weiter zu vertiefen. 6. Mobile Version Sollten Sie auch die Mobile Version unserer Links einsetzen möchten, wenden Sie sich bitte an servicecenter@feratel.com Sobald die mobile Version für Sie aktiviert und eingerichtet wurde, schalten die Links automatisch auf die mobile Ansicht um, sobald ein Smartphone oder ein kleine Tablet erkannt wurde. 6.1 Einbau Hier ist unbedingt zu beachten, dass die Links nicht als IFrame oder Lightbox eingebaut werden, sondern immer als neuer Tab geöffnet werden. Sonst kommt es zu gravierenden Problemen bei der Bedienung der Seiten.