Installation de Cabin

Commencez par ajouter votre nom de domaine à votre page Domaines. Puis suivez les instructions ci-dessous pour ajouter Cabin à votre site web.

Installation de base

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

html

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

WordPress

Installez le plugin Insert Headers and Footers.
Allez dans Réglages > Insert Headers and Footers.

Collez le code ci-dessous dans la section Footer scripts :

html

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

Cliquez sur Enregistrer.

Shopify

NOTE

Ceci nécessite un accès au code de votre thème Shopify.

Depuis votre administration Shopify, allez dans Boutique en ligne > Thèmes.
Trouvez le thème que vous souhaitez modifier et cliquez sur Actions > Modifier le code.
Dans le répertoire Layout, cliquez sur theme.liquid.
Trouvez 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 Enregistrer.

WooCommerce

Installez et activez le plugin Code Snippets.
Allez dans Snippets > Ajouter un nouveau.
Donnez à votre extrait de code un titre comme "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');

Configurez l'extrait pour qu'il s'exécute uniquement sur le "Frontend".
Cliquez sur Enregistrer les modifications et activer.

Alternativement, vous pouvez suivre les instructions WordPress ci-dessus en utilisant le plugin Insert Headers and Footers.

Squarespace

NOTE

Disponible uniquement pour les sites avec un forfait Squarespace Business ou Commerce.

Cliquez sur Paramètres, puis sur Avancé et enfin sur Injection de code

Ajoutez le code suivant au Pied de page :

html

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

Cliquez sur Enregistrer en haut de la page.

Plus de détails sur Squarespace

Wix

NOTE

Disponible uniquement pour les sites avec un forfait WIX payant.

Cliquez sur Paramètres dans le tableau de bord de votre site.
Cliquez sur l'onglet Suivi et analyse sous Paramètres avancés.
Cliquez sur + Nouvel outil et sélectionnez Personnalisé dans le menu déroulant.

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îtra que si vous avez plusieurs domaines.
Entrez un nom pour votre code personnalisé. Par exemple, Script Cabin
Ajouter le code aux pages : Choisissez Toutes les pages et Charger le code une fois.
Placer le code dans : Choisissez Body - fin.
Cliquez sur Appliquer.

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="fr">
      <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

Accédez aux paramètres de votre administration Ghost.
Cliquez sur Injection de code dans le menu latéral.

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

html

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

Cliquez sur Enregistrer.

Plus de détails sur Ghost.

Webflow

NOTE

Disponible uniquement pour les comptes Webflow payants.

Accédez aux Paramètres du projet (icône d'engrenage dans la barre latérale gauche).
Sélectionnez Code personnalisé dans le menu des onglets.

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

html

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

Cliquez sur Enregistrer les modifications.
Cliquez sur Publier pour rendre vos modifications actives.

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

Nuxt.js

Nuxt 3

Créez ou modifiez le répertoire plugins dans votre projet

Créez un nouveau fichier plugins/cabin.client.js :

export default defineNuxtPlugin(() => {
  useHead({
    script: [
      {
        src: 'https://scripts.withcabin.com/hello.js',
        defer: true,
        async: true
      }
    ]
  })
})

Nuxt 2

Modifiez votre fichier nuxt.config.js

Ajoutez le script à la section head :

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

Plus de détails sur la gestion des en-têtes Nuxt.js.

Svelte/SvelteKit

Modifiez votre fichier src/app.html

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

html

<!DOCTYPE html>
<html lang="fr">
  <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 SvelteKit app.html.

Gatsby

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

Modifiez votre composant de mise en page (généralement 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 dans votre projet Hugo.

Ajoutez le code suivant :

html

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

Assurez-vous que ce partiel est inclus dans la mise en page principale de votre site.

Alternativement, vous pouvez l'ajouter directement à layouts/_default/baseof.html avant la balise de fermeture </body>.

Plus de détails sur les modèles Hugo.

Astro

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

html

<html lang="fr">
    <head>
    <!-- Votre contenu d'en-tête -->
    </head>
    <body>
    <slot />
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
    </body>
</html>

Plus de détails sur les mises en page Astro.

Framer

NOTE

Ceci nécessite un forfait Framer payant qui permet l'insertion de code personnalisé.

Ouvrez votre projet Framer.
Cliquez sur l'icône Paramètres dans la barre latérale gauche.
Sélectionnez l'onglet Général.
Faites défiler jusqu'à Code personnalisé.

Collez le code suivant dans la section Avant la balise </body> :

html

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

Cliquez sur Enregistrer.

Bubble

Accédez au tableau de bord de votre application Bubble.
Cliquez sur Paramètres dans la barre latérale gauche.
Naviguez vers l'onglet SEO/metatags.
Faites défiler jusqu'à Paramètres avancés.

Trouvez la section Script dans le body et collez le code suivant :

html

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

Cliquez sur Enregistrer.

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

Carrd

NOTE

Ceci nécessite un forfait Carrd Pro Standard ou supérieur.

Lors de l'édition de votre site Carrd, cliquez sur le bouton + (Ajouter un élément) dans la barre supérieure.
Sélectionnez Intégrer.
Définissez Type sur Code.

Collez le code suivant :

html

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

(Facultatif) Définissez Étiquette sur quelque chose de descriptif comme "Cabin Analytics".
Pour Style, sélectionnez Masqué et choisissez Fin du body pour l'emplacement.
Cliquez sur Ajouter.
Cliquez sur Publier pour rendre vos modifications actives.

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

Webnode

NOTE

Ceci nécessite un forfait Webnode Premium (pour les projets créés après le 26 juin 2023).

Dans votre éditeur Webnode, positionnez votre souris dans une section où vous souhaitez ajouter le code.
Cliquez sur le bouton plus pour ajouter un nouveau contenu.
Dans la bulle de contenu, cliquez sur le cercle pour plus d'options, puis cliquez sur HTML.

Collez le code suivant :

html

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

Notez que vous ne pourrez voir le HTML ajouté que dans la version publiée de votre site web, pas directement dans l'éditeur.
Cliquez sur Publier pour rendre vos modifications actives.

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

Google Tag Manager

WARNING

Bien que cette méthode fonctionne, elle n'est pas recommandée pour les analyses axées sur la confidentialité. L'utilisation de Google Tag Manager envoie des données aux serveurs Google avant de charger Cabin, ce qui annule certains des avantages de confidentialité de Cabin. Envisagez une installation directe lorsque 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 Nouveau pour créer un nouveau tag.
Cliquez sur Configuration du tag et sélectionnez HTML personnalisé.

Collez le code suivant :

html

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

Cliquez sur Déclenchement et sélectionnez un déclencheur (généralement "Toutes les pages").
Nommez votre tag (par exemple, "Cabin Analytics") et cliquez sur Enregistrer.
Cliquez sur Soumettre pour publier vos modifications.

Plus de détails sur Google Tag Manager.

Si vous avez besoin d'aide supplémentaire pour installer Cabin, veuillez contacter hello@withcabin.com.

Installation de Cabin ​

Installation de base ​

WordPress ​

Shopify ​

WooCommerce ​

Squarespace ​

Wix ​

Next.js ​

Ghost ​

Webflow ​

Nuxt.js ​

Nuxt 3 ​

Nuxt 2 ​

Svelte/SvelteKit ​

Gatsby ​

Hugo ​

Astro ​

Framer ​

Bubble ​

Carrd ​

Webnode ​

Google Tag Manager ​

Installation de Cabin

Installation de base

WordPress

Shopify

WooCommerce

Squarespace

Wix

Next.js

Ghost

Webflow

Nuxt.js

Nuxt 3

Nuxt 2

Svelte/SvelteKit

Gatsby

Hugo

Astro

Framer

Bubble

Carrd

Webnode

Google Tag Manager