Beiträge in diesem Abschnitt

Weitere anzeigen

Eigener Code

  • Aktualisiert

Der Editor ist flexibel: Du kannst bestehenden Code anpassen oder eigenen Code hinzufügen. So erweiterst du den Funktionsumfang der Plattform und schaltest zusätzliche Funktionen frei. Du kannst zum Beispiel ein eigenes Kalender-Widget einbauen oder ein Kontaktformular eines Drittanbieters, über das du Zahlungen auf deiner Website annimmst.

Eigenen Code hinzufügen

Eigenen Code fügst du über das HTML-Widget hinzu. Hier findest du die Anleitung dazu.

Hinweis:

  • Eigener Code, der auf der Website sichtbar sein soll, gehört in ein HTML-Widget. Code, der nicht sichtbar ist, gehört normalerweise in den Header. Grundsätzlich befolgst du am besten zuerst die Anweisungen des Code-Autors, bevor du den Code in deine Website einbaust.
  • Du kannst keine PHP-Dateien hochladen oder ausführen. Serverseitige Sprachen wie PHP werden nicht unterstützt, weil die Plattform keine serverseitige Ausführung und keinen Zugriff auf das Dateisystem bietet.

HTML-Widget

Das HTML-Widget ist der einfachste Weg, um eigenen Code in deine Website einzubauen. Je nachdem, wo du das HTML-Widget platzierst, erscheint es auf allen Seiten deiner Website oder nur auf einer einzelnen Seite. Wenn du das HTML-Widget in den Header oder Footer setzt, wird es gleichzeitig auf allen Seiten der Website platziert. Das liegt daran, dass jede Website denselben Header und Footer nutzt. Platzierst du das HTML-Widget an einer anderen Stelle, erscheint es nur im Textkörper.

So fügst du ein HTML-Widget hinzu:

  1. Klicke in der Seitenleiste auf Hinzufügen und dann auf Elemente.
  2. Suche nach HTML, ziehe das Widget per Drag-and-drop in eine Spalte oder Zeile deiner Website und füge dann deinen Code ein.

Eigener Code im Header

Du kannst Code in den seitenweiten Header oder in den Header einer einzelnen Seite einsetzen.

Hinweis: Apps zur Einwilligungsverwaltung (Consent-Management-Apps) können nicht verhindern, dass Code vor der Einwilligung ausgeführt wird, wenn dieser im Header-HTML liegt. Der Grund: Wir optimieren, wie Inhalte aufgebaut und in welcher Reihenfolge sie geladen werden, orientiert an Best Practices für die Performance. Skripte und CMP-Banner platzieren wir weiter unten auf der Seite, um das Laden der Hauptinhalte zu beschleunigen. Deshalb solltest du Code am Ende des Textkörpers einsetzen, wenn du eine App zur Einwilligungsverwaltung nutzt.

Seitenweiter Header

So setzt du den Code in den seitenweiten Header ein:

  1. Klicke in der Seitenleiste auf Mehr und dann auf Einstellungen.
  2. Klicke auf Head HTML.
    • Head HTML. Füge Inhalte in das Feld für den Head-Bereich ein.
    • HTML für Textkörper-Ende. Füge eigenes HTML/JavaScript direkt vor dem schließenden Tag des <body>-Elements jeder Seite der Website ein.
  3. Füge deinen Code ein und speichere.

Header einer einzelnen Seite

So setzt du den Code in den Header einer einzelnen Seite ein:

  1. Klicke in der Seitenleiste auf Seiten.
  2. Klicke bei der Seite, in die du den Code einbauen willst, auf das Einstellungssymbol.
  3. Klicke auf Seiten-SEO.
  4. Scrolle nach unten zu Header-HTML.
  5. Füge deinen Code hier ein und speichere.

Mein Code verschwindet, wenn ich ihn in den Head-Bereich einsetze

Es kommt häufig vor, dass Pixel-Tracking-Codes verschwinden, wenn du sie in den Header setzt. Der Head-Bereich <head> nimmt keinen Code an, der <img>, <iframe> und Ähnliches enthält. Normalerweise akzeptiert er nur <link>, <script> und <meta>.

Wenn du Code einfügen musst, der im Head-Bereich nicht gespeichert wird, füge ihn stattdessen in das Feld HTML für Textkörper-Ende ein. Folge dazu den Schritten im Abschnitt „Eigener Code nach dem öffnenden Body-Tag" in diesem Artikel.

Eigener Code nach dem öffnenden Body-Tag

Aktuell gibt es keine Funktion, um Code direkt nach dem öffnenden Body-Tag einzusetzen. Du kannst Code aber in das Feld HTML für Textkörper-Ende in den Einstellungen einfügen.

So fügst du Code in das Feld HTML für Textkörper-Ende ein:

  1. Klicke in der Seitenleiste auf Mehr und dann auf Einstellungen.
  2. Klicke auf Head HTML.
  3. Füge deinen Code in das Feld HTML für Textkörper-Ende ein.
  4. Klicke auf Speichern.

Eigener Code in Elementen oder Widgets

Viele Elemente, darunter Zeilen, Spalten und Widgets, bieten Zugriff auf ihr HTML/CSS.

Wenn du im Classic Editor den Flex-Modus nutzt oder im Editor 2.0 arbeitest:

  • Du kannst das CSS von Flex-Containern bearbeiten (Abschnitt, Spalte, innere Spalte und erweitertes Raster). Im Editor 2.0 kannst du außerdem das CSS von Headern und Footern bearbeiten.
  • Das Design-Panel bildet möglicherweise nicht alle Änderungen am eigenen Code ab. Das kann zu Unterschieden im Stil zwischen dem Design-Panel und den Inline-Elementen führen.

So fügst du Code zu einem Element oder Widget hinzu:

  1. Klicke im Classic Editor mit der rechten Maustaste auf dein Widget oder Element, um das Kontextmenü zu öffnen.
  2. Wenn du im Flex-Modus des Classic Editor oder im Editor 2.0 bist: Klicke, um den Flex-Container, den Header oder den Footer auszuwählen.
  3. Klicke auf HTML/CSS bearbeiten. Wenn du im Flex-Modus des Classic Editor oder im Editor 2.0 bist, klicke auf das Drei-Punkte-Symbol im schwebenden Menü und wähle dann CSS bearbeiten.
  4. Bearbeite oder ergänze den Code hier nach Bedarf.
  5. Klicke auf Aktualisieren.

Möglicherweise musst du den Browser neu laden, damit du die Änderung siehst.

Tracking-Code zu einem Kontaktformular hinzufügen

So fügst du einem Kontaktformular Tracking-Code hinzu:

  1. Wechsle zu der Seite, auf der dein Kontaktformular liegt.
  2. Klicke auf dein Kontaktformular, um die Optionen zu öffnen.
  3. Klicke auf Übermittlung.
  4. Klicke auf Tracken.
  5. Füge deinen Conversion-Tracking-Code hier ein.

Empfohlene Richtlinien für eigenen Code

Hier sind die empfohlenen Richtlinien für die Arbeit mit eigenem Code.

Allgemeine Richtlinien

  • Für Code, der auf einer Seite liegen muss, erstellst du eine Testseite und setzt den Code dort ein.
  • Die Vorschau nutzt HTTPS, deine Live-Website unter Umständen nicht. Das führt oft dazu, dass eigener Code nicht funktioniert.
  • Achte darauf, dass du innerhalb der Spalten bleibst. Unsere responsiven Websites basieren auf einer Zeilen-Spalten-Struktur. Das heißt: Jede Zeile enthält Spalten, die letztlich die Inhalte tragen. Wenn du eigenes HTML hinzufügst oder bearbeitest, achte darauf, dass es innerhalb einer Spalte liegt.

Fehlerbehebung bei eigenem Code

Wenn du eigenen Code hinzugefügt hast, der die Performance deiner Website beeinträchtigt oder dich am Bearbeiten hindert, liegt das meist daran, dass der Code nicht korrekt formatiert oder nicht HTTPS-konform ist. Hier sind Lösungen für Probleme, die dir bei der Arbeit mit eigenem Code begegnen können.

Eine Änderung rückgängig machen oder eine frühere Version wiederherstellen

Hat eigener Code deine Website beschädigt oder willst du einfach zurück, mach deine letzten Änderungen im Editor rückgängig.

Liegt das Problem weiter zurück als dein Verlauf oder lässt sich der Editor gar nicht mehr öffnen, wende dich an den Smoobu-Support. Das Team kann die Seite für dich auf eine frühere Version zurücksetzen.

Bestimmte Fehlermeldungen

Diese Fehlermeldungen können dir begegnen, und das steckt dahinter:

  • DUPLICATE_ID. Jedes Element muss eine eindeutige ID haben.
  • INVALID_ELEMENT_LOCATION. Alle Elemente müssen in einer Spalte liegen, die wiederum in einer Zeile liegen muss.
  • BAD_PROPORTION. Die Spalten in einer Zeile müssen zusammen 12 ergeben.
  • INVALID_CLASS_FOR_ELEMENT. Einem ungültigen Element wurde eine Webseiten-Baukasten-Klasse zugewiesen.

Der Code funktioniert nicht

Funktioniert Code auf der Website nicht, ist er meist falsch formatiert oder nicht HTTPS-konform.

Wenn dein Code Links enthält (http:// oder //) und deine Website HTTPS nutzt oder du in der Vorschau bist, musst du diese in https:// ändern. Der Grund: Nicht-HTTPS-Code funktioniert in einer über HTTPS geladenen Verbindung nicht (Website-Vorschau, Editor usw.).

Der Editor lässt sich nicht öffnen

Wenn du beim ersten Laden deiner Website nicht auf den Editor zugreifen kannst, versuche, den Editor über eine neue Seite zu öffnen: Hänge dazu einen anderen Seitenpfad an das Ende deines Editor-Links an (zum Beispiel /about). Dort angekommen, kannst du die Seite, die Probleme macht, löschen und neu anlegen.

Ist der Editor defekt, kannst du auch versuchen, ihn über das Tastenkürzel für den Element-Inspektor zwangsweise zu öffnen. Auf dem Mac ist das Kürzel Command+Option+C. Auf dem PC ist das Kürzel Strg+Alt+C.

Die nicht gesicherte Version des Editors laden

Lade die nicht gesicherte Version des Editors, um Skripte zu laden, die nicht über eine sichere Verbindung eingebunden wurden. Öffne den Editor dazu über eine nicht sichere Verbindung, indem du ?nossl an deine Editor-URL anhängst.

Problem mit der Seitengeschwindigkeit

Die Optimierung der Seitengeschwindigkeit beeinflusst, wie bestimmte Skripte ausgeführt werden. Wir führen auf den meisten Seiten eine PageSpeed-Optimierung durch, die zu Problemen mit deinem eigenen Code führen kann.

So findest du heraus, ob dein eigener Code von einem Problem mit der Seitengeschwindigkeit betroffen ist:

  1. Dupliziere die Seite mit deinen Skripten.
  2. Ändere die URL in „testing_scripts".
  3. Veröffentliche die Seite und prüfe sie dann auf deiner Live-Website.
  4. Wenn dein Code auf dieser Seite funktioniert, wende dich an den Support, damit die Seitengeschwindigkeits-Optimierung für deine Website deaktiviert wird.

Wenn du ein Skript nutzt, kannst du auch versuchen, es asynchron laufen zu lassen. Das ist keine Garantie, löst aber manchmal das Problem, dass Skripte im Browser nicht richtig ausgeführt werden.

Um async für Skripte zu aktivieren, änderst du deinen Code wie folgt:

  • Alter Code: <script src="https://example.com/script.js"></script>
  • Neuer Code: <script src="https://example.com/script.js" async defer></script>

Verwandte Beiträge

Kommentare

0 Kommentare

Zu diesem Beitrag können keine Kommentare hinterlassen werden.