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.
Die destination.pages Links finden Sie in destination.data. Gehe Sie dafür wie folgt vor:
  1. Öffne destination.data.
  2. Navigiere oben im Menü über "Content ausspielen" auf "Pages Builder".
  3. Gehe auf Start im Menü an der Seite und wähle unter Schritt 1 die gewünschte Experience aus.
  4. Wähle dann unter Schritt 2 die gewünschte Seite wie in destination. data beschrieben.
  5. Klicke unter Schritt 3 auf "Aktivierungscodes generieren".
  6. Wähle im nächsten "Schritt  3" dann Widget für die Website aus.
  7. Anschließend erscheinen die Links darunter.

Nachfolgend einmal der Aufbau eines dieser Links erklärt:
Notes
https://pages.destination.one/de/open-data/default/search/Hotel
blau = pages URL
gelb = Sprache
pink = Projekt/Experience
rot = Darstellungsparameter (Template)
grün = Trefferliste/Suche
türkis = Datensatztyp

1.2. Welche Pages habe ich?

Info
Zur Zeit befinden sich noch zwei pages Versionen im Umlauf. Die alte im klassischen Design (Entwicklung eingestellt) und die neue mit überarbeitetem Design und besserer Performance.
Idea
Gerne können Sie vom alten destination.pages-Layout auf das neue Layout upgraden. Bitte wenden Sie sich dafür an Ihre Kundenbetreuung unter support@destination.one . Hier erhalten Sie Informationen zum Prozessablauf und werden über entstehende Kosten informiert.

Vergleiche einfach mit den folgenden Bildern:

Neue pages


Alte pages

2. Einbindung in die Website: destination.pages - neu

2.1 Einbindung Suchseite/Übersichtsseite

Info
Mithilfe der Filterung im pages frontend haben Sie die Möglichkeit eine individualisierte Listendarstellung auf Ihrer Website einzubinden.
Warning
Dies setzt eine bereits existierende Website und Landingpage voraus. Die Landingpage muss aber nicht im Menü o.ä. angezeigt werden.
Wichtig: Bei Umstellung von altem auf neues Layout ändert sich der Parameter hiddenquery. Falls Sie diesen verwenden, müssen Sie bitte umstellen von ?hiddenquery= (alt) auf /hiddenquery: (neu).

2.1.1 Schnelle Einbindung über die Benutzeroberfläche

  1. Gehe auf die pages Sucheseite.

  2. Gehe über das Feld oben "mehr Filter" zu den Filteroptionen und filtere deine Ansicht wie gewünscht.
  3. Nachdem alle Sachen gefilter sind, hänge oben in der URL Zeile deines Browsers "?showscript=true" an.
    Bsp.:
    https://pages.destination.one/de/open-data-vorlage/default/search/Event/mode:next_months,3/sort:chronological?showscript=true
  4. In der nun erschienen Eingabemaske kann nun noch weiter definiert werden, was ausgegeben werden soll, je nachdem welche Haken angewählt werden.
    Versteckte Suchbegriffe = versteckt die Suchbegriffe
    Nur Treffer anzeigen = blendet die Suchleiste aus -> geeignet für reine Trefferlisten Seite
    Zeitbereich ignorieren = ignoriert den angegebenen Zeitbereich
  5. Im Anschluss muss das Skript nur noch auf der gewünschten Detailseite eingebettet werden.

2.1.2 Weitere Filter mithilfe von Suchparametern

Info
Diese Parameter können so in das Suchfeld in der Pages eingegeben werden.
  • category:"KATEGORIENAME"
  • city:"ORTSNAME"
  • tag:"KEYWORD" (über in destination.data hinterlegten Keywords können beliebige Listen erstellt werden; Beispiel: alle POIs mit Stichwort „Barrierefrei")
  • feature:"MERKMAL" (Beispiel: Alle beschilderten Wander-Touren)
  • title:"TITELNAME" Mit diesem Parameter wird die Suche nur im Titel durchgeführt
  • highlight:true zeigt eine Trefferliste mit Highlights an
  • id: hier kann eine gezielte ID aus destination.data hinterlegt werden
  • globalid: Hier kann gezielt nach einem (oder mehreren) Inhalten gezielt gefiltert werden Die Gobal-ID finden Sie auf der jeweiligen Pages-Detailseite untenstehend. (Hinweis: Die Global ID ändert sich sobald sich Titel oder Geokoordinate des Eintrags ändern).
Erstellung von kombinierten Filtern
Info
Durch ODER-Verknüpfungen können Sie beliebige Kombinationen vornehmen.

  • category: (Freibäder OR Seen)  Hinweis: Sie können, durch weitere „OR“ hier auch mehr als zwei Kategorien kombinieren z. B. category: (Almen OR Gasthof OR Café)

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

  • all:all -"KATEGORIENAME"
Sortierung/Radius
Die Inhalte können darüberhinaus nach verschiedenen Kriterien sortiert werden. Verwenden Sie hierfür den Sortierbutton in den PAGES.

  • sort:distance Mit diesem Parameter können die Inhalte zusätzlich nach Entfernung sortiert werden.
    Tipp: Drücken Sie auf „Meinen Standort anzeigen“ um Ihren aktuellen Standort zu verwenden (Standort kann durch Änderung der Lat./Long.-Werte angepasst werden.
    (Beispiel http://pages.destination.one/de/IHRE EXPERIENCE/default/search/POI/Lat:49.2852423/Lng:12.7375558/sort:distance/view:gallery)
  • sort:relevance Hier werden gut gepflegte Datensätze und Highlights zuerst ausgespielt
  • sort:distance_relevance Wie relevance nur mit Distanz als weitere Priorität dabei
  • sort:last_change Sortierung nach zuletzt aktualisierten Datensätzen
  • radius:"UMKREIS IN METER" Mit diesem Parameter können Sie die Inhalte in einem bestimmten Radius um einen zentralen Punkt anzeigen. Geben Sie hierfür die Radiusgröße in Metern an (Beispiel: http://pages.destination.one/de/IHRE EXPERIENCE/default/search/Poi/Lat:49.2852423/Lng:12.7375558/view:list/sort:distance/radius:3000
    ). WICHTIG: Wenn sich der Nutzer außerhalb des Radius befindet, kriegt er 0 Treffer!
  • sort:title Hier werden die Datensätze alphabetisch nach A-Z sortiert

2.1.3 Weitere Einstellungen mit URL-Parametern

Info
Diese Parameter können in der URL Zeile eingegeben werden. Platzieren Sie diese an den Stellen wie in den Beispielen danach.

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. Einbindung in die Website: destination.pages - alt

3.1 Einbindung Sucheseite/Übersichtsseite

3.1.1 Schnelle Einbindung über die Benutzeroberfläche

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

Gehe auf die Suchübersichtsseite der pages
1. Grenze die Suche ein. Bspw. durch Standorte, Kategorien u.ä.
2. Wähle oben rechts die Darstellung aus. Entweder Galerie oder Liste.
3. Klicke unten auf "Teilen" und dann das grüne Symbol.
4. Kopiere das Java Script und füge es auf auf Seite ein. (bspw. als Iframe)


3.1.2 Weitere Filter mithilfe von Suchparametern

Info
Diese Parameter können so in das Suchfeld in der Pages eingegeben werden.
  • category: KATEGORIENAME
  • city: ORTSNAME
  • tag: KEYWORD (über in destination.data hinterlegten Keywords können beliebige Listen erstellt werden; Beispiel: alle POIs mit Stichwort „Barrierefrei")
  • feature: MERKMAL (Beispiel: Alle beschilderten Wander-Touren)
  • title: Mit diesem Parameter wird die Suche nur im Titel durchgeführt
  • globalid: Hier kann gezielt nach einem (oder mehreren) Inhalten gezielt gefiltert werden Die Gobal-ID finden Sie auf der jeweiligen Pages-Detailseite untenstehend. (Hinweis: Die Global ID ändert sich sobald sich Titel oder Geokoordinate des Eintrags ändern).
Erstellung von kombinierten Filtern
Info
Durch ODER-Verknüpfungen können Sie beliebige Kombinationen vornehmen.

  • category: ("Kategorie 1" OR "Kategorie 2") 
  • Beispiel: category:("Kategorienamen1" OR "Kategorienamen2")
    Beispiel: category:("Kategorienamen1" OR "Kategorienamen2")

    Hinweis: Sie können, durch weitere „OR“ hier auch mehr als zwei Kategorien kombinieren z. B. category: (Almen OR Gasthof OR Café)

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

  • all:all -"KATEGORIENAME"
  • Beispiel: all:all -category:"Kategoriename"
Sortierung/Radius
Die Inhalte können darüberhinaus nach verschiedenen Kriterien sortiert werden. Verwenden Sie hierfür den Sortierbutton in den PAGES.

3.1.3 Weitere Einstellungen mit URL-Parametern

Info
Diese Parameter können in der URL Zeile eingegeben werden. Platzieren Sie diese an den Stellen wie in den Beispielen danach.

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 Einbindung einzelne Detailseite

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.



4. Weitere Einstellungen für eine optimierte Darstellung (alt und neu)

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

Folgenden Skript Tag entweder im Header oder im Body hinterlegen:

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

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

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

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

Einstellung über Code

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
Notes
<script id="destination.pages" type="text/javascript" src="https://pages.destination.one/de/IHRE_EXPERIENCE/default/search/Poi/category%3A%22Direktvermarkter%22/view:gallery/sort:title?i_target=destination.pages&i_scroll_offset=0&i_ header_offset =[HÖHE DES HEADERS]&i_footer_offset=[HÖHE DES FOOTERS]">
</script>
NotesInfoi_ 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 )

Alternative Einstellung im Pages Builder

Alternativ kann das ganze auch in den Grundeinstellungen des Pages Builders hinterlegt werden. Gehen Sie dafür wie folgt vor:
Öffnen Sie destination.data
1. Gehen in den Pages Builder
2. Öffnen Sie die Grundeinstellungen
3. Hinterlegen Sie das Offset in den Feldern.




Notes
Wenn du auf einer Webseite eine sogenannte Sticky Navigation hast (also eine Menüleiste, die immer oben bleibt, während du nach unten scrollst), dann kann es passieren, dass eingebettete Inhalte aus destination.one Pages an die falsche Stelle springen.
Warum passiert das?
Weil das System denkt: „Ich soll den Nutzer zum eingebetteten Inhalt scrollen.“ – aber es weiß nicht, dass dein Menü immer oben bleibt und vielleicht 50 oder 100 Pixel vom Bildschirm „wegnimmt“. Dadurch landet der Inhalt verdeckt unter der Navigation oder an einer unerwarteten Position.
​
Beispiel: Angenommen, deine Webseite hat eine Sticky Navigation, die 80 Pixel hoch ist, dann kannst du folgendes tun: &i_header_offset=80
Idea
Tipp: Wenn dein Header beim Scrollen kleiner wird (z. B. von 100px auf 50px), musst du einen Mittelwert nehmen oder testen, was am besten passt.

    • Related Articles

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

    • Datensätze filtern / suchen in der Übersicht

      Filtermöglichkeiten in destination.data Folgende Filtermöglichkeiten stehen Dir in destination.data zur Verfügung 1. Datenqualität Hier kannst Du nach der Datenqualität filtern, um nur die schlechter gepflegten Datensätze anzuzeigen und ggf. zu ...