Framer インテグレーション

Site Settings → Custom Code から任意の Framer サイトに Zenovay を追加します。スニペットは公開済みサイトでのみ動作します。これは期待される動作です。

Custom Code は公開済みの Framer サイトでのみ有効です。プレビューは常に Custom Code を無視します。エディタープレビューではなく、必ずライブ URL でテストしてください。

クイックスタート

Zenovay ダッシュボードからトラッキングスニペットをコピーします。
Framer で Site Settings → General → Custom Code を開きます。
Start of <head> tag に貼り付けます。
右上の Publish をクリックします。

インストール

サイト全体の Custom Code（推奨）

Framer でプロジェクトを開きます。
Site Settings（左パネル上部のギアアイコン）をクリックします。
General タブを開きます。
Custom Code までスクロールします。
Start of <head> tag に次のスニペットを貼り付けます。

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

フィールドの外をクリックすると自動保存されます。
右上の Publish をクリックします。

ページごとの Custom Code

特定のページのみトラッキングする場合：

Pages パネルでページを選択します。
ページの右側設定を開きます。
Custom Code → Start of <head> tag までスクロールします。
スニペットを貼り付けます。
公開します。

サイト全体とページごとのスニペットを組み合わせないでください。二重カウントになります。

インストールを確認する

プライベートブラウザウィンドウで公開済みの Framer URL（*.framer.app またはカスタムドメイン）を開きます。
ソースを確認して <head> 内の <script defer data-tracking-code=...> を探します。
Zenovay リアルタイムビューを確認します。約 30 秒以内にアクセスが表示されます。

SPA ナビゲーションは自動的に処理されます

Framer はページを React SPA としてレンダリングします。Zenovay トラッカー（v2+）は history.pushState、history.replaceState と popstate をリッスンし、すべてのルート変更時に自動的にページビューを発火します。window.zenovay('page') を手動で呼び出す必要はありません。

Code Overrides を使ったカスタムイベントのトラッキング

任意の Framer コンポーネントをラップする Code Override を作成します。

import type { ComponentType } from 'react';

export function withCtaTracking(Component): ComponentType {
  return (props) => (
    <Component
      {...props}
      onClick={(e) => {
        props.onClick?.(e);
        // @ts-ignore — global injected by tracker
        window.zenovay?.('track', 'cta_clicked', {
          location: props.id || 'unknown',
          page: window.location.pathname,
        });
      }}
    />
  );
}

Frame → Code Overrides → withCtaTracking から適用します。

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

document にデリゲートリスナーをアタッチして、すべてのネイティブフォーム送信をキャプチャします。

import { useEffect } from 'react';

export function useTrackFormSubmits() {
  useEffect(() => {
    const handler = (e: Event) => {
      const form = e.target as HTMLFormElement;
      if (!form?.matches('form')) return;
      // @ts-ignore
      window.zenovay?.('track', 'form_submitted', {
        form_id: form.id || form.getAttribute('name') || 'unnamed',
      });
    };
    document.addEventListener('submit', handler, true);
    return () => document.removeEventListener('submit', handler, true);
  }, []);
  return null;
}

トラブルシューティング

プレビューでデータが表示されない。 Custom Code は公開済みサイトでのみ動作します。必ずライブ URL でテストしてください。

Free プランでデータがない。 Custom Code には有料の Framer プラン（Mini 以上）が必要です。

エディタートラフィックがアナリティクスを汚染している。 Framer の CMS プレビューは ?framer-publish=true で読み込まれます。ダッシュボードの保存済みセグメントでそのクエリ文字列をフィルタリングしてください。

ルート変更時にイベントは発火するがページビューがない。 古いトラッカーバージョンを使用しています。Zenovay ダッシュボードからスニペットを再コピーして、SPA ナビゲーションを自動処理する v2 トラッカーを取得してください。

プラン要件

プラン	Custom Code
Free	❌
Mini	✅
Basic / Pro / Business	✅

プライバシー

クッキーレストラッキングには data-cookieless="true" を追加します。

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

次のステップ

高度な Code Override パターンについては、docs.zenovay.com の Framer インテグレーションガイドをお読みください。
コンバージョンゴールを設定します。
サポートが必要ですか？ [email protected] までお問い合わせください。