destination.pages: Integration in eigene Webseite

destination.pages: Integration in eigene Webseite

1. Einführung destination.pages

Die destination.pages sind Ausgabe-Module für Ihre Webseite zur Darstellung strukturierter touristischer Angebote wie Artikel, Gastgeber, Pauschalen, Veranstaltungen, Gastronomie, POI/Ausflugstipps sowie Touren & Wege.

2. Einbindung destination.pages in die eigene Webseite

Nach der Beauftragung der destination.pages erhalten Sie von uns die Basis-URL’s zu Ihren individuellen destination.pages oder Sie finden diese in destination.data unter "Content ausspielen" -> "Pages Builder" -> "Start" -> "Schritt 3: destination.pages einbinden"

Nachfolgend einmal der Aufbau eines dieser Links erklärt:

https://pages.destination.one/de/open-data/default/search/Hotel
blau = pages URL
gelb = Sprache
pink = Projekt/Experience
rot = Darstellungsparameter
grün = Darstellungsparameter
türkis = Datensatztyp

2.1 Für Redakteure: Einzelner Datensatz per Javascript (responsive)

Die Javascript-Einbindung empfehlen wir um jeweils thematisch passend an der geeigneten Stelle in Ihrer Webseite die destination.pages zu plazieren.
1. Zum Einbetten eines bestimmten Inhalts, suche bitte zunächst das betreffende Item aus der Suchseite der Pages heraus und öffne die Detailseite. Nutze dafür entweder die Suche oder wähle direkt aus der Liste.






2. Auf der Detailseite werden unter dem Bereich Teilen verschiedene Funktionen angeboten, um diesen Eintrag entweder auf Social Media Kanälen zu teilen oder den Content auf der eigenen Webseite einzubetten.
Zum Einbetten klickst Du bitte auf die grüne Schaltfläche.


3. Markiere und kopiere nun aus dem sich öffnenden Dialog den Code aus dem oberen Bereich in diesem Einbetten Dialog in deine Webseite ein.


2.2. Für Entwickler: per Streaming (responsive + SEO)

Die Einbindung kann ab der neuen pages leicht abweichen. Sollten Sie Probleme haben, wenden Sie sich bitte an die Kundenbetreuung unter support@destination.one .
Die Streaming-Einbindung empfehlen wir um Ihre Angebote in den PAGES suchmaschinenoptimiert und mit eindeutigen URL’s im Internet veröffentlichen zu können.
Damit die „Teilen“ Funktion (per eMail, Facebook, Google+, Twitter) in den PAGES Ihre Angebote im Layout der eigenen Webseite ausliefern kann muss die Streaming-Einbindung konfiguriert sein.

1. Öffnen Sie Ihre Webseite und erstellen Sie eine neue leere landing page. Hinweis: Diese Webseite muss nicht im Menü veröffentlich werden.
2. Gehen Sie auf den Bearbeiten-Modus der neuen landing page (HTML-Ansicht)
3. Fügen Sie im Content-Bereich nachfolgenden Platzhalter ein: [eT4 Pages]
4. Optional: Fügen Sie im Titel der Webseite nachfolgenden Platzhalter ein: [eT4 Title]
5. Speichern Sie die Webseite ab.
6. Kontaktieren Sie unsere Kundenbetreuung unter support@destination.one und senden Sie uns die URL der gerade angelegten Webseite.
7. Fertig!
 Nach Prüfung und Freischaltung übersendet Ihnen unsere Kundenbetreuung die neuen destination.pages Basis-URLs mit aktiviertem Streaming
Beispiel der PAGES Basis-URL mit aktiviertem Streaming:
* Gastgeber
 http://pages.et4.de/de/demo_dahoam/streaming/search/Gastgeber
-> die URL ist nur exemplarisch und gibt es so nicht.

3. Filtern und erstellen von Listen für Landingpages

3.1 Für Redakteure: Filterung von Inhalten mithilfe der integrierten Suche

Mithilfe der Filterung im pages frontend haben Sie die Möglichkeit eine individualisierte Listendarstellung auf Ihrer Website einzubinden.
Dies setzt eine bereits existierende Website und Landingpage voraus. Die Landingpage muss aber nicht im Menü o.ä. angezeigt werden.

1. Gehen Sie auf die Suchübersichtsseite. Die URL dürfte wie folgt aussehen: https://pages.et4.de/de/EXPERIENCENAME/streaming/search/DATENSATZTYP/
2. Grenzen Sie die Suche so ein, wie Sie es möchten. Bspw. durch Standorte, Kategorien u.ä. und wählen Sie oben rechts die Darstellung aus. Entweder Galerie oder Liste.
3. Klicken Sie unten auf "Teilen" und dann das grüne Symbol.
4. Kopieren Sie das Java Script und fügen Sie es auf Ihrer Seite ein.


3.2 Für Entwickler und erfahrene Redakteure: URL-Parameter

Mit den destination.pages können Sie beliebige Listen und Ansichten erstellen. Hierfür stehen bestimmte Parameter zur Verfügung, die in den Suchschlitz der PAGES eingeben werden. Eine Übersicht finden Sie im Folgenden (in Klammern finden Sie die jeweilige URL, die sich bei der Eingabe in den Suchschlitz ergibt).
Die Einbindung kann ab der neuen pages leicht abweichen. Sollten Sie Probleme haben, wenden Sie sich bitte an die Kundenbetreuung unter support@destination.one .

3.2.1 Filterung von Inhalten mithilfe von URL Parametern

3.2.2. Erstellung von kombinierten Filtern

Durch ODER-Verknüpfungen können Sie beliebige Kombinationen vornehmen.

Mit Hilfe von Ausschlüssen können Sie auch Ausschlussmengen bilden. Verwenden Sie hierfür das Rechenzeichen Minus:

3.2.3 Ausblenden der Suchmaske / Einbindung Mediengalerie

Bei wenigen Treffern, macht es Sinn, die Suchmaske für eine maximal attraktive Darstellung, auszublenden. Hierfür kann der folgende Parameter verwendet werden:

3.2.4 Sortierung/Radius

Die Inhalte können darüberhinaus nach verschiedenen Kriterien sortiert werden. Verwenden Sie hierfür den Sortierbutton in den PAGES.

4. Für Entwickler: SEO-Optimierung

Die Einbindung kann ab der neuen pages leicht abweichen. Sollten Sie Probleme haben, wenden Sie sich bitte an die Kundenbetreuung unter support@destination.one .
Dieses Kapitel widmet sich der perfekten Integration und Auffindbarkeit Ihrer PAGES Inhalte bei Suchmaschinen wie z.B. Google, Bing etc.

Im nachfolgenden Video werden die einzelnen Schritte sowie Beispiele demonstriert:


Hinweis: Wir empfehlen die Maßnahmen zur SEO-Optimierung nur wenn Sie bei Ihren PAGES auch das Streaming korrekt eingerichtet haben (siehe Kapitel 2.2). Ansonsten erscheinen Ihre PAGES ohne das Layout Ihrer Webseite was im Zusammenhang der SEO-Optimierung keinen Sinn macht.

4.1. Subdomain registrieren

Um die Inhalte der eT4 PAGES auch unter Ihrem Domainnamen bereitstellen zu können, beauftragen Sie bitte Ihren Webseiten-Administrator nachfolgenden DNS Eintrag setzten zu lassen:

pages.demo-dahoam.de mit einem CNAME Eintrag auf pages.et4.de registrieren.

Die Einbindung kann ab der neuen pages leicht abweichen. Sollten Sie Probleme haben, wenden Sie sich bitte an die Kundenbetreuung unter support@destination.one .

Bei dem obigen Beispiel „ demo-dahoam.de“ durch Ihren Domainnamen austauschen.

Beispiel wie die destination.pages URL’s nach der Registrierung der Subdomin zusätzlich verfügbar sind:

  1. Mit Subdomain: https://pages.demo-dahoam.de/de/pages/streaming/search/Gastgeber/
  2. Ohne Subdomain: https://pages.et4.de/de/demo-dahoam/streaming/search/Gastgeber/

4.2. Sitemap bei Google registrieren

Die destination.pages erzeugen automatisch aus allen Ihren touristischen Angeboten (Detailseiten) eine XML Sitemap und veröffentlichen diese einmal täglich bei Google, Bing und Yahoo.

Gerne können Sie die Sitemap auch zusätzlich selbst über die Goolge Webmaster-Tools veröffentlichen:

https://pages.demo-dahoam.de/sitemap.xml.gz

Hinweis: Bei dem obigen Beispiel „demo-dahoam.de“ durch Ihren Domainnamen austauschen.
Damit die XML Sitemap auch unter der Stammdomain z.b. www.demo-dahoam.de bei Google angemeldet werden kann, muss diese unter der  https://www.demo-dahoam.de/sitemap.xml.gz erreichbar sein. Richten Sie hierfür auf Ihrem Webseite eine entsprechende Weiterleitungsregel ein.

Siehe auch Kapitel 4.4 sowie das Schulungsvideo zum Thema SEO-Optimierung.  Beispiel am Suchbegriff „Steilhof Trampolin“: https://www.google.de/#q=steilhof+trampolin+site:demo-dahoam.de

4.3. Tracking Code von Google Analytics hinterlegen

Damit die Seitenaufrufe innerhalb der PAGES auch innerhalb Ihrers Google Analytic Accounts erscheinen, können wir für Sie Ihren Tracking-Code in den PAGES hinterlegen.
Kontaktieren Sie hierfür unsere Kundenbetreuung unter support@destination.one
und senden Sie uns Ihren Tracking-Code.

4.4. URL Redirect / Rewrite im Webserver konfigurieren

Um alle Inhalte der PAGES auch unter ihrer Hauptdomain wie z.b. www.demo-dahoam.de verwenden zu können, müssen Sie oder Ihre Administratoren auf Ihrem Webserver eine Weiterleitungsregel einrichten. Alle gängigen Webserver wie der Apache oder Microsoft IIS bieten standardmäßig diese Funktionalität.

Weiterleitungs-Regel für die XML-Sitemap am Beispiel des Microsoft IIS:

Von: https://www.demo-dahoam.de/sitemap.xml.gz
Nach: https://pages.demo-dahoam.de/sitemap.xml.gz

In der web.config nachfolgenden – für Ihre Domain angepassen Code – einfügen:

<rule name=“Sitemap“ patternSyntax=“ExactMatch“ stopProcessing=“true“>
<match url=“sitemap.xml.gz“ />
<action type=“Redirect“ url=“https://pages.demo-dahoam.de/sitemap.xml.gz“ redirectType=“Permanent“ />
</rule>

Weiterleitungs-Regel für die destination.pages URL’s am Beispiel des Microsoft IIS:

z.B. von: https://www.demo-dahoam.de/de/pages/streaming/search/Gastgeber
z.B. nach: https://pages.demo-dahoam.de/de/pages/streaming/search/Gastgeber

In der web.config nachfolgenden – für Ihre Domain angepassen Code – einfügen:

<rule name=“Pages Umleitung“ enabled=“true“ stopProcessing=“true“>
<match url=“de/(.*)“ />
<action type=“Redirect“ url=“https://pages.demo-dahoam.de/de/%7BR:1}“ />
</rule>

Hinweis: Anstatt einen Weiterleitung (action type=“Redirect“) kann auch ein Reverse Proxy (action type=“Rewrite“) eingerichtet werden. Dann werden alle PAGES Anfragen direkt von Ihrem Server aus bearbeitet und der gesamte Traffic läuft über ihren Server (=ihre IP-Adresse). Nachteil: in diesem Fall können wir unseren 99,95% Hochverfügbarkeits-Service-Level für die Bereitstellung der PAGES nicht mehr anbieten, da wir von der Ausfallsicherheit Ihres Webservers „abhängig“ sind.

Weiterleitungs-Regel für die destination.pages URL’s am Beispiel von Apache:

RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.domain\.de      [NC]
RewriteRule ^(.*)        https://www.domain.de/$1   [L,R=301]
RewriteRule  ^de/(.*)$  https://sub.domain.de/de/$1  [P]
RewriteRule  ^assets/(.*)$  https://sub.domain.de/assets/$1  [P]
RewriteRule  ^sitemap.xml.gz$  https://sub.domain.de/sitemap.xml.gz  [P]

5. Für Entwickler: Sonderfälle bei der Einbindung

5.1 Automatische Anpassung der iFrame Höhe für Artikel

Folgenden Skript Tag entweder im Header oder im Body hinterlegen:

Das automatische Anpassen der Höhe ist nur möglich, wenn auf der originalen Artikel HTML Seite unser Skript (von Ihnen oder ihrer Agentur) integriert wird.

Man kann keine 100% Garantie geben, dass durch die Integration dieses Skripts die automatische Anpassung des iFrames immer funktionieren wird.

Dies liegt daran, dass wir keinen Einfluss auf die, in ihrer HTML Seite hinterlegten Skripte oder Funktionen haben, die die Funktionalität der Bibliothek beeinflussen könnten und welche Links dann innerhalb dieses iFrames aufgerufen werden.

Somit könnten evtl. auch noch weitere Anpassungen ihrer Web-Agenturen nötig sein, um ein perfektes Verhalten zu gewährleisten. Auf diese Anpassungen werden wir keinen Einfluss haben und werden auch diesbezüglich keine Support Leistungen geben können, da es nicht unsere eigenen HTML Seiten sind, die für dieses Feature geändert werden müssen. Sollte sich herausstellen, dass das Javascript nicht funktioniert, bitten wir Sie das Skript wieder zu entfernen und einen statische Höhe für das iFrame in destination.data zu hinterlegen.

Die maximale Höhe ist aktuell begrenzt auf das doppelte der initialen (in destination.data) hinterlegten Höhe.

5.2 Module verschieben sich - Header anpassen


Es gibt Webseiten bei denen im Header beispielsweise Videos eingebunden sind. Um dann zu den Inhalten unserer Module zu kommen, musst Du nach unten scrollen und auf das einzelne Modul klicken. Hierbei kann es vorkommen, dass das Modul "hüpft" bzw. sich verschiebt. 
Dieses Verhalten kannst Du mit dem Schalter i_scroll_offset unterbunden werden.

In diesen Fällen bitte den i_scroll_offset Parameter in der Script Einbindung anhängen (ggf mit den Werten spielen - auch negative Werte (z.B. -40), können durch Ausprobieren helfen, falls 0 nicht reagiert)

Beispiel für ein i_scroll_offset
<script id="et4pages" type="text/javascript" src="https://pages.et4.de/de/IHRE_EXPERIENCE/default/search/Poi/category%3A%22Direktvermarkter%22/view:gallery/sort:title?i_target=et4pages&i_scroll_offset=0&i_ header_offset =[HÖHE DES HEADERS]&i_footer_offset=[HÖHE DES FOOTERS]">
</script>
i_ header_offset = Pixelhöhe eines immer sichtbaren Headers
i_scroll_offset = Pixelposition des PAGES iframes ab Start der Seite, eben wohin gescrollt werden soll. (nur notwendig falls es nicht automatisch korrekt funktioniert. Kann sein das man hier etwas experimentieren muss um den richtigen wert rauszufinden, insbesondere wenn auf der Seite der Header sich in der Größe ändert beim scrollen )


    • Related Articles

    • destination.pages: Nutzung verschiedener Streaming Templates

      Streaming Templates richtig nutzen Grundvoraussetzung für die Anwendung verschiedener Streaming Templates ist, dass Du bereits ein Content Management System, kurz CMS, verwendest. Anlegen der CMS Seite Du möchtest für bestimmte Themen eine ...
    • destination.welcome: Einrichtung PWA

      Im Folgenden wird aufgeführt, wie Du destination.welcome einrichten bzw. bestehende Projekte bearbeiten kannst. destination.welcome kannst Du als PWA (Progrssive Web App) für Deine Gäste, als Landing-Page im WLAN oder als Oberfläche für Terminals, ...
    • Einrichtung und Konfiguration der Welcome-App / destination.kiosk / destination.box

      Anleitung zur Einrichtung und Konfiguration der Welcome-App Wichtiger Hinweis vorab: Bitte nach dem Auspacken des Terminals ein paar Stunden bei Zimmertemperatur akklimatisieren lassen, bevor Du den Terminal einschaltest. Seite "Willkommen": Wenn Du ...
    • destination.data: Was ist eine Canonical-URL?

      Wofür wird das Feld "Canonical URL" benötigt?  Die Canonical-URL ist eine sog. Meta-Angabe in Webseiten. Meta-Angaben sind Informationen, die das Aussehen von Webseiten nicht beeinflussen und von einem Webseitenbesucher normalerweise nicht gesehen ...
    • Tipps und Tricks zu den Pages Builder Filtern

      Allgemeine Tipps zum Filtern In diesem Artikel geht es um die Filtermöglichkeiten und deren korrekte Anwendung. 1. Sonderzeichen maskieren Da in den Kategorie-Bezeichnungen auch Slashes (Schrägstriche "/") vorkommen, aber Slashes auch feste ...