destination.pages: Integration in eigene Webseite

destination.pages: Integration in eigene Webseite

Mit nur wenigen Klicks können Sie die destination.pages in die Webseite integrieren.

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. Die PAGES sind mit modernster Webtechnologie umgesetzt und können je nach Einbindung responsive (=Desktop, Infoterminal, Tablet, mobile Webseite) sowie voll suchmaschinenoptimiert (SEO) von Ihnen in Ihre Webseite integriert werden.

Typischerweise werden die PAGES in dem Content-Bereich der Webseite eingebaut. Hier ein schematischer Überblick am Beispiel unseres Demo-Ortes „Dahoam“:

doku_pages_1

Demo: http://www.demo-dahoam.de/ort/suchen-buchen/unterkunft-buchen/

2. Einbindung destination.pages in die eigene Webseite

Nach der Beauftragung der eT4 PAGES erhalten Sie von uns die Basis-URL’s zu Ihren individuellen destination.pages.
Nachfolgend finden Sie Basis-URLs am Beispiel unserer Open Data destination.pages.
In rot ist das jeweilige Projekt/Experience hinterlegt (bitte durch Ihr Projekt/Experience anpassen).

Tipp: Ganz einfach kommen Sie an die untenstehenden Links auch über Ihren Aktivierungscode.

Der Einbau in Ihre Webseite kann auf zwei Arten erfolgen:

2.1. per Javascript (Responsive)

Die Javascript-Einbindung empfehlen wir um jeweils thematisch passend an der geeigneten Stelle in Ihrer Webseite die destination.pages zu plazieren.

Im nachfolgenden Video wird die Javascript-Einindung demonstriert:

​

Step-by-Step Anleitung:

  1. Öffnen Sie die eT4 PAGES Basis-URL zum gewünschten Thema (z.b. POI/Ausflutstipps)
  2. Stellen Sie sich die gewünschten Inhalte und Darstellungsform (Liste, Galerie, Karte) zusammen. Alternativ die Detailseite welche Sie einbinden möchten.
    Beispielsweise „Freibäder“ in der Galerie-Ansicht: Demo-Link
  3. Klicken Sie auf „Einbetten“ um den Javascript-Code zu der aktuellen Darstellung zu erhalten.
    Kopieren Sie sich den Javascript-Code in die Zwischenablage (Tastenkombination „Strg + C“)
  4. Öffnen Sie Ihre Webseite zum passenden Thema bzw. legen Sie eine neue leere Webseite an (z.b. Freibäder)
  5. Gehen Sie auf den Bearbeiten-Modus Ihrer Webseite (HTML-Ansicht)
  6. Fügen Sie im Content-Bereich den Javascript-Code ein (Tastenkombination „Strg + V“)
  7. Speichern Sie die Webseite ab
  8. Fertig! Demo-Link am Beispiel „Freibäder“

Anpassungsmöglichkeiten des Javascript-Code:
<script
id=“et4pages“
type=“text/javascript“
src=“http://pages.et4.de/de/open-data/default/search/POI/Freib%C3%A4der/view:gallery/
sort:relevance?i_target=et4pages&i_header_offset=80&i_footer_offset=460„>
</script>

Über die rot markierten Parameter kann das verhalten der eT4 PAGES bei Bedarf angepasst werden:

doku_pages_2


2.2. per Streaming (Responsive + SEO)

Die Streaming-Einbindung empfehlen wir um Ihre Angebote in den PAGES suchmaschinenoptimiert und mit eindeutigen URL’s im Internet veröffentlichen zu können.

Beispielsweise die Detailseite zu einem Hallenbad:
http://pages.et4.de/de/demo-dahoam/streaming/detail/POI/06CC07B6675A2DB8A310708FE78B31A4/aqacur-badewelt-bad-kotzting
bzw. unter Ihrem Domainnamen (siehe Kapitel 4)
http://pages.demo-dahoam.de/de/streaming/detail/POI/06CC07B6675A2DB8A310708FE78B31A4/aqacur-badewelt-bad-kotzting


Damit die „Teilen“ Funktion (per eMail, Facebook, Google+, Twitter) in den eT4 PAGES Ihre Angebote im Layout der eigenen Webseite ausliefern kann muss die Streaming-Einbindung konfiguriert sein.

Im nachfolgenden Video wird die Konfiguration der Streaming-Einbindung demonstriert:


Step-by-Step Anleitung:

  1. Öffnen Sie Ihre Webseite und erstellen Sie eine neue leere Webseite. Hinweis: Diese Webseite muss nicht im Menü veröffentlich werden.
  2. Gehen Sie auf den Bearbeiten-Modus der neuen Webseite (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@hubermedia.de und senden Sie uns die URL der gerade angelegten Webseite. Demo-Link
  7. Fertig!
    Nach Prüfung und Freischaltung übersendet Ihnen unsere Kundenbetreuung die neuen eT4 PAGES Basis-URLs mit aktiviertem Streaming

Beispiele der PAGES Basis-URLs mit aktiviertem Streaming:

3. URL-Parameter

Mit den eT4 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).

3.1. Filterung von Inhalten

3.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.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.4 Sortierung/Radius

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

4. SEO-Optimierung

Dieses Kapitel widmet sich der perfekten Integration und Auffindbarkeit Ihrer eT4 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 eT4 PAGES auch das Streaming korrekt eingerichtet haben (siehe Kapitel 2.2). Ansonsten erscheinen Ihre eT4 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.

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

Beispiel wie die eT4 PAGES URL’s nach der Registrierung der Subdomin zusätzlich verfügbar sind:

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

4.2. Sitemap bei Google registrieren

Die eT4 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:

http://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  http://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@hubermedia.de und senden Sie uns Ihren Tracking-Code (z.b. UA-755406-105).

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: http://www.demo-dahoam.de/sitemap.xml.gz
Nach: http://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=“http://pages.demo-dahoam.de/sitemap.xml.gz“ redirectType=“Permanent“ />
</rule>

Weiterleitungs-Regel für die eT4 PAGES URL’s am Beispiel des Microsoft IIS:

z.B. von: http://www.demo-dahoam.de/de/pages/streaming/search/Gastgeber
z.B. nach: http://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=“http://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 eT4 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 eT4 PAGES nicht mehr anbieten, da wir von der Ausfallsicherheit Ihres Webservers „abhängig“ sind.

Weiterleitungs-Regel für die eT4 PAGES URL’s am Beispiel von Apache:

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

5. 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 )

5.3 Einzelne Orte in der Suche priorisieren

Hier an einem Beispiel:

Auf der Webseite Kirchham soll bei der Sortierung Relevance, die Gastronomiebetriebe von Kirchham danach die Betriebe aus Bad Füssing zuerst angezeigt werden.

Boost Kirchham => city:Kirchham^10
Boost Bad Füssing => city:"Bad Füssing"^5
(city:Kirchham^10 OR city:"Bad Füssing"^5


5.4 Ausblenden wiederkehrende Veranstaltungen

Mit einem einfachen, kleinen Trick, können Deine Events trotzdem ohne Wiederholungen angezeigt werden.
Einfach nach Relevanz sortieren und z.B. den Zeitraum nach den nächsten 30 Tagen eingrenzen.

    • 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 ...

    • destination.pages/meta - Filtern von Daten mit Superkategorie und Umkreissuche

      Ich möchte in meiner Ausspielung Inhalte filtern, die zu den Oberkategorien "Mühlen" und "Museen" gehören. Wie geht das? Immer wenn Du auf alle Objekte eingrenzen möchtest, die in deinem Kategoriebaum zu bestimmten Oberkategorien gehören, empfiehlt ...