Installer Cabin

Commencez par ajouter votre domaine sur la page Domains (domaines). Suivez ensuite les instructions ci-dessous pour ajouter Cabin à votre site.

Le script est le même partout : une ligne, 2 KB, aucune configuration. Une fois en ligne, les visites apparaissent dans votre tableau de bord en quelques secondes.

Il est aussi open source. Vous pouvez lire exactement ce qui s'exécute dans le navigateur de vos visiteurs sur github.com/withcabin/hello.js, et le fichier compilé de ce dépôt est identique, octet pour octet, à celui que sert le CDN. Vous n'avez donc rien à croire sur parole.

Installation de base

Placez le code suivant juste avant la balise de fermeture </body>.

html

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

WordPress

Installez l'extension Insert Headers and Footers.
Allez dans le menu Settings > Insert Headers and Footers.

Collez le code ci-dessous dans Footer scripts :

html

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

Cliquez sur Save.

Shopify

NOTE

Vous devez avoir accès au code de votre thème Shopify.

Dans l'administration Shopify, allez dans Online Store > Themes.
Trouvez le thème à modifier et cliquez sur Actions > Edit code.
Dans le dossier Layout, cliquez sur theme.liquid.
Repérez la balise de fermeture </body> et collez le code suivant juste avant :
html
```
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
```
Cliquez sur Save.

WooCommerce

Installez et activez l'extension Code Snippets.
Allez dans Snippets > Add New.
Donnez un titre à votre extrait, par exemple « Cabin Analytics ».

Collez le code suivant :

php

function add_cabin_analytics() {
    echo '<script async defer src="https://scripts.withcabin.com/hello.js"></script>';
}
add_action('wp_footer', 'add_cabin_analytics');

Réglez l'extrait pour qu'il s'exécute uniquement sur le « Frontend ».
Cliquez sur Save Changes and Activate.

Vous pouvez aussi suivre les instructions WordPress ci-dessus avec l'extension Insert Headers and Footers.

Squarespace

NOTE

Disponible uniquement avec les offres Business ou Commerce de Squarespace.

Cliquez sur Settings, puis sur Advanced, puis sur Code Injection

Ajoutez le code suivant dans Footer :

html

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

Cliquez sur Save en haut de la page.

Plus de détails sur Squarespace

Wix

NOTE

Disponible uniquement avec une offre Wix payante.

Cliquez sur Settings dans le tableau de bord de votre site.
Cliquez sur l'onglet Tracking & Analytics sous Advanced Settings.
Cliquez sur + New Tool et choisissez Custom dans la liste déroulante.

Collez le code ci-dessous :

html

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

Sélectionnez le domaine concerné. Remarque : cette option n'apparaît que si vous avez plusieurs domaines.
Donnez un nom à votre code personnalisé, par exemple Cabin Script
Add Code to Pages : choisissez All Pages et Load code once.
Place Code in : choisissez Body - end.
Cliquez sur Apply.

Plus de détails sur Wix

Next.js

Créez ou modifiez le fichier app/layout.js (ou app/layout.tsx) et importez le script dans votre composant RootLayout :

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

Plus de détails sur le composant Script de Next.js.

Ghost

Ouvrez vos Ghost Admin settings.
Cliquez sur Code Injection dans le menu latéral.

Collez le code de suivi ci-dessous dans la section Foot :

html

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

Cliquez sur Save.

Plus de détails sur Ghost.

Webflow

NOTE

Disponible uniquement pour les comptes Webflow payants.

Ouvrez vos Project settings (icône d'engrenage dans la barre latérale gauche).
Sélectionnez Custom code dans le menu des onglets.

Collez le code de suivi ci-dessous dans la section Footer Code :

html

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

Cliquez sur Save Changes.
Cliquez sur Publish pour mettre vos modifications en ligne.

Plus de détails sur le code personnalisé Webflow.

Nuxt

Modifiez votre fichier nuxt.config.js

Ajoutez le script dans app.head :

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

Plus de détails sur la gestion du head dans Nuxt.

Svelte/SvelteKit

Modifiez votre fichier src/app.html

Ajoutez le script avant la balise de fermeture </body> :

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>

Plus de détails sur app.html dans SvelteKit.

Gatsby

Installez l'API Script de Gatsby :
bash
```
npm install gatsby-script
```

Modifiez votre composant de mise en page (en général dans 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
      />
    </>
  )
}

Plus de détails sur l'API Script de Gatsby.

Hugo

Créez ou modifiez le fichier layouts/partials/footer.html de votre projet Hugo.

Ajoutez le code suivant :

html

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

Vérifiez que ce partial est bien inclus dans la mise en page principale de votre site.

Vous pouvez aussi l'ajouter directement dans layouts/_default/baseof.html, avant la balise de fermeture </body>.

Plus de détails sur les templates Hugo.

Astro

Modifiez votre fichier de mise en page principal (en général src/layouts/Layout.astro) :

html

<html lang="en">
    <head>
    <!-- Le contenu de votre head -->
    </head>
    <body>
    <slot />
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
    </body>
</html>

Plus de détails sur les layouts Astro.

Framer

NOTE

Nécessite une offre Framer payante qui autorise l'ajout de code personnalisé.

Ouvrez votre projet Framer.
Cliquez sur l'icône Settings dans la barre latérale gauche.
Sélectionnez l'onglet General.
Faites défiler jusqu'à Custom Code.

Collez le code suivant dans la section Before </body> tag :

html

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

Cliquez sur Save.

Bubble

Ouvrez le tableau de bord de votre application Bubble.
Cliquez sur Settings dans la barre latérale gauche.
Allez dans l'onglet SEO/metatags.
Faites défiler jusqu'à Advanced settings.

Repérez la section Script in the body et collez le code suivant :

html

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

Cliquez sur Save.

Plus de détails sur les paramètres SEO/metatags de Bubble.

Carrd

NOTE

Nécessite une offre Carrd Pro Standard ou supérieure.

Pendant que vous modifiez votre site Carrd, cliquez sur le bouton + (Add Element) dans la barre du haut.
Sélectionnez Embed.
Réglez Type sur Code.

Collez le code suivant :

html

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

(Facultatif) Donnez à Label un nom parlant, comme « Cabin Analytics ».
Pour Style, choisissez Hidden, puis Body End pour l'emplacement.
Cliquez sur Add.
Cliquez sur Publish pour mettre vos modifications en ligne.

Plus de détails sur l'intégration de code personnalisé dans Carrd.

Webnode

NOTE

Nécessite une offre Webnode Premium (pour les projets créés après le 26 juin 2023).

Dans l'éditeur Webnode, placez votre souris dans la section où vous voulez ajouter le code.
Cliquez sur le bouton plus pour ajouter du contenu.
Dans la bulle de contenu, cliquez sur le cercle pour afficher plus d'options, puis sur HTML.

Collez le code suivant :

html

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

Le HTML ajouté n'est visible que sur la version publiée de votre site, pas directement dans l'éditeur.
Cliquez sur Publish pour mettre vos modifications en ligne.

Plus de détails sur l'ajout de code HTML dans Webnode.

Google Tag Manager

WARNING

Cette méthode fonctionne, mais nous la déconseillons pour une solution d'analyse respectueuse de la vie privée. Avec Google Tag Manager, des données partent vers les serveurs de Google avant le chargement de Cabin, ce qui annule une partie des avantages de Cabin en matière de confidentialité. Privilégiez l'installation directe quand c'est possible.

Connectez-vous à votre compte Google Tag Manager.
Sélectionnez votre conteneur.
Cliquez sur Tags dans la barre latérale gauche.
Cliquez sur New pour créer une nouvelle balise.
Cliquez sur Tag Configuration et choisissez Custom HTML.

Collez le code suivant :

html

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

Cliquez sur Triggering et choisissez un déclencheur (en général « All Pages »).
Nommez votre balise (par exemple « Cabin Analytics ») et cliquez sur Save.
Cliquez sur Submit pour publier vos modifications.

Plus de détails sur Google Tag Manager.

Vérifier que tout fonctionne

Ouvrez votre site, puis votre tableau de bord Cabin : votre propre visite doit apparaître tout de suite. Si rien ne s'affiche, vérifiez que la balise script figure bien dans la version publiée de la page (affichez le code source et cherchez hello.js), et qu'un bloqueur de publicités ne la bloque pas. Les domaines personnalisés règlent ce problème pour de bon.

Vous pouvez aussi demander à un assistant IA de vérifier pour vous avec MCP : « Cabin est-il correctement installé sur example.com ? »

Si vous avez besoin d'aide pour installer Cabin, écrivez-nous à hello@withcabin.com.

Installer Cabin ​

Installation de base ​

WordPress ​

Shopify ​

WooCommerce ​

Squarespace ​

Wix ​

Next.js ​

Ghost ​

Webflow ​

Nuxt ​

Svelte/SvelteKit ​

Gatsby ​

Hugo ​

Astro ​

Framer ​

Bubble ​

Carrd ​

Webnode ​

Google Tag Manager ​

Vérifier que tout fonctionne ​

Installer Cabin

Installation de base

WordPress

Shopify

WooCommerce

Squarespace

Wix

Next.js

Ghost

Webflow

Nuxt

Svelte/SvelteKit

Gatsby

Hugo

Astro

Framer

Bubble

Carrd

Webnode

Google Tag Manager

Vérifier que tout fonctionne