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

Framer インテグレーション

Site Settings → Custom Code から任意の Framer サイトに Zenovay を追加します。スニペットは公開済みサイトでのみ動作します。プレビューで Custom Code が無視されるのは正常な動作です。

Custom Code は Framer の有料プラン（Mini 以上）すべてで利用できます。無料の Framer サイトにはサードパーティスクリプトを追加できません。

クイックスタート

ステップ場所操作
1Zenovay ダッシュボードトラッキングスニペットをコピーする
2Framer → Site Settings → General → Custom CodeStart of <head> tag に貼り付ける
3公開する右上の Publish をクリックする
4Zenovay ダッシュボード約 30 秒以内にリアルタイムビジターが表示される

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

Framer の Custom Code パネルは、すべての公開済みページに HTML を直接注入します。アナリティクスやマーケティングタグに対して Framer が推奨するアプローチです。

手順

  1. Framer でプロジェクトを開きます。
  2. Site Settings（左パネル上部のギアアイコン）をクリックします。
  3. まだ開いていない場合は General タブを開きます。
  4. Custom Code までスクロールします。
  5. Start of <head> tag に以下を貼り付けます。
<script defer data-tracking-code="YOUR_TRACKING_CODE" src="https://api.zenovay.com/z.js"></script>
  1. フィールドの外をクリックすると自動保存されます。
  2. エディターの右上の Publish をクリックします。Custom Code はプレビュー URL には適用されません。公開済みのライブサイトにのみ適用されます。

確認する

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

方法 2: ページ固有の Custom Code

ページ固有のトラッキング（例: キャンペーンランディングページのみ）には、Framer はページごとの Custom Code も提供しています。

  1. Pages パネルでページを選択します。
  2. ページの右側パネルを開いて Custom Code までスクロールします。
  3. そのページの Start of <head> tag にスニペットを貼り付けます。
  4. 公開します。

ページごとの Custom Code はサイト全体のコードの後に追加されます。両方にトラッカーを貼り付けると二重カウントになります。

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

Framer はページを React SPA としてレンダリングしますが、トラッカーは SPA ナビゲーションを自動的に処理します（history.pushState をリッスンします）。カスタムイベントについては、任意の Framer Code Override または Code Component から window.zenovay() を呼び出せます。

Code Override を使って CTA クリックをトラッキングする

Framer で新しい Code Override を作成します。

import type { ComponentType } from 'react';

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

Frame → Code Overrides → withCtaTracking から CTA フレームにオーバーライドを適用します。

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

Framer Forms は非表示の iframe を通じて送信されます。Code Override またはページルートに付加したグローバルオーバーライドでフォームの submit イベントをリッスンします。

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',
        page: window.location.pathname,
      });
    };
    document.addEventListener('submit', handler, true);
    return () => document.removeEventListener('submit', handler, true);
  }, []);
  return null;
}

ログインユーザーを識別する（Framer Auth またはサードパーティを使用している場合）

Framer を外部認証プロバイダー（Memberstack・Outseta・Clerk など）に接続している場合は、認証プロバイダーの onSignIn コールバックから window.zenovay('identify', ...) を呼び出します。Framer にはフックできるネイティブ認証がありません。

プラン要件

プランCustom Codeカスタムドメイン
Free❌❌
Mini✅✅
Basic✅✅
Pro✅✅
Business✅✅

よくある落とし穴

プレビューは Custom Code を無視します。 これは最も多い驚きの #1 です。Framer エディターのプレビュー（再生ボタン）は Custom Code なしでページをレンダリングします。Publish をクリックしてライブ URL でテストする必要があります。プレビューをテストすると常に「Zenovay スクリプトが読み込まれていない」と表示されます。

localhost / カスタムドメイン。 Framer のホスティングを通じてカスタムドメインを使用している場合、Custom Code は *.framer.app と同様に機能します。Framer を静的 HTML としてエクスポートしてセルフホストする場合は、エクスポートされた index.html にスニペットを手動で貼り付ける必要があります。現在、Framer の静的エクスポートにはバンドルに Custom Code が含まれていません。

SPA ナビゲーションは処理されます。 Framer は内部で React を使用しています。Zenovay トラッカー（v2 以上）は history.pushState をリッスンし、すべてのルート変更時にページビューを発火するため、window.zenovay('trackPageView') を手動で呼び出す必要はありません。

遅延読み込みセクション。 Framer の「スクロールで表示」パターンはトラッカーに影響しません。スクリプトは <head> に存在し、セクションの可視性に関係なく最初のペイント時に実行されます。

テストモードのノイズ。 Framer の CMS プレビューは ?framer-publish=true クエリ文字列付きでページを読み込みます。エディターのトラフィックを除外したい場合は、Zenovay ダッシュボードの 保存済みセグメント でそのクエリ文字列をフィルタリングしてください。

トラブルシューティング

症状考えられる原因対処法
プレビューでデータが表示されないCustom Code は公開済みサイトでのみ動作するPublish をクリックしてライブ URL でテストする
Free プランでデータがないCustom Code が Free では無効Mini 以上にアップグレードする
一部のページのみトラッキングされるページごとの Custom Code が上書きしているサイト全体の Custom Code に移動する
ページビューが重複しているサイト全体とページごとの両方のスロットにスニペットがあるどちらか一方のスコープを選ぶ
イベントは発火するがページビューがないトラッカーバージョンが v2 より古い（SPA サポートなし）ダッシュボードからスニペットを再コピーする

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

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

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

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

関連リソース

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

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