🇩🇪 Deutsch

🇬🇧 English
🇫🇷 Français

🇩🇪 Deutsch

🇬🇧 English
🇫🇷 Français

Appearance

markdown:src/de/install.md
# 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 ​

  1. Installieren Sie das Insert Headers and Footers Plugin.
  2. Gehen Sie zu Einstellungen > Insert Headers and Footers Menü.
  3. Fügen Sie den folgenden Code in die Footer scripts ein:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  4. Klicken Sie auf Speichern.

Shopify ​

NOTE

Dies erfordert Zugriff auf Ihren Shopify-Theme-Code.

  1. Gehen Sie in Ihrem Shopify-Admin zu Online-Shop > Themes.
  2. Finden Sie das Theme, das Sie bearbeiten möchten, und klicken Sie auf Aktionen > Code bearbeiten.
  3. Klicken Sie im Layout-Verzeichnis auf theme.liquid.
  4. 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>
  5. Klicken Sie auf Speichern.

WooCommerce ​

  1. Installieren und aktivieren Sie das Code Snippets Plugin.
  2. Gehen Sie zu Snippets > Neu hinzufügen.
  3. Geben Sie Ihrem Snippet einen Titel wie "Cabin Analytics".
  4. 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');
  5. Stellen Sie das Snippet so ein, dass es nur im "Frontend" ausgeführt wird.
  6. 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.

  1. Klicken Sie auf Einstellungen, dann auf Erweitert und anschließend auf Code-Einbindung
  2. Fügen Sie den folgenden Code zum Footer hinzu:
    html
     <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  3. 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.

  1. Klicken Sie in Ihrem Website-Dashboard auf Einstellungen.
  2. Klicken Sie unter Erweiterte Einstellungen auf den Tab Tracking & Analytics.
  3. Klicken Sie auf + Neues Tool und wählen Sie Benutzerdefiniert aus dem Dropdown-Menü.
  4. Fügen Sie den folgenden Code ein:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  5. Wählen Sie die relevante Domain aus. Hinweis: Diese Option erscheint nur, wenn Sie mehrere Domains haben.
  6. Geben Sie einen Namen für Ihren benutzerdefinierten Code ein. Z.B. Cabin Script
  7. Code zu Seiten hinzufügen: Wählen Sie Alle Seiten und Code einmal laden.
  8. Code platzieren in: Wählen Sie Body - Ende.
  9. 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:

jsx
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 ​

  1. Gehen Sie zu Ihren Ghost Admin-Einstellungen.
  2. Klicken Sie im Seitenmenü auf Code-Einbindung.
  3. Fügen Sie den Tracking-Code unten in den Fußbereich ein:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  4. Klicken Sie auf Speichern.

Weitere Details auf Ghost.

Webflow ​

NOTE

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

  1. Gehen Sie zu Ihren Projekteinstellungen (Zahnradsymbol in der linken Seitenleiste).
  2. Wählen Sie Benutzerdefinierter Code in den Tabs.
  3. 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>
  4. Klicken Sie auf Änderungen speichern.
  5. Klicken Sie auf Veröffentlichen, um Ihre Änderungen live zu schalten.

Weitere Details zum Webflow benutzerdefinierten Code.

Nuxt.js ​

Nuxt 3 ​

  1. Erstellen oder bearbeiten Sie das Verzeichnis plugins in Ihrem Projekt
  2. Erstellen Sie eine neue Datei plugins/cabin.client.js:
    js
    export default defineNuxtPlugin(() => {
  useHead({
    script: [
      {
        src: 'https://scripts.withcabin.com/hello.js',
        defer: true,
        async: true
      }
    ]
  })
})

Nuxt 2 ​

  1. Bearbeiten Sie Ihre nuxt.config.js Datei
  2. 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 ​

  1. Bearbeiten Sie Ihre src/app.html Datei
  2. 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 ​

  1. Installieren Sie die Gatsby Script API:

    bash
    npm install gatsby-script

  2. Bearbeiten Sie Ihre Layout-Komponente (typischerweise in 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
      />
    </>
  )
}

Weitere Details zur Gatsby Script API.

Hugo ​

  1. Erstellen oder bearbeiten Sie die Datei layouts/partials/footer.html in Ihrem Hugo-Projekt.
  2. Fügen Sie den folgenden Code hinzu:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  3. 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 ​

  1. Bearbeiten Sie Ihre Hauptlayout-Datei (typischerweise in src/layouts/Layout.astro):
html
<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.

  1. Öffnen Sie Ihr Framer-Projekt.
  2. Klicken Sie auf das Einstellungen-Symbol in der linken Seitenleiste.
  3. Wählen Sie den Tab Allgemein.
  4. Scrollen Sie nach unten zu Benutzerdefinierter Code.
  5. 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>
  6. Klicken Sie auf Speichern.

Bubble ​

  1. Gehen Sie zum Dashboard Ihrer Bubble-App.
  2. Klicken Sie in der linken Seitenleiste auf Einstellungen.
  3. Navigieren Sie zum Tab SEO/Metatags.
  4. Scrollen Sie nach unten zu Erweiterte Einstellungen.
  5. 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>
  6. Klicken Sie auf Speichern.

Weitere Details zu Bubble's SEO/Metatags-Einstellungen.

Carrd ​

NOTE

Dies erfordert mindestens einen Carrd Pro Standard-Plan.

  1. Während Sie Ihre Carrd-Website bearbeiten, klicken Sie auf die Schaltfläche + (Element hinzufügen) in der oberen Leiste.
  2. Wählen Sie Einbetten.
  3. Setzen Sie Typ auf Code.
  4. Fügen Sie den folgenden Code ein:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  5. (Optional) Setzen Sie Label auf etwas Beschreibendes wie "Cabin Analytics".
  6. Für Stil wählen Sie Versteckt und wählen Sie Body Ende für die Platzierung.
  7. Klicken Sie auf Hinzufügen.
  8. 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).

  1. Positionieren Sie im Webnode-Editor Ihre Maus in einem Bereich, in dem Sie den Code hinzufügen möchten.
  2. Klicken Sie auf die Plus-Schaltfläche, um neuen Inhalt hinzuzufügen.
  3. Klicken Sie in der Inhaltsblase auf den Kreis für weitere Optionen und dann auf HTML.
  4. Fügen Sie den folgenden Code ein:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  5. Beachten Sie, dass Sie das hinzugefügte HTML nur in der veröffentlichten Version Ihrer Website sehen können, nicht direkt im Editor.
  6. 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.

  1. Melden Sie sich bei Ihrem Google Tag Manager Konto an.
  2. Wählen Sie Ihren Container aus.
  3. Klicken Sie in der linken Seitenleiste auf Tags.
  4. Klicken Sie auf Neu, um einen neuen Tag zu erstellen.
  5. Klicken Sie auf Tag-Konfiguration und wählen Sie Benutzerdefiniertes HTML.
  6. Fügen Sie den folgenden Code ein:
    html
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
  7. Klicken Sie auf Auslöser und wählen Sie einen Auslöser (typischerweise "Alle Seiten").
  8. Benennen Sie Ihren Tag (z.B. "Cabin Analytics") und klicken Sie auf Speichern.
  9. 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.

Released under the MIT License.

Copyright © 2020-2025 Cabin