TBE2 - Einbindung der Angular App auf Ihrer Seite

Was ist eine Angular App?

Eine Angular App ist eine sogenannte „Client Side Application“. “Client-Side” bedeutet, dass die Webseite nicht wie früher hauptsächlich auf dem Server initialisiert und aufgebaut wird, sondern ein Großteil der Prozesse der Website im Browser ausgeführt werden.

Da Webseiten nicht mehr neu geladen werden müssen, wenn man auf einen Link klickt oder mit der Webseite interagiert, sind Client-Side Applications viel schneller als normale auf dem Server verarbeitete Webseiten. Der Unterschied zu einer nativen Smartphone App ist dadurch kaum noch spürbar.

Ein weiterer Vorteil ist die Sicherheit. Der Seitenbetreiber, der die Applikation einbindet, verspürt keine weitere Serverbelastung, da die App direkt im Browser des Benutzers ausgeführt wird. Somit ist es für Angreifer auch unmöglich, über die Anwendung Zugriff auf den Server des Seitenbetreibers zu bekommen. Das Angular Framework, welches von Google entwickelt wird, verfügt zusätzlich über Mechanismen, die Cross-Site-Scripting weitestgehend unterbinden und somit potentielle Sicherheitslücken für den Benutzer schließen. Zudem befinden sich alle Funktionen und HTML-Elemente in einer einzigen JavaScript-Datei. Das bedeutet, das Einbinden der Applikation in eine bestehende Seite ist sehr einfach und es besteht keine Gefahr, dass sich Funktionen mit der bestehenden Seite überschneiden.

Außerdem muss der Browser die Applikation nur beim initialen Besuch der Seite laden. Bei allen weiteren Besuchen befindet sich die komplette Applikation dann bereits im Cache (lokaler Speicher des Browsers).

Die App kommuniziert im Hintergrund mit einer Schnittstelle (REST API). Diese liefert die rohen Daten, die die Applikation für die Darstellung der einzelnen Seiten weiterverarbeitet.

Wie binde ich die TBE auf meiner Seite ein?

Die CSS Datei muss im <head>-Bereich der gewünschten Website eingebunden werden (A-00000-0 durch eigene Partner-ID ersetzen):

<link rel="stylesheet" type="text/css" href="https://api.tbe2.io/v1/css/A-00000-0" media="all">

Der HTML-Platzhalter muss im gewünschten Bereich innerhalb des <body>-Tags hinterlegt werden (A-00000-0 durch jeweilige Partner-ID ersetzen):

<tbe param-pid="A-00000-0"><div class="tbe-loading"></div></tbe>

Die JavaScript-Datei muss vor dem schließenden </body>-Tag hinterlegt werden:

<script type="text/javascript" src="https://partner-app.tbe2.io/bundle.min.js"></script>

Die Applikation wird innerhalb des <tbe>-Tags geladen.

Optimierung der Ladezeiten

Da das Javascript sehr groß ist, empfiehlt es sich, die TBE nicht auf der Startseite einzusetzen. Mit folgenden Angaben im HEAD des HTML lässt sich das erste Laden der TBE beschleunigen:

<link rel="dns-prefetch" href="https://partner-app.tbe2.io " />
<link rel="dns-prefetch" href="https://api.tbe2.io " />
<link rel="preload" href="https://api.tbe2.io/v1/css/A-00000-0" as="style" />
<link rel="preload" href="https://partner-app.tbe2.io/bundle.min.js" as="script" />
<link rel="preload" href="https://partner-app.tbe2.io/i18n/de.json" as="fetch" crossorigin />

Style-Anpassungen

Ein großer Vorteil der direkten Einbindung, ist die Möglichkeit die TBE an Ihre Seite anzupassen. Dies ist über, auf Ihrer Seite eingebundenes, CSS möglich.

Zudem passt sich die Buchungsstrecke bei dieser Art der Einbindung automatisch an den Ihr zur Verfügung stehenden Platz an.

/#/ - in der URL

Der ‘#’-Zusatz teilt unserer Applikation mit, dass ab hier die nötigen Parameter für die Darstellung der einzelnen Buchungsschritte starten. Wir haben uns dafür entschieden, damit gegebenenfalls andere GET-Parameter von unseren Partnern nicht beeinträchtigt werden.

Aus SEO-Gründen hat der Einschub keine Auswirkung, da dieser ohne neuen Seitenaufruf, bzw. durch eine Weiterleitung von der Applikation hinzugefügt wird.

Sollten Sie dies dennoch umgehen wollen gibt es zwei Möglichkeiten:

Einbindung per IFrame

( NICHT empfohlen )

Die TBE kann auch in einem iFrame geladen werden.
Ein Code-Beispiel:

<iframe id="tbeIFrame" src="https://tbe.travelsystem.de/index.html#/search?pid=A-00000-0" width="1024" height="2500"></iframe>

Die im Beispiel verwendete Account-ID (A-00000-0) muss durch eine Ihre ID ausgetauscht werden.
Die Werte width (Breite des iFrames) und height (Höhe des iFrames) können ebenfalls nach Bedarf angepasst werden.

Bei dieser Methode der Einbindung haben jedoch Styleanpassungen per CSS Ihrerseits keinerlei Einfluss auf die TBE.

Resizer

Damit sich die TBE bei einer Einbindung per iFrame an den zur Verfügung stehenden Platz anpasst, muss folgende JavaScript-Datei vor dem schließenden Body-Tag </body> eingebunden werden:

<script type="text/javascript" src="https://travelsystem.de/dynamic/tbe2_resize/tbe2IframeResizer.js"></script>

Nach dieser Einbindung muss folgender JavaScript Funktionsaufruf eingebunden werden:

<script type="text/javascript"> tbe2Resize(document.getElementById('tbeIFrame')); </script>

tbeIFrame kann durch die jeweilige iFrame-ID ersetzt werden.
Optional: Das setzen des HTML-Attributes scrolling="no" im iFrame-Tag, verhindert einen sichtbaren Scrollbalken im iFrame.

» Zum Seitenanfang