Webflow インテグレーション

Site Settings → Custom Code から任意の Webflow サイトに Zenovay を追加します。Webflow はアナリティクスタグのファーストクラスサポートを提供しているため、最もクリーンな CMS インテグレーションの一つです。

Webflow Custom Code はサイト自体の有料 Site Plan（Basic・CMS・Business・Ecommerce）が必要です。Workspace プランのみでは不十分です。

クイックスタート

Zenovay ダッシュボードからトラッキングスニペットをコピーします。
Webflow Designer で Site Settings → Custom Code を開きます。
スニペットを Head code に貼り付けます。
変更を保存します。
Designer 右上の Publish をクリックします。

インストール

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

Webflow Designer でプロジェクトを開きます。
左サイドバーのギアアイコンをクリックして Site Settings を開きます。
Custom Code タブを開きます。
Head code ボックスに次のスニペットを貼り付けます。

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

Save Changes をクリックします。
Designer に戻り Publish をクリック → ドメインを選択 → Publish to Selected Domains。

ページ固有の Custom Code

特定のページのみトラッキングする場合（例: キャンペーンランディングページ）：

Pages パネルでページを選択します。
ギアアイコン → Page Settings をクリックします。
Custom Code → Inside <head> tag までスクロールします。
同じスニペットを貼り付けます。
保存して公開します。

ページレベルのコードはサイト全体のコードの後に追加されます。両方のスコープに貼り付けると二重カウントになります。

インストールを確認する

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

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

トラッカーの読み込み後、任意の Webflow HTML Embed 要素から window.zenovay() を呼び出せます。

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const cta = document.querySelector('[data-zv-cta]');
    cta?.addEventListener('click', () => {
      window.zenovay?.('track', 'cta_clicked', {
        location: cta.dataset.zvCta,
        page: window.location.pathname,
      });
    });
  });
</script>

Designer の Custom attributes セクションでボタンに data-zv-cta="hero-primary" を追加します。

Webflow Ecommerce の購入をトラッキングする

Webflow Ecommerce ストアの場合、注文確認ページテンプレートの HTML Embed で purchase イベントを発火します。

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const total = document.querySelector('[data-wf-order-total]')?.textContent;
    const orderId = window.location.pathname.split('/').pop();
    if (window.zenovay && total) {
      window.zenovay('track', 'purchase', {
        transaction_id: orderId,
        revenue: parseFloat(total.replace(/[^0-9.]/g, '')),
        currency: 'USD',
      });
    }
  });
</script>

より高い精度（返金・サブスクリプション）には、代わりにサーバーサイド Webhook を使用してください。

ログインメンバーを識別する（Memberstack）

<script>
  window.$memberstackDom?.getCurrentMember().then(({ data: member }) => {
    if (member && window.zenovay) {
      window.zenovay('identify', {
        userId: member.id,
        email: member.auth?.email,
        plan: member.planConnections?.[0]?.planName,
      });
    }
  });
</script>

トラブルシューティング

データなし。 サイトが有料の Site Plan に加入しているか確認してください。無料プランと Workspace のみのプランはスクリプトを注入できません。Designer で Publish をクリックしたことも確認してください。

半分のページのみトラッキングされる。 サイト全体を上書きするページレベルの Head コードを追加した可能性があります。スニペットを Site Settings → Custom Code のみに移動してください。

イベントが発火しない。 カスタムイベントリスナーを DOMContentLoaded でラップしてください。Zenovay は defer されており、初期レンダリングの少し後に読み込まれます。

ページビューが重複している。 Site Settings と HTML Embed の両方にスニペットが貼り付けられています。どちらか一方を削除してください。

プラン要件

プラン	Custom Code	備考
Starter（無料）	❌	Custom Code 無効
Basic	✅	静的サイト
CMS	✅	動的 CMS サイト
Business	✅	フォーム制限が高い
Ecommerce	✅	収益トラッキング付き

プライバシー

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

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

次のステップ

Memberstack の識別やフォーム送信トラッキングを含む高度な例については、docs.zenovay.com の Webflow インテグレーションガイドをお読みください。
コンバージョンゴールを設定します。
サポートが必要ですか？ [email protected] までお問い合わせください。