Hinweise für Fortgeschrittene

Neben der einfachen Variante in der Grundanleitung gibt es noch einige weitere Möglichkeiten den Frontend Client einzubinden.

Dieser Abschnitt der Anleitung setzt voraus, dass Sie die Basisinstallationsanleitung gelesen haben und über ein mindestens durchschnittliches Verständnis von Javascript verfügen. Er enthält keine für den Standardbetrieb benötigten Informationen.

Einbindung des Frontend Clients (Bootstrapper)

Grundsätzlich ist eine Einbindung des Bootstrappers auch außerhalb des HEAD Elements möglich. Es muss lediglich sichergestellt sein, dass der Bootstrapper vor der ersten Verwendung der JS API zum Einbinden eines Content-Elements geladen ist.

So ist eine Integration auch (wie oft wegen der Performance empfohlen) als letztes Element im BODY möglich. Daraus ergeben sich natürlich Abhängigkeiten für die übrige Einbindung, von daher sollten Sie diese Möglichkeit nur wahrnehmen, wenn Sie über ausreichend weitgehende Javascript Kenntnisse verfügen. Grundsätzlich können wir für solche Setups nur eingeschränkt Support bieten.

Laden von Content-Elementen

In den Standard Beispielen wird das Content-Element immer inline mit einem Javascript Block geladen. Grundsätzlich kann dieser API Aufruf an jeder Stelle und zu jeder Zeit in der Seite erfolgen. So kann der API Aufruf auch durchaus dynamisch oder verzögert (z.B. nach window.onload) erfolgen.

Ebenso ist es keinesfalls erforderlich, dass der Skriptblock immer innerhalb des Elements steht, in das das Content-Element geladen werden soll.

Beginn des Renderings

Der Frontend Client wird versuchen das window.onload Event abzuwarten. Wird erkannt, dass dieses Event zu lange braucht, beginnt der Client bereits vorher mit der Ausführung. Dies ist besonders dann wichtig, wenn in der Host Seite ein langsam ladendes Element eingebunden ist. Grundsätzlich ist es sinnvoll solche Elemente zu entfernen, damit jedoch nicht der gesamte Rendering Prozess des Frontend Clients in nicht optimierten Seiten verzögert wird, wird nur eine begrenzte Zeit gewartet.

Elemente die Sie vor dem Start des Renderings aber nach dem Laden des Clients über die API hinzufügen werden in eine Warteschlange geschrieben und mit dem Start des Renderings ausgeführt.

Styling

Bitte vermeiden Sie es die von uns geladenen Elemente zu stylen. Wir behalten uns vor die Elemente jederzeit und ohne Vorwarnung umzugruppieren. Tatsächlich verwenden wir Mechaniken, damit Anpassungen an Ihre Seite von uns hinterlegt und dynamisch ausgeliefert werden. Frisch nach der Einbindung wird Ihnen vermutlich das Standarddesign ausgeliefert. Wenn Sie die Einbindung abgeschlossen haben, empfiehlt es sich, uns mit der Angabe einer (evtl. versteckten) URL zu kontaktieren, damit wir (sofern gewünscht) individuelle Anpassungen vornehmen können.

Wenn möglich sollten Sie auch versuchen in der Host Webseite keine globalen CSS Selektoren für das Styling zu verwenden, da diese sich auch auf die geladenen Elemente auswirken (und das oft unerwünscht).

Bitte beachten Sie bei der Anpassung auch die Konfigurationsoptionen der einzelnen Elemente, oft lassen sich Features dazu oder weg konfigurieren. Einige Features (besonders der Umfang der Suche), werden auch zentral von uns konfiguriert. Kontaktieren Sie uns in solchen Fällen.

Mehrsprachigkeit

Momentan werden Deutsch und Englisch unterstützt, weitere Sprachen sind möglich. Die Sprachauswahl kann dabei auf einem von drei Wegen erfolgen:

• automatisch durch Erkennung des im Browser eingestellten Sprachpräferenz
• durch manuelle Auswahl über die Sprachumschaltung (sofern eingeblendet)
• durch Übergabe einer Sprachauswahl an den Bootstrapper durch z.B. ein CMS

CMS Sprachumschaltung

Um eine Sprachumschaltung über ein CMS auszuführen, müssen Sie einen Parameter an den Bootstrapper des Frontend Clients anfügen: op_client_language. Mögliche Werte sind aktuell de und en.

Beispiel:

<script type="text/javascript" src="https://ssl.optimale-praesentation.de/frontend/js/bin/boot?secratoid=YOUR_ID&op_client_language=LANG"></script>

Code Isolation

Der Frontend Client verwendet aggressives Namespacing (unter window.secra_op_client) zur Isolation der geladenen Elemente von der umgebenden Seite. Tatsächlich ist es sehr unwahrscheinlich, dass der Client vorhandene Inhalte der Seite beeinflusst, umgekehrt ist dies jedoch nicht immer auszuschliessen in heutigen Browsern.

Verschiedene Javascript Frameworks sind für das Verwenden einiger bad practices bekannt, z.B. das Erweitern von Standardobjekten. Der Frontend Client selbst lädt alle seine Abhängigkeiten dynamisch nach. Wenn Sie also den Verdachte haben, dass es eine Inkompatibilität gibt, so entfernen Sie zunächst allen fremden JS Code aus der Seite und versuchen Sie es erneut. Falls sich Ihr Verdacht bestätigt, lassen Sie es uns bitte wissen. Wir sind immer daran interessiert die Kompatibilität zu weit verbreiteten JS Frameworks sicherzustellen, soweit das möglich ist.

SEO Abdeckung per Sitemap verbessern

Für die Verwendung dieser Funktion muss ein .htaccess und ein robots.txt Eintrag auf der Webseite eingerichtet werden und das Suchen & Buchen Frontend bereits eingebunden sein. Es empfiehlt sich daher dies als letzten Schritt vorzunehmen.

In der robots.txt muss ein Sitemap Eintrag zusätzlich aufgenommen werden.

Achtung, die Sitemap ersetzt keine volle Sitemap der Webseite, sie ergänzt sie nur!

Fügen Sie folgene Zeile an das Ende der robots.txt an, tragen Sie dazu die passende Domain ein.

Sitemap: http://INSERT-YOUR-DOMAIN-HERE/op_object_sitemap.xml

In der .htaccess:

RewriteRule "^op_object_sitemap.xml$" "https://www.optimale-praesentation.de/frontend/seo/object_sitemap_generator.php?secratoid=SECRATOID&objectroot=OBJECTROOT&hashbase=HASHBASE" [NE,L,P,QSD]

Die Werte für SECRATOID, OBJECTROOT und HASHBASE sind entsprechend zu ersetzen, wobei SECRATOID die gleiche ID wie beim Laden des Bootstrappers ist.

Der Wert für OBJECTROOT wird ermittelt, indem Sie eine Objektseite des neuen Frontends aufrufen und die URL kopieren. Entfernen Sie jetzt alles bis inkl. zum Hashtag (#). Die HASHBASE ist der Teil nach dem Hashtag, ohne die Objektnummer (#!m/3/object/123 --> !m/3/object/). Das Ergebnis kann dann URL encodiert werden, beispielsweise mit Hilfe eines beliebigen Onlinetools. Wenn Ihre Änderung korrekt ist, sollten Sie unter http://INSERT-YOUR-DOMAIN-HERE/op_object_sitemap.xml eine gültige Sitemap mit den URLs der Objekte erhalten.

Bitte beachten Sie auch, dass sowohl mod_rewrite als auch mod_proxy aktiviert sein müssen für den Apache Webserver.

Ein Eintrag der Sitemap URL über die Google Search Console kann den Prozess noch weiter beschleunigen.

Troubleshooting

Häufige Probleme