メインコンテンツへスキップ
Zenovaydocs
4分で読めます

Squarespace インテグレーション

Code Injection パネルから Squarespace サイトに Zenovay を追加します。このインテグレーションはノーコードで、すべての Squarespace テンプレートで動作し、Squarespace の GDPR/CCPA 同意バナーにも対応しています。

Code Injection には Business プラン以上（月額 $23+）が必要です。Personal プランでは Code Injection は利用できません。

クイックスタート

ステップ場所操作
1Zenovay ダッシュボードトラッキングスニペットをコピーする
2Squarespace 管理画面 → Settings → Advanced → Code InjectionHeader に貼り付ける
3保存パネル上部の Save をクリックする
4Zenovay ダッシュボード約 30 秒以内にリアルタイムビジターが表示される

方法 1: サイト全体の Code Injection（推奨）

Squarespace の Code Injection パネルは、すべてのページの <head> に生の HTML を書き込みます。これはサードパーティのアナリティクスやピクセルを追加するために Squarespace が推奨する方法です。

手順

  1. Squarespace 管理パネルにログインします。
  2. ホームメニューから Settings をクリックします。
  3. 下にスクロールして Advanced をクリックします。
  4. Code Injection をクリックします。
  5. Header ボックスに Zenovay スニペットを貼り付けます。
<script defer data-tracking-code="YOUR_TRACKING_CODE" src="https://api.zenovay.com/z.js"></script>
  1. パネル上部の Save をクリックします。

確認する

プライベートブラウザウィンドウでライブサイトを開き、ソースを確認します。<head> と </head> の間に <script defer data-tracking-code=...> が表示されているはずです。Zenovay の リアルタイムビュー に約 30 秒以内に自分のアクセスが表示されます。

方法 2: ページごとの Code Injection（Premium / Business プラン）

特定のページのみをトラッキングしたい場合は、ページごとの注入を使用します。

  1. 管理画面で Pages パネルのページにカーソルを合わせます。
  2. ギアアイコンをクリックして Page Settings を開きます。
  3. Advanced タブを開きます。
  4. Page Header Code Injection ボックスにスニペットを貼り付けます。
  5. Save します。

ページごとの注入はサイト全体の注入の後に実行されます。両方のスコープにトラッカーを貼り付けると二重カウントになります。

カスタムイベントをトラッキングする

トラッカーの読み込み後、ページ上の任意の Code Block から window.zenovay() を呼び出せます。

CTA クリックをトラッキングする

  1. ページエディターでボタンの隣に Code ブロックを追加します。
  2. 言語を HTML に設定します。
  3. 以下を貼り付けます。
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const cta = document.querySelector('[data-zv-cta="hero"]');
    if (!cta || !window.zenovay) return;
    cta.addEventListener('click', () => {
      window.zenovay('track', 'cta_clicked', { location: 'hero', page: location.pathname });
    });
  });
</script>
  1. ブロック設定を編集してボタンに data-zv-cta="hero" 属性を追加します（テンプレートによっては、生の属性を付与するためにボタンを Code ブロックでラップする必要があります）。

フォーム送信をトラッキングする

Squarespace ネイティブフォームは Y.Mojito.SquarespaceFormFront イベントをフックすることもできますが、最もシンプルなクロステンプレートのアプローチは submit イベントをリッスンすることです。

<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('form[data-form-id]').forEach(form => {
      form.addEventListener('submit', () => {
        if (window.zenovay) {
          window.zenovay('track', 'form_submitted', {
            form_id: form.getAttribute('data-form-id'),
            page: location.pathname,
          });
        }
      });
    });
  });
</script>

ログイン済み顧客を識別する（Member Areas）

Squarespace Member Areas を使用している場合、ログイン後に顧客を識別できます。Squarespace がメンバーコンテキストを復元した後に実行されるよう、Code Injection → Footer にこれを追加します。

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const memberId = window.SquarespaceMemberAccountContext?.context?.memberId;
    const email = window.SquarespaceMemberAccountContext?.context?.emailAddress;
    if (memberId && window.zenovay) {
      window.zenovay('identify', { userId: memberId, email });
    }
  });
</script>

この内部 Squarespace コンテキストはベストエフォートです。依存する場合は try/catch でラップしてください。

Squarespace Commerce の購入をトラッキングする

Squarespace Commerce ストアの場合、注文確認ページで purchase イベントを発火します。

  1. Settings → Advanced → Code Injection に移動します。
  2. Order Confirmation Page ボックス（通常の Header ボックスではなく）に以下を貼り付けます。
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const orderId = document.querySelector('[data-order-id]')?.dataset.orderId
                 || window.location.pathname.split('/').pop();
    const total = document.querySelector('.order-total .price')?.textContent;
    const revenue = parseFloat((total || '').replace(/[^0-9.]/g, ''));
    if (window.zenovay && revenue > 0) {
      window.zenovay('track', 'purchase', {
        transaction_id: orderId,
        revenue,
        currency: 'USD',
      });
    }
  });
</script>

返金やサブスクリプションを含む正確な収益アトリビューションには、サーバーサイドで Stripe Webhook を使用することをお勧めします。確認ページが表示される前に購入者がタブを閉じると、上記のクライアントサイドのフォールバックでは注文が記録されません。

プラン要件

プランCode Injectionページごとの注入Commerce イベント
Personal❌❌❌
Business✅✅⚠️ アドオン
Basic Commerce✅✅✅
Advanced Commerce✅✅✅ + abandoned-cart

よくある落とし穴

Personal プランには Code Injection がありません。 これは最も多いサポートチケットの原因です。Business（月額 $23）以上が必要です。

Squarespace 7.1 vs 7.0 テンプレート。 どちらも同じように Code Injection をサポートしており、メニューパスも同じです。唯一の違い: 一部の 7.0 テンプレートにはテンプレートレベルの設定に別の 「Page Header」 オプションがあります。これは無視して、標準の Settings → Advanced → Code Injection パネルを使用してください。

AMP / ロック画面ページ。 Squarespace はブログ投稿の AMP バリアント（/?format=amp）を配信します。AMP は任意の <script> タグを除去するため、トラッカーはそれらのページでは読み込まれません。AMP が重要な場合は、Settings → Marketing → SEO で AMP 配信を無効にしてください。

一部テンプレートでの SPA スタイルのナビゲーション。 ほとんどの Squarespace テンプレートはリンククリック時にフルページリロードを行います。一部（特に Brine と Native）は新しい <head> の読み込みをトリガーしない AJAX ページ遷移を持ちます。これらのテンプレートでページビューの集計不足が見られる場合は、popstate リスナーから window.zenovay('trackPageView') を手動で呼び出してください。

Cookie 同意バナー。 Squarespace の組み込み Cookie バナー（Settings → Cookies & Visitor Data）を有効にしている場合、カスタム Code Injection はブロックされません。同意まで Zenovay をブロックするには、代わりに data-cookieless="true" モードを使用してください。これはほとんどの法域で同意バナー不要です。

トラブルシューティング

症状考えられる原因対処法
データなし（Personal プラン）Business 未満で Code Injection が無効プランをアップグレードする
データなしスニペットを貼り付けたが保存していないCode Injection パネル上部の Save をクリックする
ブログ投稿でデータなしテストデバイスに AMP バリアントが配信されているAMP を無効化するか正規 URL でテストする
一部ページが見つからない数ページのみにページごとの Code Injection が設定されているスニペットをサイト全体の Header に移動する
ページビューが重複しているサイト全体の Header とページごとの Header の両方にスニペットが貼り付けられているどちらか一方のスコープを選ぶ

プライバシーとコンプライアンス

クッキーレストラッキング（Cookie なし、ローカルストレージなし）を行うには、data-cookieless="true" を追加します。

<script defer
        data-tracking-code="YOUR_TRACKING_CODE"
        data-cookieless="true"
        src="https://api.zenovay.com/z.js"></script>

詳細については プライバシーコンプライアンス をご覧ください。

関連リソース

サポートが必要ですか？ [email protected] までお問い合わせいただくか、ヘルプセンター をご覧ください。

このページは役に立ちましたか？