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

Webflow インテグレーション

Webflow サイトに Zenovay を 3 分以内で追加できます。Webflow の Custom Code サポートは一流で、あらゆる CMS の中でも最もクリーンなインテグレーションの一つです。貼り付けて、公開して、完了です。

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

クイックスタート

ステップ場所操作
1Zenovay ダッシュボードトラッキングスニペットをコピーする
2Webflow Designer → Site settings → Custom codeHead code に貼り付ける
3*.webflow.io またはカスタムドメインに公開するPublish をクリックする
4Zenovay ダッシュボード約 30 秒以内にリアルタイムビジターが表示される

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

Webflow では Site Settings を通じて、サイト上のすべてのページの <head> に HTML を挿入できます。これはあらゆるアナリティクスやマーケティングピクセルに対して Webflow が推奨するアプローチです。

手順

  1. Webflow Designer でプロジェクトを開きます。
  2. 左サイドバーのギアアイコンをクリックして Site Settings を開きます。
  3. Custom Code タブに移動します。
  4. Head code ボックスに以下を貼り付けます。
<script defer data-tracking-code="YOUR_TRACKING_CODE" src="https://api.zenovay.com/z.js"></script>
  1. 下にスクロールして Save Changes をクリックします。
  2. Designer に戻り、Publish（右上）をクリック → ドメインを選択 → Publish to Selected Domains。

確認する

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

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

特定のページ（例: ランディングページのみ）だけをトラッキングしたい場合、Webflow はページごとの Head コードをサポートしています。

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

ページレベルの Custom Code はサイト全体のコードの後に追加されます。両方の場所に貼り付けると二重カウントになるため、どちらか一方のスコープを選んでください。

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

スクリプトの読み込み後（defer されているため DOMContentLoaded を待ちます）、任意のインラインスクリプトまたは Webflow インタラクション Custom Code から window.zenovay() を呼び出せます。

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

CTA ボタンの隣に HTML Embed 要素を配置します。

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

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

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

Webflow ネイティブフォームはリッスンできる submit イベントを発行します。

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

ログインユーザーを識別する（Memberstack・Outseta・Memberspace）

Webflow メンバーシップアドオンを使用している場合、セッションが判明した時点でビジターを識別します。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>

Webflow Ecommerce のトラッキング

Webflow Ecommerce で販売している場合、注文確認ページ（/order-confirmation/[order-id]）で purchase イベントを発火します。

  1. 注文確認ページテンプレートに HTML Embed を追加します。
  2. 以下を貼り付けます。
<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', // adjust if your store uses another currency
      });
    }
  });
</script>

高精度な収益アトリビューション（返金・税金・サブスクリプション）を行うには、クライアントサイドのトラッキングの代わりに Stripe または Webflow Ecommerce アカウントから Zenovay への サーバーサイド Webhook を使用することをお勧めします。購入者がタブを閉じると注文が記録されない場合があります。

プラン要件

  • Webflow Starter（無料）: Custom Code は無効です。有料の Site Plan にアップグレードしてください。
  • Webflow Basic / CMS / Business / Ecommerce: Custom Code は完全に有効です。
  • Workspace プランのみ: サイト自体に Site Plan が必要です。Workspace プランのみでは不十分です。

よくある落とし穴

Site Settings vs Page Settings。 サイト全体の Head コードは 404・検索・パスワードページを含むすべてのページに適用されます。ページ固有の Head コードはそのページにのみ適用されます。サイト全体にトラッカーを設置する場合は Site Settings を使用し、スコープを混在させないでください。

Webflow はプランに Custom Code が含まれていない場合、.webflow.io プレビューで <script> タグを除去します。 テストの前に有料の Site Plan に加入していることを確認してください。

スニペットは Webflow のインタラクションの後に実行されます。 Zenovay は defer されているため、初期レンダリングの後に読み込まれます。これは意図的な動作で、ペイントをブロックしません。Zenovay の読み込み前にイベントを発火したい場合はキューに入れてください: window.zenovay = window.zenovay || function(){ (window.zenovay.q = window.zenovay.q || []).push(arguments); };

HTML Embed 要素内の <script> は実行されます。 Webflow はこれを許可していますが、Site Settings → Custom Code の代わりに Embed にスニペットを貼り付けると二重インストールになる可能性があります。トラッカーには Site Settings を使用し、Embed はページ固有のイベントトラッキングのみに使用してください。

Webflow の公開済み HTML はエッジで積極的にキャッシュされます。 Publish 後、テストする前に 1〜2 分待ってください。Cmd/Ctrl+Shift+R で強制リフレッシュしてください。

トラブルシューティング

症状考えられる原因対処法
データなしプランで Custom Code が無効有料の Site Plan にアップグレードする
データなしスニペット追加後にサイトを公開していないDesigner で Publish をクリックする
半分のページのみトラッキングされるページレベルの Head コードがサイトレベルを上書きしているスニペットを Site Settings のみに移動する
ページビューが重複しているSite Settings と HTML Embed の両方にスニペットが貼り付けられているどちらか一方を削除する
イベントが発火しないZenovay の読み込み前にカスタムイベントスクリプトが実行されたDOMContentLoaded でラップする

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

完全なクッキーレスモード（Cookie なし、ローカルストレージなし）で実行するには、スニペットに data-cookieless="true" を追加します。EU・UK 展開の多くで同意記録前に必要です。

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

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

関連リソース

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

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