Cabinのインストール

まずDomainsページでドメインを追加します。そのあと、以下の手順に従ってサイトにCabinを追加してください。

スクリプトはどこでも同じです。1行だけ、2 KB、設定は不要です。公開されると、数秒以内にダッシュボードに訪問が表示されます。

スクリプトはオープンソースでもあります。訪問者のブラウザで何が実行されるのかはgithub.com/withcabin/hello.jsで正確に確認できます。リポジトリ内のビルド済みファイルは、CDNが配信するファイルと1バイト単位で同じなので、信用に頼る必要はありません。

基本のインストール

次のコードを、閉じタグ</body>の前に配置します。

html

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

WordPress

Insert Headers and Footersプラグインをインストールします。
Settings > Insert Headers and Footers メニューに移動します。

以下のコードを Footer scripts に貼り付けます。

html

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

Save をクリックします。

Shopify

NOTE

Shopifyのテーマコードにアクセスできる必要があります。

Shopifyの管理画面で Online Store > Themes に移動します。
編集したいテーマを探し、Actions > Edit code をクリックします。
Layoutディレクトリでtheme.liquidをクリックします。
閉じタグ</body>を探し、その直前に次のコードを貼り付けます。
html
```
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
```
Save をクリックします。

WooCommerce

Code Snippetsプラグインをインストールして有効化します。
Snippets > Add New に移動します。
スニペットに「Cabin Analytics」などのタイトルを付けます。

次のコードを貼り付けます。

php

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

スニペットを「Frontend」でのみ実行するように設定します。
Save Changes and Activate をクリックします。

または、上記のWordPressの手順に従い、Insert Headers and Footersプラグインを使うこともできます。

Squarespace

NOTE

SquarespaceのBusinessプランまたはCommerceプランでのみ利用できます。

Settings、Advanced、Code Injection の順にクリックします

Footer に次のコードを追加します。

html

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

ページ上部の Save をクリックします。

詳しくはSquarespaceをご覧ください。

Wix

NOTE

Wixの有料プランでのみ利用できます。

サイトのダッシュボードで Settings をクリックします。
Advanced Settings の下にある Tracking & Analytics タブをクリックします。
+ New Tool をクリックし、ドロップダウンから Custom を選択します。

次のコードを貼り付けます。

html

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

該当するドメインを選択します。注：このオプションは、複数のドメインがある場合にのみ表示されます。
カスタムコードの名前を入力します。例：Cabin Script
Add Code to Pages：All Pages と Load code once を選択します。
Place Code in：Body - end を選択します。
Apply をクリックします。

詳しくはWixをご覧ください。

Next.js

app/layout.js（またはapp/layout.tsx）ファイルを作成または編集し、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>
  )
}

詳しくはNext.jsのScriptコンポーネントをご覧ください。

Ghost

Ghost Admin settings に移動します。
サイドバーメニューの Code Injection をクリックします。
以下のトラッキングコードを Foot セクションに貼り付けます。
html
```
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
```
Save をクリックします。

詳しくはGhostをご覧ください。

Webflow

NOTE

Webflowの有料アカウントでのみ利用できます。

Project settings（左サイドバーの歯車アイコン）に移動します。
タブメニューで Custom code を選択します。
以下のトラッキングコードを Footer Code セクションに貼り付けます。
html
```
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
```
Save Changes をクリックします。
Publish をクリックして変更を公開します。

詳しくはWebflowのカスタムコードをご覧ください。

Nuxt

nuxt.config.jsファイルを編集します

app.headにスクリプトを追加します。

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

詳しくはNuxtのhead管理をご覧ください。

Svelte/SvelteKit

src/app.htmlファイルを編集します

閉じタグ</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>

詳しくはSvelteKitのapp.htmlをご覧ください。

Gatsby

Gatsby Script APIをインストールします。
bash
```
npm install gatsby-script
```

レイアウトコンポーネント（通常は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
      />
    </>
  )
}

詳しくはGatsby Script APIをご覧ください。

Hugo

Hugoプロジェクトでlayouts/partials/footer.htmlファイルを作成または編集します。

次のコードを追加します。

html

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

このパーシャルがサイトのメインレイアウトに含まれていることを確認します。

または、layouts/_default/baseof.htmlの閉じタグ</body>の前に直接追加することもできます。

詳しくはHugoのテンプレートをご覧ください。

Astro

メインのレイアウトファイル（通常はsrc/layouts/Layout.astro）を編集します。

html

<html lang="en">
    <head>
    <!-- headの内容 -->
    </head>
    <body>
    <slot />
    <script async defer src="https://scripts.withcabin.com/hello.js"></script>
    </body>
</html>

詳しくはAstroのレイアウトをご覧ください。

Framer

NOTE

カスタムコードを挿入できるFramerの有料プランが必要です。

Framerのプロジェクトを開きます。
左サイドバーの Settings アイコンをクリックします。
General タブを選択します。
Custom Code まで下にスクロールします。

Before </body> tag セクションに次のコードを貼り付けます。

html

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

Save をクリックします。

Bubble

Bubbleアプリのダッシュボードに移動します。
左サイドバーの Settings をクリックします。
SEO/metatags タブに移動します。
Advanced settings まで下にスクロールします。
Script in the body セクションを探し、次のコードを貼り付けます。
html
```
<script async defer src="https://scripts.withcabin.com/hello.js"></script>
```
Save をクリックします。

詳しくはBubbleのSEO/metatags設定をご覧ください。

Carrd

NOTE

CarrdのPro Standardプラン以上が必要です。

Carrdサイトの編集中に、上部バーの + ボタン（Add Element）をクリックします。
Embed を選択します。
Type を Code に設定します。

次のコードを貼り付けます。

html

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

（任意）Label に「Cabin Analytics」などのわかりやすい名前を設定します。
Style で Hidden を選択し、配置場所に Body End を選びます。
Add をクリックします。
Publish をクリックして変更を公開します。

詳しくはCarrdのカスタムコードの埋め込みをご覧ください。

Webnode

NOTE

WebnodeのPremiumプランが必要です（2023年6月26日以降に作成したプロジェクトの場合）。

Webnodeのエディターで、コードを追加したいセクションにマウスを置きます。
プラスボタンをクリックして新しいコンテンツを追加します。
コンテンツのバブルで円をクリックしてその他のオプションを表示し、HTML をクリックします。

次のコードを貼り付けます。

html

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

追加したHTMLは、エディター上では直接確認できず、公開版のウェブサイトでのみ確認できます。
Publish をクリックして変更を公開します。

詳しくはWebnodeのHTMLコードの挿入をご覧ください。

Google Tag Manager

WARNING

この方法でも動作しますが、プライバシー重視のアナリティクスにはおすすめしません。Google Tag Managerを使うと、Cabinを読み込む前にGoogleのサーバーにデータが送られるため、Cabinのプライバシー上の利点の一部が失われます。できるだけ直接インストールすることを検討してください。

Google Tag Managerアカウントにログインします。
コンテナを選択します。
左サイドバーの Tags をクリックします。
New をクリックして新しいタグを作成します。
Tag Configuration をクリックし、Custom HTML を選択します。

次のコードを貼り付けます。

html

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

Triggering をクリックしてトリガーを選択します（通常は「All Pages」）。
タグに名前を付け（例：「Cabin Analytics」）、Save をクリックします。
Submit をクリックして変更を公開します。

詳しくはGoogle Tag Managerをご覧ください。

動作の確認

サイトを開いてから、Cabinのダッシュボードを開きます。あなた自身の訪問がすぐに表示されるはずです。何も表示されない場合は、公開版のページにスクリプトタグが入っているか（ソースを表示してhello.jsを検索します）、広告ブロッカーにブロックされていないかを確認してください。カスタムドメインを使えば、この問題は根本的に解決します。

MCPを使って、AIアシスタントに確認を頼むこともできます。「example.comにCabinは正しくインストールされていますか？」

インストールについてさらにサポートが必要な場合は、hello@withcabin.comまでお問い合わせください。

Cabinのインストール ​

基本のインストール ​

WordPress ​

Shopify ​

WooCommerce ​

Squarespace ​

Wix ​

Next.js ​

Ghost ​

Webflow ​

Nuxt ​

Svelte/SvelteKit ​

Gatsby ​

Hugo ​

Astro ​

Framer ​

Bubble ​

Carrd ​

Webnode ​

Google Tag Manager ​

動作の確認 ​

Cabinのインストール

基本のインストール

WordPress

Shopify

WooCommerce

Squarespace

Wix

Next.js

Ghost

Webflow

Nuxt

Svelte/SvelteKit

Gatsby

Hugo

Astro

Framer

Bubble

Carrd

Webnode

Google Tag Manager

動作の確認