Du möchtest ein Tracking-Skript, eigenes CSS oder HTML in deinem Shop oder deinen Landingpages einbinden? Tentary bietet dir mehrere Möglichkeiten, eigenen Code einzufügen. Global für den gesamten Shop, pro Landingpage oder als sichtbares Element auf einer Landingpage. In diesem Artikel erfährst du, wie und wo du eigenen Code einfügen kannst.
Inhalt
- Voraussetzung: Eigene Domain
- Eigenen Code im Shop einfügen
- Eigenen Code in einer Landingpage einfügen
- Custom Code Element auf einer Landingpage verwenden
- Häufige Fragen
Voraussetzung: Eigene Domain
Aus Sicherheitsgründen kann eigener Code nur ausgeführt werden, wenn du eine eigene Domain verwendest. Wenn du eine kostenlose Tentary-Subdomain nutzt, kann dieses Feature nicht genutzt werden. Das gilt für den Shop-Code, den Landingpage-Code und das Custom-Code-Element gleichermaßen.
Eigenen Code im Shop einfügen
Mit der Code-Funktion im Shop kannst du JavaScript, CSS oder HTML auf allen Seiten deines Shops einfügen. Das ist ideal für Tracking-Skripte (beispielsweise Google Analytics, Matomo), Chat-Widgets oder eigene Styles.
- Öffne den Menüpunkt Online Shop > Code.
- Du siehst dort zwei Bereiche:
-
Header: Dieser Code wird am Ende des
<head>-Tags eingefügt. Hier gehören beispielsweise Tracking-Skripte, Meta-Tags oder CSS-Styles hin. -
Footer: Dieser Code wird am Ende des
<body>-Tags eingefügt. Hier kannst du unter anderem JavaScript-Skripte oder Chat-Widgets platzieren.
-
Header: Dieser Code wird am Ende des
- Füge deinen Code in das jeweilige Textfeld ein.
- Optional: Aktiviere die Checkbox Auch in alle Landingpages einfügen, wenn der Code auch auf deinen Landingpages geladen werden soll.
- Klicke auf Speichern.
Eigenen Code in einer Landingpage einfügen
Zusätzlich zum globalen Shop-Code kannst du auch auf jeder einzelnen Landingpage eigenen Code im Header und Footer einfügen. Das ist nützlich, wenn du Code nur auf einer bestimmten Seite brauchst, wie beim Conversion-Tracking-Pixel.
- Gehe zu Landingpages und öffne die gewünschte Landingpage im Editor.
- Klicke auf den Reiter Einstellungen.
- Scrolle zum Bereich Eigener Code.
- Du siehst die gleichen zwei Felder wie im Shop:
-
Header: wird am Ende des
<head>-Tags eingefügt -
Footer: wird am Ende des
<body>-Tags eingefügt
-
Header: wird am Ende des
- Füge deinen Code ein und speichere die Landingpage.
Custom Code Element auf einer Landingpage verwenden
Im Landingpage-Builder gibt es außerdem das Element Custom Code. Im Gegensatz zum Header/Footer-Code wird dieses Element direkt auf der Seite an der gewünschten Stelle angezeigt. Das eignet sich daher für eingebettete Widgets, Formulare von Drittanbietern oder eigene HTML-Blöcke.
- Öffne die Landingpage im Editor.
- Klicke auf + Element hinzufügen
- Wähle das Element Eigener Code in der Kategorie Spezial aus.
- Klicke auf das Element, um die Einstellungen zu öffnen.
- Gib deinen Code im Feld HTML Code ein. Du kannst HTML, CSS und JavaScript kombinieren.
- Speichere die Landingpage. Der Code wird im Editor nicht ausgeführt, sondern erst auf der veröffentlichten Seite.
Häufige Fragen
Welche Code-Typen kann ich einfügen?
Du kannst JavaScript (in <script>-Tags), CSS (in <style>-Tags) und HTML einfügen.
Gibt es eine Größenbeschränkung?
Ja, pro Feld sind maximal 30 KB erlaubt.
Kann fehlerhafter Code meinen Shop beschädigen?
Eigener Code wird nicht validiert. Fehlerhafter Code kann dazu führen, dass dein Shop oder dein Checkout nicht mehr richtig funktionieren. Teste Änderungen am besten zuerst auf einer Landingpage, bevor du den Code global im Shop einfügst.
Was ist der Unterschied zwischen dem Shop-Code und dem Landingpage-Code?
Der Shop-Code unter Online Shop > Code gilt für alle Seiten deines Shops. Wenn du die Checkbox Auch in alle Landingpages einfügen aktivierst, wird er zusätzlich in alle Landingpages eingefügt. Der Code in den Landingpage-Einstellungen gilt nur für die jeweilige Seite.
Wann brauche ich das Custom Code Element statt Header/Footer-Code?
Verwende das Element, wenn der Code etwas Sichtbares auf der Seite darstellen soll, wie ein eingebettetes Formular oder ein Widget. Für unsichtbare Skripte wie Tracking oder Analytics ist der Header- oder Footer-Code besser geeignet.
Wird der Code im Editor angezeigt?
Nein. Eigener Code wird weder im Editor noch in der Vorschau ausgeführt. Du siehst das Ergebnis erst auf der veröffentlichten Seite.
