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&secragagenr=gagenr" [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 secragagenr
ist optional und kann bei nicht gesetztem Wert weggelassen werden.
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/).
Der Wert für secragagenr
ist optional und kann verwendet werden, um die Sitemap nur für Objekte bestimmter Gastgeber zu erhalten.
Dabei kann es sich um eine einzelne Gastgebernummer oder eine durch Komma getrennte Liste von Gastgebernummern handeln.
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
Problem | Ursache |
---|---|
Einige Elemente werden geladen, aber die Ladeanimation scheint endlos weiterzulaufen. | Unser Client ist in mehrere Abschnitte unterteilt. Wenn die Freischaltung Ihrer Domain durch uns noch nicht erfolgt ist, kann der Client nur statische Inhalte rendern und blockiert, sobald er API Anfragen an uns stellt. Kontaktieren Sie unseren Support unter Angabe der Domain mit der Sie auf den Inhalt zugreifen. |
Das Frontend scheint insgesamt nicht zu laden. | Haben Sie den Client / Bootstrapper richtig eingebunden? Haben Sie ein Content-Element geladen? Sind Javascript Fehler aufgetreten, z.B. durch einen Tippfehler oder eine nicht kopierte Klammer bei der Einbindung? |
Einige Elemente des Frontends verhalten sich seltsam bzw. verschwinden teilweise. | Haben Sie in der Seite anderen JS Code eingebunden oder andere Frameworks geladen, die möglicherweise mit unseren Inhalten unerwartet interagieren, beispielsweise durch zu großzügige Selektoren? |
Die Karte der Suche scheint unverhältnismäßig hoch zu sein und das Infinity Scrolling lädt alle Objekte auf einmal. | Das passiert, wenn die Höhe der Seite für uns nicht richtig bestimmbar ist. Eine mögliche Ursache ist ein fehlender oder ungültiger DOCTYPE. Stellen Sie sicher, dass ein korrekter DOCTYPE gesetzt ist. |
Einige Elemente der Suchergebnisse scheinen unsichtbar zu sein bzw. sind nicht mehr sichtbar, wenn ich zurückscrolle! | Suchergebniselemente die nicht im Sichtbereich liegen werden aus Browserperformancegründen invisible gestellt und beim zurückscrollen wieder auf sichtbar. Für diese Mechanik ist das Erkennen der Scrollposition essentiell. Dieser Fehler tritt daher häufig auf, wenn bestimmte overflow: hidden Varianten auf den übergeordneten Elementen verwendet werden. |