Verwenden von „Code einfügen“

Füge benutzerdefiniertes HTML oder Skripte in die Seiten deiner Website ein.

Zuletzt aktualisiert: 31. Januar 2025

Du kannst mit der Option „Code einfügen“ HTML und Skripts hinzufügen, um bestimmte Teile deiner Website ansprechender oder funktionsreicher zu gestalten. Dabei kann es sich z. B. um Live-Chat-Dienste, Domain-Verifizierung für benutzerdefinierte E-Mail-Dienste oder Website-Analytics handeln.

„Code einfügen“ ist nicht dazu gedacht, um Inhalte oder Stile hinzuzufügen. Wie du Inhalte zu deiner Website hinzufügst, erfährst du unter Grundlagen zu Seiten und Inhalten. Verwende den benutzerdefinierten CSS-Editor, um benutzerdefiniertes CSS zur Gestaltung hinzuzufügen.

So erlangst du Zugriff auf diese Funktion

Das Code-Einfügen ist in den Abos Core, Plus, Advanced, Business, E-Commerce Basis-Abo und Erweitertes E-Commerce-Abo verfügbar. Weitere Informationen findest du unter Das richtige Squarespace-Abonnement wählen.

Ein Video anschauen

Bevor du loslegst

  • Wenn du Code über „Code einfügen“ hinzufügst, bitten wir dich möglicherweise, diesen Code während des Bearbeitens deiner Website zu deaktivieren.
  • Wenn du JavaScript zu „Code einfügen“ hinzufügen möchtest, gib vor und nach dem Code die Tags ein.
  • Wir empfehlen dir, CSS im CSS-Editor hinzuzufügen, statt „Code einfügen“ zu verwenden. Wenn du CSS zu „Code einfügen“ hinzufügst, gib vor und nach dem Code die Tags ein.
  • Der Footer-Bereich wird durch das Template und die Version deiner Website definiert.
  • Ajax-Laden kann verhindern, dass CSS, das zu „Code einfügen“ hinzugefügt wurde, ordnungsgemäß geladen wird. Füge stattdessen CSS zum CSS-Editor hinzu.
  • Kassen-Seiten unterstützen keinen Code.

Hinzufügen von Code zu „Code einfügen“

So fügst du benutzerdefinierten Code zu „Code einfügen“ hinzu:

  1. Öffne das Menü „Code einfügen“.
  2. Füge gültigen HTML-Code oder Skripte in die entsprechenden „Code einfügen“-Felder für den Header, Footer, die Sperrseite, die Bestellbestätigungsseite oder die Bestellstatus-Seite ein.
  3. Wenn du deinen Code hinzugefügt hast, klicke auf Speichern.

Kopfzeile

Der hier hinzugefügte Code wird in den Tag jeder Seite Ihrer Website eingegeben.

Fußzeile

Der hier hinzugefügte Code wird vor dem abschließenden Tag jeder Seite deiner Website eingefügt.

Wenn du Drittanbieter-Integrationen mithilfe von „Code einfügen“ zu deiner Website hinzufügst (z. B. Google Ads), kann dieser Code Cookies in den Browsern der Besucher ablegen. Wenn du das Cookie-Banner auf deiner Website aktivierst, kannst du mithilfe von „Code einfügen“ das Verhalten dieser Drittanbieter-Integrationen ändern, je nachdem, ob der Besucher den Cookies zugestimmt hat oder nicht.

Deine Besucher können ihre Zustimmungsoptionen angeben, wenn du die folgenden Schritte ausführst:

  1. Aktiviere dein Cookie-Banner, indem du das Menü Cookies & Besucherdaten öffnest und den Schalter neben Cookie-Banner aktivierst.
  2. Wähle den Cookie-Banner-Typ Opt-In und Opt-Out aus, der zwei anpassbare Buttons anzeigt, mit denen Kunden die Cookies deiner Website akzeptieren oder ablehnen können.
  3. Klicke auf Speichern.
  4. Füge den erforderlichen Code hinzu. Weitere Informationen findest du im folgenden Beispiel.

Wenn du beispielsweise Google Ads mithilfe von Code einfügen zu deiner Website hinzugefügt hast, sieh dir diesen Forumsbeitrag an, um Beispielcode zu sehen, den du hinzufügen kannst, um deinen Google Ads-Code in das Cookie-Banner zu integrieren.

Wenn du Google Analytics über unsere offizielle Integration verwendest, musst du in diesem Feld keinen Code hinzufügen. Nachdem du deine Mess-ID gespeichert hast, aktiviere dein Cookie-Banner.

Hinweis

Der Zustimmungsmodus ist eine Funktion von Google. Mehr dazu erfährst du in der Dokumentation von Google. Darüber hinaus werden benutzerdefinierte Code-Modifikationen nicht von unserem Support abgedeckt. Wende dich an Google Ads, wenn du Unterstützung bei der Einrichtung oder Fehlerbehebung benötigst.

Sperrseite

Der Sperrbildschirm erscheint, wenn eine Seite oder Website mit einem Passwort für die gesamte Website oder einem Seiten-Passwort geschützt wird. Der hier eingegebene Code wird über dem Passwort-Eingabefeld des Sperrbildschirms angezeigt.

Du kannst zwar Code in diesem Feld hinzufügen, wir empfehlen dir jedoch, deine Sperrseite stattdessen über das Sperrbildschirm-Menü zu gestalten. Auf diese Weise kannst du ein Hintergrundbild oder eine Diashow hinzufügen, die Schriftarten anpassen, dein Logo einfügen und mehr.

Bestätigungsseite für Bestellungen

Der hier hinzugefügte Code wird in die Bestätigungsseite für Bestellungen eingefügt, die angezeigt wird, nachdem ein Kunde den Bezahlvorgang für Geschenkgutscheine, Mitgliedschaften und Abonnements abgeschlossen hat.

Es gibt sechs Tags, mit denen du kundenspezifische Informationen einfügen kannst. Wenn ein Kauf aufgeteilt wird, weil er mehrere Abwicklungs-Profile enthält, werden Details für jede Bestellung im Kauf angezeigt.

  • {orderId} – Die Bestellnummer der bestätigten Bestellung
  • {orderSubtotal} – die Zwischensumme der bestätigten Bestellung
  • {orderSubtotalCents} – Der Gesamtbetrag der bestätigten Bestellung in Cent
  • {orderGrandTotal} – die Gesamtsumme der bestätigten Bestellung
  • {orderGrandTotalCents} – Die Gesamtsumme der bestätigten Bestellung in Cent
  • {customerEmailAddress} – Die E-Mail-Adresse des Kunden, die an der Kasse im Abschnitt „Deine E-Mail“ eingegeben wurde

Bestellstatus-Seite

Der hier hinzugefügte Code wird in die Bestellstatus-Seite eingefügt. Das ist die Bestätigungsseite, die angezeigt wird, nachdem ein Kunde den Bezahlvorgang für physische Produkte, Download-Produkte und Dienstleistungen abgeschlossen hat. Kunden können auch später zu dieser Seite zurückkehren, um ihren Bestellstatus zu überprüfen. 

Es gibt sechs Tags, mit denen du kundenspezifische Informationen einfügen kannst. Wenn ein Kauf aufgeteilt wird, weil er mehrere Abwicklungs-Profile enthält, werden Details für jede Bestellung im Kauf angezeigt.

  • {orderId} – Die Bestellnummer der bestätigten Bestellung
  • {orderSubtotal} – die Zwischensumme der bestätigten Bestellung
  • {orderSubtotalCents} – Der Gesamtbetrag der bestätigten Bestellung in Cent
  • {orderGrandTotal} – die Gesamtsumme der bestätigten Bestellung
  • {orderGrandTotalCents} – Die Gesamtsumme der bestätigten Bestellung in Cent
  • {customerEmailAddress} – Die E-Mail-Adresse des Kunden, die an der Kasse im Abschnitt „Deine E-Mail“ eingegeben wurde

Kunden können die Bestellstatus-Seite wiederholt besuchen, wodurch Tracking-Skripte möglicherweise mehrfach ausgelöst werden. Um zu vermeiden, dass derselbe Kunde mit Tracking-Skripten doppelt gezählt wird, platziere alle Skripte, die du nur beim ersten Besuch der Bestellstatus-Seite nach dem Bezahlvorgang ausführen möchtest, zwischen den Tags {.if firstPageView} und {.end}. Zum Beispiel:

{.if firstPageView}

Füge hier die Tracking-Skripte hinzu, die du erst nach dem Bezahlvorgang ausführen möchtest

{.end}

Füge hier Skripte hinzu, die du bei jedem Besuch ausführen möchtest

Den benutzerdefinierten Code deiner Bestellbestätigungsseite migrieren

Wir haben die Bestellbestätigungsseite für physische Produkte, digitale Artikel und Dienstleistungen aktualisiert. Kunden, die diese Produkttypen kaufen, landen auf einer Seite, die den Bestellstatus, die Details und die Option zum Erstellen eines Kundenkontos anzeigt.

Wenn dieses Banner im Menü „Code einfügen“ angezeigt wird, bedeutet dies, dass du „Code einfügen“ zur ursprünglichen Bestellbestätigungsseite hinzugefügt hast und diese Aktualisierung nicht auf deine Website angewendet wurde. 

MigrateOrderConfirmationCode.png

So wendest du diese Aktualisierung auf deine Website an und leitest Käufer nach dem Bezahlvorgang für digitale Artikel, physische Produkte und Dienstleistungen auf die neue Bestellbestätigungsseite weiter: 

  1. Kopiere den Code in das Feld der Bestellbestätigungsseite. 
  2. Füge ihn in das Feld der Bestellstatus-Seite ein. 
  3. Klicken Sie auf Speichern
  4. Klicke auf Ich habe meinen benutzerdefinierten Code migriert.

Bis du diese Schritte befolgst, landen alle Käufer nach dem Bezahlvorgang für alle Käufe auf der ursprünglichen Bestellbestätigungsseite.

Code einfügen für einzelne Seiten

Du kannst den benutzerdefinierten Code auch auf einer bestimmten Seite einfügen:

  1. Bewege den Mauszeiger über die Seite im Seiten-Menü.
  2. Klicke auf das Symbol .
  3. Klicke auf Erweitert.

Page Header Code Injection (Benutzerdefinierter Code für Kopfzeile) fügt einen Code in das Tag der Seite hinzu.

In den Blog-Seiteneinstellungen kann mithilfe der Option „Code einfügen“ in Blog-Eintrag Code zu sämtlichen Blogeinträgen hinzugefügt werden.

Wie „Code einfügen“ angezeigt wird, hängt von der Version deiner Website ab.

Denk daran:

  • Wir empfehlen nicht, HTML im Bereich Benutzerdefinierter Code im Seiten-Header zu verwenden. In dem Fall wird der Code nicht angezeigt, wenn du die Transparenz deines Website-Headers deaktivierst.
  • Der Bereich Benutzerdefinierter Code in Blog-Eintrag wird unter dem Beitragsinhalt angezeigt.

Denk daran:

  • „Code einfügen“ wird nicht auf Index-Landing-Pages angezeigt.
  • Abhängig von deiner Vorlage wird der Bereich Benutzerdefinierter Code in Blog-Eintrag über oder unter dem Beitragsinhalt angezeigt.
  • Bei Templates mit einer Blog-Seite im Raster-/Listen-Format wird der Code auf der Landing-Page des Blogs und nicht in einzelnen Beiträgen angezeigt.

Skripts in der Vorschau deaktivieren

Benutzerdefinierter Code kann in manchen Fällen verhindern, dass du deine Website auf sichere Art und Weise bearbeiten kannst. Wenn wir dir bei der Fehlerbehebung helfen, kann es sein, bitten wir dich unter Umständen, Skripts in der Vorschau zu deaktivieren. Das bedeutet, dass du deinen benutzerdefinierten Code nicht sehen, während du angemeldet bist. Es hat jedoch keinen Einfluss darauf, wie deine Website Besuchern angezeigt wird.

Sie werden diese Meldung unten auf Ihrer Website sehen, falls Ihr Code stört:

Wir haben einen Fehler beim Laden Ihrer Website-Vorschau festgestellt. Dies wird meist durch benutzerdefiniertem Code verursacht.

Um eine sichere Bearbeitung durchzuführen, klicke unten auf deiner Website auf Skripts in der Vorschau deaktivieren. Die Meldung ändert sich zu Skripts wurden in der Vorschau deiner Website deaktiviert. Wenn du deinen benutzerdefinierten Code anzuzeigen möchtest, öffne ein neues privates oder Inkognito-Fenster in deinem Browser und gib die URL deiner Seite ein.

Wenn die Meldung zum Deaktivieren von Skripts nicht automatisch angezeigt wird:

  1. Verlange, dass die Meldung angezeigt wird, indem du /safe direkt nach /config am Ende deiner sicheren Bearbeitungs-URL eingibst und dann die Eingabetaste drückst.
  2. Wenn dies nicht funktioniert, überprüfe alle Bereiche, in denen du benutzerdefinierten Code hinzugefügt hast, um ihn während der Fehlerbehebung vorübergehend zu entfernen.

Wenn du deinen Code deaktiviert hast, wird dir möglicherweise die Meldung Skripts in der Vorschau aktivieren?angezeigt. Wir raten davon ab, dies anzuklicken, da dies möglicherweise zu Problemen dabei führen kann, deine Website in der Vorschau anzuzeigen, zu bearbeiten oder zu betreiben, wenn du angemeldet bist. Es ist nicht möglich, diese Nachricht auszublenden, sie wird dir aber nur dann angezeigt, wenn du angemeldet bist – für Besucher ist sie nicht sichtbar.

Hinweis

Codebasierte Anpassungen fallen nicht in den Rahmen unserer Kundenbetreuung. Das bedeutet, dass wir keine weitere Unterstützung bei der Einrichtung oder Fehlerbehebung bieten können. Außerdem können wir bei einer codebasierten Lösung die Funktionalität oder vollständige Kompatibilität mit Squarespace nicht garantieren. Dies bezieht sich etwa auf die Funktionalität in Verbindung mit responsivem Design, insbesondere auf das Erscheinungsbild auf Mobilgeräten, und auf die Kompatibilität mit allen Templates. Zudem kann benutzerdefinierter Code im Anschluss an zukünftige Updates unserer Plattform zu Anzeigeproblemen führen. Wir können dir in diesem Fall nicht weiterhelfen, allerdings gibt es viele andere Informationsquellen, die dich hier unterstützen können:

Footer Image
  • Hol dir Hilfe von der Community

  • Hol dir Hilfe von unserer Community zu erweiterten individuellen Anpassungen.

  • Beauftrage einen Squarespace-Experten

  • Hebe dich online von der Masse ab, indem du dir von einem erfahrenen Webdesigner oder Entwickler helfen lässt.