Installare Cabin

Per iniziare, aggiungi il tuo dominio nella pagina Domains. Poi segui le istruzioni qui sotto per aggiungere Cabin al tuo sito.

Lo script è lo stesso ovunque: una riga, 2 KB, nessuna configurazione. Appena è online, le visite compaiono nella dashboard nel giro di pochi secondi.

È anche open source. Puoi leggere esattamente cosa gira nei browser dei tuoi visitatori su github.com/withcabin/hello.js, e il file compilato in quel repository è identico, byte per byte, a quello servito dalla CDN, quindi non devi fidarti sulla parola.

Installazione di base

Inserisci questo codice prima del tag di chiusura </body>.

html

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

WordPress

Installa il plugin Insert Headers and Footers.
Vai al menu Settings > Insert Headers and Footers.

Incolla il codice qui sotto in Footer scripts:

html

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

Clicca su Save.

Shopify

NOTE

Serve l'accesso al codice del tuo tema Shopify.

Dall'amministrazione di Shopify, vai su Online Store > Themes.
Trova il tema che vuoi modificare e clicca su Actions > Edit code.
Nella cartella Layout, clicca su theme.liquid.

Trova il tag di chiusura </body> e incolla questo codice subito prima:

html

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

Clicca su Save.

WooCommerce

Installa e attiva il plugin Code Snippets.
Vai su Snippets > Add New.
Dai allo snippet un titolo come "Cabin Analytics".

Incolla questo codice:

php

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

Imposta lo snippet in modo che venga eseguito solo nel "Frontend".
Clicca su Save Changes and Activate.

In alternativa, puoi seguire le istruzioni per WordPress qui sopra con il plugin Insert Headers and Footers.

Squarespace

NOTE

Disponibile solo con i piani Business o Commerce di Squarespace.

Clicca su Settings, poi su Advanced e infine su Code Injection

Aggiungi questo codice nel Footer:

html

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

Clicca su Save in cima alla pagina.

Maggiori dettagli su Squarespace

Wix

NOTE

Disponibile solo con un piano Wix a pagamento.

Clicca su Settings nella dashboard del tuo sito.
Clicca sulla scheda Tracking & Analytics sotto Advanced Settings.
Clicca su + New Tool e seleziona Custom dal menu a tendina.

Incolla il codice qui sotto:

html

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

Seleziona il dominio giusto. Nota: questa opzione compare solo se hai più domini.
Dai un nome al tuo codice personalizzato. Es. Cabin Script
Add Code to Pages: scegli All Pages e Load code once.
Place Code in: scegli Body - end.
Clicca su Apply.

Maggiori dettagli su Wix

Next.js

Crea o modifica il file app/layout.js (o app/layout.tsx) e importa lo script nel componente 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>
  )
}

Maggiori dettagli sul componente Script di Next.js.

Ghost

Vai alle Ghost Admin settings.
Clicca su Code Injection nel menu laterale.

Incolla il codice di tracciamento qui sotto nella sezione Foot:

html

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

Clicca su Save.

Maggiori dettagli su Ghost.

Webflow

NOTE

Disponibile solo per gli account Webflow a pagamento.

Vai alle Project settings (l'icona dell'ingranaggio nella barra laterale sinistra).
Seleziona Custom code nel menu delle schede.

Incolla il codice di tracciamento qui sotto nella sezione Footer Code:

html

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

Clicca su Save Changes.
Clicca su Publish per mettere online le modifiche.

Maggiori dettagli sul codice personalizzato in Webflow.

Nuxt

Modifica il file nuxt.config.js

Aggiungi lo script in app.head:

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

Maggiori dettagli sulla gestione dell'head in Nuxt.

Svelte/SvelteKit

Modifica il file src/app.html

Aggiungi lo script prima del tag di chiusura </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>

Maggiori dettagli su app.html di SvelteKit.

Gatsby

Installa la Gatsby Script API:
bash
```
npm install gatsby-script
```

Modifica il componente di layout (di solito 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
      />
    </>
  )
}

Maggiori dettagli sulla Gatsby Script API.

Hugo

Crea o modifica il file layouts/partials/footer.html nel tuo progetto Hugo.

Aggiungi questo codice:

html

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

Assicurati che questo partial sia incluso nel layout principale del sito.

In alternativa, puoi aggiungerlo direttamente in layouts/_default/baseof.html prima del tag di chiusura </body>.

Maggiori dettagli sui template di Hugo.

Astro

Modifica il file del layout principale (di solito in src/layouts/Layout.astro):

html

<html lang="en">
    <head>
    <!-- Il contenuto del tuo head -->
    </head>
    <body>
    <slot />
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
    </body>
</html>

Maggiori dettagli sui layout di Astro.

Framer

NOTE

Serve un piano Framer a pagamento che permetta di inserire codice personalizzato.

Apri il tuo progetto Framer.
Clicca sull'icona Settings nella barra laterale sinistra.
Seleziona la scheda General.
Scorri in basso fino a Custom Code.

Incolla questo codice nella sezione Before </body> tag:

html

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

Clicca su Save.

Bubble

Vai alla dashboard della tua app Bubble.
Clicca su Settings nella barra laterale sinistra.
Vai alla scheda SEO/metatags.
Scorri in basso fino a Advanced settings.

Trova la sezione Script in the body e incolla questo codice:

html

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

Clicca su Save.

Maggiori dettagli sulle impostazioni SEO/metatags di Bubble.

Carrd

NOTE

Serve un piano Carrd Pro Standard o superiore.

Mentre modifichi il tuo sito Carrd, clicca sul pulsante + (Add Element) nella barra in alto.
Seleziona Embed.
Imposta Type su Code.

Incolla questo codice:

html

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

(Facoltativo) Imposta Label con un nome descrittivo come "Cabin Analytics".
In Style, seleziona Hidden e scegli Body End come posizione.
Clicca su Add.
Clicca su Publish per mettere online le modifiche.

Maggiori dettagli sull'inserimento di codice personalizzato in Carrd.

Webnode

NOTE

Serve un piano Webnode Premium (per i progetti creati dopo il 26 giugno 2023).

Nell'editor di Webnode, porta il mouse sulla sezione in cui vuoi aggiungere il codice.
Clicca sul pulsante più per aggiungere un nuovo contenuto.
Nella bolla dei contenuti, clicca sul cerchio per altre opzioni, poi su HTML.

Incolla questo codice:

html

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

Tieni presente che l'HTML aggiunto sarà visibile solo nella versione pubblicata del sito, non direttamente nell'editor.
Clicca su Publish per mettere online le modifiche.

Maggiori dettagli sull'inserimento di codice HTML in Webnode.

Google Tag Manager

WARNING

Questo metodo funziona, ma non è consigliato per statistiche attente alla privacy. Con Google Tag Manager i dati passano dai server di Google prima che Cabin venga caricato, e così si perde parte dei vantaggi di Cabin per la privacy. Quando puoi, preferisci l'installazione diretta.

Accedi al tuo account Google Tag Manager.
Seleziona il tuo contenitore.
Clicca su Tags nella barra laterale sinistra.
Clicca su New per creare un nuovo tag.
Clicca su Tag Configuration e seleziona Custom HTML.

Incolla questo codice:

html

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

Clicca su Triggering e seleziona un attivatore (di solito "All Pages").
Dai un nome al tag (es. "Cabin Analytics") e clicca su Save.
Clicca su Submit per pubblicare le modifiche.

Maggiori dettagli su Google Tag Manager.

Verificare che funzioni

Apri il tuo sito, poi apri la dashboard di Cabin: la tua visita dovrebbe comparire subito. Se non vedi niente, controlla che il tag dello script sia nella versione pubblicata della pagina (visualizza il sorgente e cerca hello.js) e che non lo stia bloccando un ad blocker. I domini personalizzati risolvono il problema una volta per tutte.

Puoi anche chiedere a un assistente IA di controllare per te con MCP: "Cabin è installato correttamente su example.com?"

Se ti serve altro aiuto per installare Cabin, scrivi a hello@withcabin.com.

Installare Cabin ​

Installazione di base ​

WordPress ​

Shopify ​

WooCommerce ​

Squarespace ​

Wix ​

Next.js ​

Ghost ​

Webflow ​

Nuxt ​

Svelte/SvelteKit ​

Gatsby ​

Hugo ​

Astro ​

Framer ​

Bubble ​

Carrd ​

Webnode ​

Google Tag Manager ​

Verificare che funzioni ​

Installare Cabin

Installazione di base

WordPress

Shopify

WooCommerce

Squarespace

Wix

Next.js

Ghost

Webflow

Nuxt

Svelte/SvelteKit

Gatsby

Hugo

Astro

Framer

Bubble

Carrd

Webnode

Google Tag Manager

Verificare che funzioni