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>
.
<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 :
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
:jsexport 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 :js
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 :
bashnpm install gatsby-script
Modifiez votre composant de mise en page (généralement dans
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 /> </> ) }
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 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.