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

Grundsätzlich setzt das Frontend nur Cookies die für die Funktion erforderlich sind, beispielsweise für die Sprachumschaltung und Debug Modi. Zusätzliche Daten werden im Session Storage des Browsers hinterlegt (der ebenfalls durch die Cookie Richtlinie betroffen ist, auch wenn der Name etwas anderes suggeriert). Im Session Storage werden dabei Nutzereinstellungen und Caches erzeugt. Zu keinem Zeitpunkt werden persönlich identifizierbare Merkmale oder Trackinginformationen durch das Frontend gespeichert.

Sie können das Frontend ohne Cookies verwenden. In diesem Fall werden auch der Großteil der bereits gespeicherten Cookies des Frontends gelöscht. Verwenden Sie zum Deaktivieren der Cookies die useCookies: false Option der jeweiligen Modulkonfiguration. Dieser Wert muss vor dem Laden des Frontends gesetzt sein. Die individuelle Umsetzung für Ihre Gesamtseite obliegt Ihnen.

Wollen Sie die Cookieverwendung zur Laufzeit umschalten, sollten Sie einen passenden Default in der Einbindung (false) wählen und dann über die vom Frontend Core bereitgestellten Methoden den Support aktivieren bzw. deaktivieren. Dazu stehen die folgenden Methoden global per Javascript bereit:

  • secra_op_client.enableCookies()
  • secra_op_client.disableCookies()

Viele Cookie Banner setzen für die Auswahl ein eigenes Cookie. Sie können das Frontend auf die bestätigte Auswahl prüfen lassen, beispielsweise mit useCookies: (document.cookie.indexOf('YOUR_COOKIE_CONSENT_TEST_HERE=YOUR_VALUE') >= 0) als Konfigurationsoption. Auf diese Art können Sie den Default nach einem Neuladen der Seite korrekt setzen.

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.


results matching ""

    No results matching ""