Webflow フォームは、以下の 2 つのアプローチのいずれかを使って Zenovay ゴールとして追跡できます。フォームのリダイレクト動作に合うものを選んでください。
ステップ 0 — トラッカーをインストール
まだの場合、Webflow の Project Settings → Custom Code → Head Code に Zenovay 追跡スクリプトを貼り付けます:
<script
defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js"
></script>
サイトを公開し、Zenovay ダッシュボードでページビューが届いているのを確認します。
アプローチ 1 — URL マッチゴール (シンプル)
フォーム送信後に お礼ページへリダイレクトする 場合に使用します。
- Webflow で Form Settings → Redirect URL を、一意の成功ページ (例:
/contact-thanks) に設定します。 - Zenovay で Journeys タブに移動してから、Goals サブタブに移動します。
- ゴール追加 をクリックして、Page Visit をゴールタイプとして選択します (ページ URL と照合)。
- 照合タイプとパターンを選択します。例えば Exact match で
/contact-thanks(またはリダイレクト先として設定したもの)。 - 保存。
これでお礼ページへの訪問はコンバージョンとしてカウントされます。最もシンプルで信頼できるアプローチです。
アプローチ 2 — カスタムイベント (リダイレクトなし)
フォームが同じページに留まり、インラインで成功メッセージを表示する場合に使用します。
Webflow は、成功した AJAX 送信の後、フォームを .w-form-done 成功ブロックに置き換えます。このブロックが表示されるのを監視して、Zenovay カスタムイベントを送信します。次のコードを Project Settings → Custom Code → Footer Code に追加します:
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', () => {
// Webflow はクライアント側で検証する; AJAX 完了後に成功メッセージが表示される。
// 成功ブロックが可視になるのを監視する。
const successEl = form.parentElement.querySelector('.w-form-done');
if (!successEl) return;
const observer = new MutationObserver(() => {
if (successEl.style.display !== 'none' && successEl.offsetHeight > 0) {
window.zenovay && window.zenovay('track', 'form_submitted', {
form_id: form.getAttribute('data-name') || form.id || 'unknown'
});
observer.disconnect();
}
});
observer.observe(successEl, { attributes: true, childList: true, subtree: true });
});
});
});
</script>
カスタムイベント呼び出しは window.zenovay('track', '<event_name>', { ...properties }) です。最初の引数はリテラルコマンド 'track'、その後にイベント名、その後にオプションのプロパティオブジェクトです。
次に Zenovay でカスタムイベントゴールを作成します:
- サイトダッシュボードを開き、Journeys タブ → Goals サブタブに移動し、ゴール追加 をクリックします。
- Custom event をゴールタイプとして選択します。
- イベント名を
form_submittedに設定します (スクリプトで送信する名前と一致する必要があります)。
1 つのフォームだけを追跡したい場合は、フォームごとに異なるイベント名 (例: contact_form_submitted) を送信し、各フォーム用にゴールを作成します。
動作の検証
ライブサイトでフォームを送信します。~30 秒以内に:
- サイトダッシュボードの Live View タブに新しいアクティビティが表示されます。
- Journeys タブ → Goals サブタブの作成したゴールの横で、ゴールカウンターが進みます。
よくある落とし穴
- フォームがバリデーションに失敗する — アプローチ 1 では リダイレクトがないので発火しません。アプローチ 2 では成功ブロックが非表示のままなので発火しません。これは正しい動作です — 成功した送信のみをカウントしたいのです。
- Webflow CMS フォーム — 同じアプローチで動作します。
data-name属性はエディター内のフォーム名と異なる場合があります。 - 1 ページ上の複数フォーム — 両アプローチとも処理します。アプローチ 2 では、
form_idプロパティ (またはフォームごとのイベント名) を使用してダッシュボードで区別できます。