カスタムイベントゴール

Pro プラン

カスタムイベントゴールを使用すると、JavaScriptイベントを発火させることでどんなアクションでも追跡できます。フォーム、動画再生、複雑なインタラクションに最適です。

カスタムイベントを使用する場面

以下の追跡に最適です：

フォーム送信（AJAX）
動画インタラクション（再生、完了）
シングルページアプリのナビゲーション
カートに追加
Webアプリでの機能使用
JavaScriptでトリガーされるあらゆるアクション

カスタムイベントの仕組み

サイトにJavaScriptコードを追加
アクション発生時にコードが実行される
Zenovayがイベントを受信
ゴールが記録される

基本的な実装

イベントの追跡

// シンプルなイベント
zenovay('goal', 'event_name');

// 値付きイベント
zenovay('goal', 'purchase', { value: 99.99 });

// 値と通貨付きイベント
zenovay('goal', 'purchase', {
  value: 99.99,
  currency: 'USD'
});

ゴール呼び出しは value と currency を記録します。渡すその他のキーはすべて基礎となるイベントペイロードで送信されますが、ゴール自体はその名前と値でのみ報告されます。

ゴールの作成

ウェブサイトのダッシュボードを開き、Journeys タブを選択
ゴール サブタブを開き、ゴール追加 をクリック
カスタムイベント を選択
イベント名を入力（例：purchase）し、コードで発火させる名前と一致させる
オプションで値の追跡を有効にしてデフォルト値を設定
保存

カスタムイベントゴールは、Zenovayが初めて見るイベント名を受け取ったときに自動作成されるため、イベントを先に発火させるとゴールリストに表示されます。

イベント名の命名

ベストプラクティス

良い名前	悪い名前
`signup_complete`	`goal1`
`purchase`	`click`
`video_50_percent`	`event`
`add_to_cart`	`123`

命名規則

一貫したパターンを選択：

snake_case：form_submit
camelCase：formSubmit
kebab-case：form-submit

プレフィックスによるカテゴリ分け

プレフィックス付きでイベントを整理：

// ECイベント
zenovay('goal', 'ecom_add_to_cart');
zenovay('goal', 'ecom_checkout_start');
zenovay('goal', 'ecom_purchase');

// エンゲージメントイベント
zenovay('goal', 'engage_video_play');
zenovay('goal', 'engage_scroll_50');

よくある実装例

フォーム送信

document.querySelector('form').addEventListener('submit', function(e) {
  zenovay('goal', 'contact_form');
});

// AJAXフォームの場合
function onFormSuccess() {
  zenovay('goal', 'contact_form');
}

動画インタラクション

const video = document.querySelector('video');

video.addEventListener('play', function() {
  zenovay('goal', 'video_play');
});

video.addEventListener('ended', function() {
  zenovay('goal', 'video_complete');
});

// 50%視聴の追跡
video.addEventListener('timeupdate', function() {
  if (video.currentTime / video.duration > 0.5) {
    zenovay('goal', 'video_50_percent');
  }
});

ECアクション

// カートに追加
function addToCart(product) {
  // カートのロジック...

  zenovay('goal', 'add_to_cart', {
    value: product.price
  });
}

// 購入完了
function onPurchaseComplete(order) {
  zenovay('goal', 'purchase', {
    value: order.total,
    currency: 'USD'
  });
}

登録・サインアップ

async function handleSignup(formData) {
  try {
    const response = await api.signup(formData);

    if (response.success) {
      zenovay('goal', 'signup_complete', {
        value: 50 // 推定リード価値
      });
    }
  } catch (error) {
    // エラー処理
  }
}

値の設定

静的な値

ゴール設定で設定：

値の追跡を有効化
デフォルト値を入力（例：50）
各完了がその値に加算される

動的な値

コードから渡す：

// 注文金額
zenovay('goal', 'purchase', {
  value: orderTotal
});

// 計算された値
const leadValue = isPremium ? 100 : 25;
zenovay('goal', 'lead', { value: leadValue });

ページから値を取得

DOMから読み込む：

const price = parseFloat(
  document.querySelector('.price').textContent.replace('$', '')
);
zenovay('goal', 'purchase', { value: price });

ゴール値フィールド

ゴール完了は以下のフィールドを記録します：

プロパティ	型	例
value	number	`99.99`
currency	string	`"USD"`

value は単純な数値として渡します（通貨記号や文字列は不可）。currency はISO通貨コードで、デフォルトは USD です。

フレームワーク対応

React

import { useCallback } from 'react';

function SignupForm() {
  const handleSubmit = useCallback((data) => {
    // 送信ロジック...

    window.zenovay('goal', 'signup');
  }, []);

  return <form onSubmit={handleSubmit}>...</form>;
}

Vue

<script>
export default {
  methods: {
    handleSubmit() {
      // 送信ロジック...

      window.zenovay('goal', 'signup');
    }
  }
}
</script>

Next.js

// コンポーネント内でのクライアント側トラッキング
'use client';

export default function CheckoutButton() {
  function handleSuccess() {
    if (typeof window !== 'undefined') {
      window.zenovay('goal', 'purchase');
    }
  }

  return <button onClick={handleSuccess}>完了</button>;
}

シングルページアプリ（SPAs）

ルート変更のトラッキング

仮想ページビュー用：

// React Router
history.listen(() => {
  zenovay('page');
});

// Vue Router
router.afterEach(() => {
  zenovay('page');
});

ナビゲーション後のゴール

// ナビゲートして追跡
router.push('/success').then(() => {
  zenovay('goal', 'signup_complete');
});

条件付きトラッキング

条件に基づいて追跡

// 条件が満たされた場合のみ追跡
if (user.isNewUser && !user.hasConvertedBefore) {
  zenovay('goal', 'first_conversion');
}

// A/Bテストバリアント
if (experimentVariant === 'B') {
  zenovay('goal', 'variant_b_conversion');
}

イベントのデバウンス

重複発火を防止：

let hasTracked = false;

function trackOnce(eventName) {
  if (!hasTracked) {
    zenovay('goal', eventName);
    hasTracked = true;
  }
}

エラーハンドリング

安全なトラッキング

Zenovayが読み込まれていない場合に対応します。トラッキングスニペットは小さなコマンドキューを定義するため、スクリプト読み込み完了前の呼び出しもその後処理されます：

function safeTrackGoal(eventName, properties) {
  if (typeof zenovay === 'function') {
    zenovay('goal', eventName, properties);
  } else {
    console.warn('Zenovay not loaded');
  }
}

イベントのテスト

デバッグモード

コンソールログを有効化：

zenovay('debug');

// テストイベントを発火
zenovay('goal', 'test_event');
// コンソールで出力を確認

ダッシュボードで確認

テストイベントを発火
ウェブサイトのダッシュボードを開き Live View タブを選択してリアルタイムアクティビティを監視するか、Journeys → ゴール を開いてゴール完了数を確認
ゴールが表示され、数が増えることを確認
ゴール値を確認

ネットワークタブ

DevTools → ネットワークを開く
イベントを発火
api.zenovay.com へのリクエストを探す
ペイロードを確認

トラブルシューティング

イベントが記録されない場合

スクリプトの読み込みを確認：

console.log(typeof zenovay); // 'function' と表示されるはず

イベント名が一致しているか確認：

ゴール：signup
コード：zenovay('goal', 'signup') ✓
コード：zenovay('goal', 'Signup') ✗

エラーを確認：

ブラウザコンソールでエラーを確認
ネットワークタブで失敗したリクエストを確認

値が記録されない場合

値が数値であることを確認：

// 誤り
zenovay('goal', 'purchase', { value: "$99.99" });

// 正しい
zenovay('goal', 'purchase', { value: 99.99 });