# Cabin installieren
Beginnen Sie damit, den Domainnamen zu Ihrer [Domains](https://withcabin.com/settings/domains)-Seite hinzuzufügen. Folgen Sie dann den Anweisungen unten, um Cabin zu Ihrer Website hinzuzufügen.
## Grundinstallation
Platzieren Sie den folgenden Code vor Ihrem schließenden `</body>`-Tag.
```html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
WordPress
- Installieren Sie das Insert Headers and Footers Plugin.
- Gehen Sie zu Einstellungen > Insert Headers and Footers Menü.
- Fügen Sie den folgenden Code in die Footer scripts ein:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Klicken Sie auf Speichern.
Shopify
NOTE
Dies erfordert Zugriff auf Ihren Shopify-Theme-Code.
- Gehen Sie in Ihrem Shopify-Admin zu Online-Shop > Themes.
- Finden Sie das Theme, das Sie bearbeiten möchten, und klicken Sie auf Aktionen > Code bearbeiten.
- Klicken Sie im Layout-Verzeichnis auf
theme.liquid
. - Suchen Sie das schließende
</body>
-Tag und fügen Sie den folgenden Code direkt davor ein:html<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Klicken Sie auf Speichern.
WooCommerce
- Installieren und aktivieren Sie das Code Snippets Plugin.
- Gehen Sie zu Snippets > Neu hinzufügen.
- Geben Sie Ihrem Snippet einen Titel wie "Cabin Analytics".
- Fügen Sie den folgenden Code ein:php
function add_cabin_analytics() { echo '<script async defer src="https://scripts.withcabin.com/hello.js"></script>'; } add_action('wp_footer', 'add_cabin_analytics');
- Stellen Sie das Snippet so ein, dass es nur im "Frontend" ausgeführt wird.
- Klicken Sie auf Änderungen speichern und aktivieren.
Alternativ können Sie die obigen WordPress-Anweisungen mit dem Insert Headers and Footers Plugin befolgen.
Squarespace
NOTE
Nur verfügbar für Websites mit einem Squarespace Business- oder Commerce-Plan.
- Klicken Sie auf Einstellungen, dann auf Erweitert und anschließend auf Code-Einbindung
- Fügen Sie den folgenden Code zum Footer hinzu:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Klicken Sie oben auf der Seite auf Speichern.
Weitere Details bei Squarespace
Wix
NOTE
Nur verfügbar für Websites mit einem kostenpflichtigen WIX-Plan.
- Klicken Sie in Ihrem Website-Dashboard auf Einstellungen.
- Klicken Sie unter Erweiterte Einstellungen auf den Tab Tracking & Analytics.
- Klicken Sie auf + Neues Tool und wählen Sie Benutzerdefiniert aus dem Dropdown-Menü.
- Fügen Sie den folgenden Code ein:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Wählen Sie die relevante Domain aus. Hinweis: Diese Option erscheint nur, wenn Sie mehrere Domains haben.
- Geben Sie einen Namen für Ihren benutzerdefinierten Code ein. Z.B. Cabin Script
- Code zu Seiten hinzufügen: Wählen Sie Alle Seiten und Code einmal laden.
- Code platzieren in: Wählen Sie Body - Ende.
- Klicken Sie auf Anwenden.
Weitere Details auf WIX
Next.js
Erstellen oder bearbeiten Sie die Datei app/layout.js
(oder app/layout.tsx
) und importieren Sie das Script in Ihre RootLayout-Komponente:
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html lang="de">
<head>
<Script
src="https://scripts.withcabin.com/hello.js"
strategy="afterInteractive"
/>
</head>
<body>
{children}
</body>
</html>
)
}
Weitere Details zur Next.js Script-Komponente.
Ghost
- Gehen Sie zu Ihren Ghost Admin-Einstellungen.
- Klicken Sie im Seitenmenü auf Code-Einbindung.
- Fügen Sie den Tracking-Code unten in den Fußbereich ein:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Klicken Sie auf Speichern.
Weitere Details auf Ghost.
Webflow
NOTE
Nur verfügbar für kostenpflichtige Webflow-Konten.
- Gehen Sie zu Ihren Projekteinstellungen (Zahnradsymbol in der linken Seitenleiste).
- Wählen Sie Benutzerdefinierter Code in den Tabs.
- Fügen Sie den Tracking-Code unten in den Footer-Code-Bereich ein:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Klicken Sie auf Änderungen speichern.
- Klicken Sie auf Veröffentlichen, um Ihre Änderungen live zu schalten.
Weitere Details zum Webflow benutzerdefinierten Code.
Nuxt.js
Nuxt 3
- Erstellen oder bearbeiten Sie das Verzeichnis
plugins
in Ihrem Projekt - Erstellen Sie eine neue Datei
plugins/cabin.client.js
:jsexport default defineNuxtPlugin(() => { useHead({ script: [ { src: 'https://scripts.withcabin.com/hello.js', defer: true, async: true } ] }) })
Nuxt 2
- Bearbeiten Sie Ihre
nuxt.config.js
Datei - Fügen Sie das Script zum head-Bereich hinzu:js
export default { head: { script: [ { src: 'https://scripts.withcabin.com/hello.js', defer: true, async: true, body: true } ] } }
Weitere Details zum Nuxt.js Head-Management.
Svelte/SvelteKit
- Bearbeiten Sie Ihre
src/app.html
Datei - Fügen Sie das Script vor dem schließenden
</body>
-Tag ein:html<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> %sveltekit.head% </head> <body data-sveltekit-preload-data="hover"> <div style="display: contents">%sveltekit.body%</div> <script async defer src="https://scripts.withcabin.com/hello.js"></script> </body> </html>
Weitere Details zu SvelteKit app.html.
Gatsby
Installieren Sie die Gatsby Script API:
bashnpm install gatsby-script
Bearbeiten Sie Ihre Layout-Komponente (typischerweise in
src/components/layout.js
):jsximport React from "react" import { Script } from "gatsby" export default function Layout({ children }) { return ( <> {children} <Script src="https://scripts.withcabin.com/hello.js" strategy="postHydrate" async defer /> </> ) }
Weitere Details zur Gatsby Script API.
Hugo
- Erstellen oder bearbeiten Sie die Datei
layouts/partials/footer.html
in Ihrem Hugo-Projekt. - Fügen Sie den folgenden Code hinzu:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Stellen Sie sicher, dass dieses Partial im Hauptlayout Ihrer Website enthalten ist.
Alternativ können Sie es direkt zu layouts/_default/baseof.html
vor dem schließenden </body>
-Tag hinzufügen.
Weitere Details zu Hugo Templates.
Astro
- Bearbeiten Sie Ihre Hauptlayout-Datei (typischerweise in
src/layouts/Layout.astro
):
<html lang="de">
<head>
<!-- Ihr Head-Inhalt -->
</head>
<body>
<slot />
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
</body>
</html>
Weitere Details zu Astro Layouts.
Framer
NOTE
Dies erfordert einen kostenpflichtigen Framer-Plan, der die Einfügung von benutzerdefiniertem Code erlaubt.
- Öffnen Sie Ihr Framer-Projekt.
- Klicken Sie auf das Einstellungen-Symbol in der linken Seitenleiste.
- Wählen Sie den Tab Allgemein.
- Scrollen Sie nach unten zu Benutzerdefinierter Code.
- Fügen Sie den folgenden Code in den Bereich Vor dem
</body>
-Tag ein:html<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Klicken Sie auf Speichern.
Bubble
- Gehen Sie zum Dashboard Ihrer Bubble-App.
- Klicken Sie in der linken Seitenleiste auf Einstellungen.
- Navigieren Sie zum Tab SEO/Metatags.
- Scrollen Sie nach unten zu Erweiterte Einstellungen.
- Suchen Sie den Bereich Script im Body und fügen Sie den folgenden Code ein:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Klicken Sie auf Speichern.
Weitere Details zu Bubble's SEO/Metatags-Einstellungen.
Carrd
NOTE
Dies erfordert mindestens einen Carrd Pro Standard-Plan.
- Während Sie Ihre Carrd-Website bearbeiten, klicken Sie auf die Schaltfläche + (Element hinzufügen) in der oberen Leiste.
- Wählen Sie Einbetten.
- Setzen Sie Typ auf Code.
- Fügen Sie den folgenden Code ein:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- (Optional) Setzen Sie Label auf etwas Beschreibendes wie "Cabin Analytics".
- Für Stil wählen Sie Versteckt und wählen Sie Body Ende für die Platzierung.
- Klicken Sie auf Hinzufügen.
- Klicken Sie auf Veröffentlichen, um Ihre Änderungen live zu schalten.
Weitere Details zum Carrd Custom Code Embedding.
Webnode
NOTE
Dies erfordert einen Webnode Premium-Plan (für Projekte, die nach dem 26. Juni 2023 erstellt wurden).
- Positionieren Sie im Webnode-Editor Ihre Maus in einem Bereich, in dem Sie den Code hinzufügen möchten.
- Klicken Sie auf die Plus-Schaltfläche, um neuen Inhalt hinzuzufügen.
- Klicken Sie in der Inhaltsblase auf den Kreis für weitere Optionen und dann auf HTML.
- Fügen Sie den folgenden Code ein:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Beachten Sie, dass Sie das hinzugefügte HTML nur in der veröffentlichten Version Ihrer Website sehen können, nicht direkt im Editor.
- Klicken Sie auf Veröffentlichen, um Ihre Änderungen live zu schalten.
Weitere Details zur Webnode HTML-Code-Einfügung.
Google Tag Manager
WARNING
Obwohl diese Methode funktioniert, wird sie für datenschutzorientierte Analysen nicht empfohlen. Die Verwendung von Google Tag Manager sendet Daten an Google-Server, bevor Cabin geladen wird, was einige der Datenschutzvorteile von Cabin zunichte macht. Ziehen Sie wenn möglich die direkte Installation in Betracht.
- Melden Sie sich bei Ihrem Google Tag Manager Konto an.
- Wählen Sie Ihren Container aus.
- Klicken Sie in der linken Seitenleiste auf Tags.
- Klicken Sie auf Neu, um einen neuen Tag zu erstellen.
- Klicken Sie auf Tag-Konfiguration und wählen Sie Benutzerdefiniertes HTML.
- Fügen Sie den folgenden Code ein:html
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
- Klicken Sie auf Auslöser und wählen Sie einen Auslöser (typischerweise "Alle Seiten").
- Benennen Sie Ihren Tag (z.B. "Cabin Analytics") und klicken Sie auf Speichern.
- Klicken Sie auf Senden, um Ihre Änderungen zu veröffentlichen.
Weitere Details zum Google Tag Manager.
Wenn Sie weitere Hilfe bei der Installation von Cabin benötigen, kontaktieren Sie bitte hello@withcabin.com.