Cabin installieren

Fügen Sie zuerst Ihre Domain auf der Seite Domains hinzu. Folgen Sie dann der Anleitung unten, um Cabin auf Ihrer Website einzubinden.

Das Skript ist überall dasselbe: eine Zeile, 2 KB, keine Konfiguration. Sobald es live ist, erscheinen Besuche innerhalb weniger Sekunden in Ihrem Dashboard.

Es ist außerdem Open Source. Unter github.com/withcabin/hello.js können Sie genau nachlesen, was im Browser Ihrer Besucher läuft. Die gebaute Datei in diesem Repository ist Byte für Byte die, die das CDN ausliefert. Sie müssen uns also nichts einfach glauben.

Grundinstallation

Fügen Sie den folgenden Code vor dem schließenden </body>-Tag ein.

html

<script async defer src="https://scripts.withcabin.com/hello.js"></script>

WordPress

Installieren Sie das Plugin Insert Headers and Footers.
Öffnen Sie das Menü Settings > Insert Headers and Footers.

Fügen Sie den folgenden Code unter Footer scripts ein:

html

<script async defer src="https://scripts.withcabin.com/hello.js"></script>

Klicken Sie auf Save.

Shopify

NOTE

Dafür brauchen Sie Zugriff auf den Code Ihres Shopify-Themes.

Gehen Sie in Ihrem Shopify-Admin zu Online Store > Themes.
Suchen Sie das Theme, das Sie bearbeiten möchten, und klicken Sie auf Actions > Edit code.
Klicken Sie im Verzeichnis Layout auf theme.liquid.
Suchen Sie das schließende </body>-Tag und fügen Sie direkt davor den folgenden Code ein:
html
```
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
```
Klicken Sie auf Save.

WooCommerce

Installieren und aktivieren Sie das Plugin Code Snippets.
Gehen Sie zu Snippets > Add New.
Geben Sie Ihrem Snippet einen Titel, zum Beispiel „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“ läuft.
Klicken Sie auf Save Changes and Activate.

Alternativ können Sie auch der WordPress-Anleitung oben mit dem Plugin Insert Headers and Footers folgen.

Squarespace

NOTE

Nur in den Squarespace-Tarifen Business und Commerce verfügbar.

Klicken Sie auf Settings, dann auf Advanced und dann auf Code Injection

Fügen Sie den folgenden Code im Bereich Footer ein:

html

 <script async defer src="https://scripts.withcabin.com/hello.js"></script>

Klicken Sie oben auf der Seite auf Save.

Mehr dazu bei Squarespace

Wix

NOTE

Nur mit einem kostenpflichtigen Wix-Tarif verfügbar.

Klicken Sie im Dashboard Ihrer Website auf Settings.
Klicken Sie unter Advanced Settings auf den Tab Tracking & Analytics.
Klicken Sie auf + New Tool und wählen Sie im Dropdown Custom.

Fügen Sie den folgenden Code ein:

html

<script async defer src="https://scripts.withcabin.com/hello.js"></script>

Wählen Sie die passende Domain aus. Hinweis: Diese Option erscheint nur, wenn Sie mehrere Domains haben.
Geben Sie einen Namen für Ihren Code ein, z. B. Cabin Script
Add Code to Pages: Wählen Sie All Pages und Load code once.
Place Code in: Wählen Sie Body - end.
Klicken Sie auf Apply.

Mehr dazu bei Wix

Next.js

Legen Sie die Datei app/layout.js (oder app/layout.tsx) an oder bearbeiten Sie sie, und binden Sie das Skript in Ihrer RootLayout-Komponente ein:

jsx

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <Script
          src="https://scripts.withcabin.com/hello.js"
          strategy="afterInteractive"
        />
      </head>
      <body>
        {children}
      </body>
    </html>
  )
}

Mehr dazu in der Dokumentation zur Next.js-Script-Komponente.

Ghost

Öffnen Sie Ihre Ghost Admin settings.
Klicken Sie im Seitenmenü auf Code Injection.

Fügen Sie den folgenden Tracking-Code im Bereich Foot ein:

html

<script async defer src="https://scripts.withcabin.com/hello.js"></script>

Klicken Sie auf Save.

Mehr dazu bei Ghost.

Webflow

NOTE

Nur für kostenpflichtige Webflow-Konten verfügbar.

Öffnen Sie Ihre Project settings (Zahnradsymbol in der linken Seitenleiste).
Wählen Sie im Tab-Menü Custom code.

Fügen Sie den folgenden Tracking-Code im Bereich Footer Code ein:

html

<script async defer src="https://scripts.withcabin.com/hello.js"></script>

Klicken Sie auf Save Changes.
Klicken Sie auf Publish, damit Ihre Änderungen live gehen.

Mehr dazu in der Webflow-Hilfe zu Custom code.

Nuxt

Öffnen Sie Ihre Datei nuxt.config.js

Fügen Sie das Skript unter app.head hinzu:

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://scripts.withcabin.com/hello.js',
          defer: true,
          async: true
        }
      ]
    }
  }
})

Mehr dazu in der Nuxt-Dokumentation zum Head-Management.

Svelte/SvelteKit

Öffnen Sie Ihre Datei src/app.html

Fügen Sie das Skript vor dem schließenden </body>-Tag ein:

html

<!DOCTYPE html>
<html lang="en">
  <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>

Mehr dazu in der SvelteKit-Dokumentation zu app.html.

Gatsby

Installieren Sie die Gatsby Script API:
bash
```
npm install gatsby-script
```

Bearbeiten Sie Ihre Layout-Komponente (meist unter src/components/layout.js):

jsx

import 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
      />
    </>
  )
}

Mehr dazu in der Dokumentation zur Gatsby Script API.

Hugo

Legen Sie in Ihrem Hugo-Projekt die Datei layouts/partials/footer.html an oder bearbeiten Sie sie.

Fügen Sie den folgenden Code ein:

html

<script async defer src="https://scripts.withcabin.com/hello.js"></script>

Achten Sie darauf, dass dieses Partial im Hauptlayout Ihrer Website eingebunden ist.

Alternativ können Sie den Code auch direkt in layouts/_default/baseof.html vor dem schließenden </body>-Tag einfügen.

Mehr dazu in der Dokumentation zu Hugo-Templates.

Astro

Bearbeiten Sie Ihre Haupt-Layout-Datei (meist unter src/layouts/Layout.astro):

html

<html lang="en">
    <head>
    <!-- Ihr Head-Inhalt -->
    </head>
    <body>
    <slot />
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
    </body>
</html>

Mehr dazu in der Dokumentation zu Astro-Layouts.

Framer

NOTE

Dafür brauchen Sie einen kostenpflichtigen Framer-Tarif, der eigenen Code erlaubt.

Öffnen Sie Ihr Framer-Projekt.
Klicken Sie in der linken Seitenleiste auf das Symbol Settings.
Wählen Sie den Tab General.
Scrollen Sie nach unten zu Custom Code.

Fügen Sie den folgenden Code im Bereich Before </body> tag ein:

html

<script async defer src="https://scripts.withcabin.com/hello.js"></script>

Klicken Sie auf Save.

Bubble

Öffnen Sie das Dashboard Ihrer Bubble-App.
Klicken Sie in der linken Seitenleiste auf Settings.
Wechseln Sie zum Tab SEO/metatags.
Scrollen Sie nach unten zu Advanced settings.
Suchen Sie den Bereich Script in the body und fügen Sie den folgenden Code ein:
html
```
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
```
Klicken Sie auf Save.

Mehr dazu in der Bubble-Dokumentation zu den SEO/metatags-Einstellungen.

Carrd

NOTE

Dafür brauchen Sie mindestens den Tarif Carrd Pro Standard.

Klicken Sie beim Bearbeiten Ihrer Carrd-Website in der oberen Leiste auf die Schaltfläche + (Add Element).
Wählen Sie Embed.
Setzen Sie Type 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 Aussagekräftiges wie „Cabin Analytics“.
Wählen Sie bei Style die Option Hidden und als Platzierung Body End.
Klicken Sie auf Add.
Klicken Sie auf Publish, damit Ihre Änderungen live gehen.

Mehr dazu in der Carrd-Dokumentation zum Einbetten von eigenem Code.

Webnode

NOTE

Dafür brauchen Sie einen Webnode-Premium-Tarif (für Projekte, die nach dem 26. Juni 2023 erstellt wurden).

Fahren Sie im Webnode-Editor mit der Maus in den Bereich, in dem Sie den Code einfü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 eingefügte HTML nur in der veröffentlichten Version Ihrer Website sehen, nicht direkt im Editor.
Klicken Sie auf Publish, damit Ihre Änderungen live gehen.

Mehr dazu in der Webnode-Hilfe zum Einfügen von HTML-Code.

Google Tag Manager

WARNING

Diese Methode funktioniert, ist für datenschutzfreundliche Analytics aber nicht zu empfehlen. Mit dem Google Tag Manager gehen Daten an Google-Server, bevor Cabin überhaupt geladen wird. Damit geht ein Teil der Datenschutzvorteile von Cabin verloren. Binden Sie Cabin nach Möglichkeit direkt ein.

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 New, um ein neues Tag anzulegen.
Klicken Sie auf Tag Configuration und wählen Sie Custom HTML.

Fügen Sie den folgenden Code ein:

html

<script async defer src="https://scripts.withcabin.com/hello.js"></script>

Klicken Sie auf Triggering und wählen Sie einen Trigger (meist „All Pages“).
Geben Sie Ihrem Tag einen Namen (z. B. „Cabin Analytics“) und klicken Sie auf Save.
Klicken Sie auf Submit, um Ihre Änderungen zu veröffentlichen.

Mehr dazu in der Hilfe zum Google Tag Manager.

Prüfen, ob es funktioniert

Öffnen Sie Ihre Website und dann Ihr Cabin-Dashboard: Ihr eigener Besuch sollte sofort erscheinen. Wenn nichts auftaucht, prüfen Sie, ob das Script-Tag in der veröffentlichten Version der Seite steht (Quelltext anzeigen und nach hello.js suchen) und ob ein Werbeblocker es blockiert. Mit einer eigenen Domain lösen Sie das dauerhaft.

Sie können auch einen KI-Assistenten per MCP prüfen lassen: „Ist Cabin auf example.com richtig installiert?“

Wenn Sie weitere Hilfe bei der Installation brauchen, schreiben Sie an hello@withcabin.com.

Cabin installieren ​

Grundinstallation ​

WordPress ​

Shopify ​

WooCommerce ​

Squarespace ​

Wix ​

Next.js ​

Ghost ​

Webflow ​

Nuxt ​

Svelte/SvelteKit ​

Gatsby ​

Hugo ​

Astro ​

Framer ​

Bubble ​

Carrd ​

Webnode ​

Google Tag Manager ​

Prüfen, ob es funktioniert ​

Cabin installieren

Grundinstallation

WordPress

Shopify

WooCommerce

Squarespace

Wix

Next.js

Ghost

Webflow

Nuxt

Svelte/SvelteKit

Gatsby

Hugo

Astro

Framer

Bubble

Carrd

Webnode

Google Tag Manager

Prüfen, ob es funktioniert