2分で読めます

カスタムイベント

カスタムイベントとユーザーインタラクションをトラッキングして、訪問者がウェブサイトとどのように関わっているかを理解します。

概要

カスタムイベントでは、ビジネスにとって重要な特定のユーザーアクションをトラッキングできます：

ボタンクリック
フォーム送信
ビデオ再生
ファイルダウンロード
外部リンククリック
スクロール深度
ページ閲覧時間

基本的なイベントトラッキング

track() 関数を使用してカスタムイベントを送信します：

基本的なイベントトラッキングJavaScript

// シンプルなイベントをトラッキング
zenovay('track', 'button_click');

// プロパティ付きのイベントをトラッキング
zenovay('track', 'video_play', {
video_id: 'intro-video',
video_title: 'Getting Started with Zenovay',
video_duration: 120
});

イベントプロパティ

プロパティを使用してイベントに追加のコンテキストを含めます：

プロパティ付きイベントJavaScript

zenovay('track', 'purchase', {
product_id: 'pro-plan',
product_name: 'Pro Plan',
price: 29.99,
currency: 'USD',
category: 'subscription'
});

一般的なイベントパターン

フォーム送信

フォーム送信のトラッキングJavaScript

document.getElementById('contact-form').addEventListener('submit', function(e) {
zenovay('track', 'form_submit', {
  form_name: 'contact_form',
  form_type: 'lead_generation'
});
});

ファイルダウンロード

ダウンロードのトラッキングJavaScript

document.querySelectorAll('a[href$=".pdf"]').forEach(link => {
link.addEventListener('click', function(e) {
  zenovay('track', 'file_download', {
    file_name: this.href.split('/').pop(),
    file_type: 'pdf',
    file_url: this.href
  });
});
});

ビデオインタラクション

ビデオイベントのトラッキングJavaScript

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

video.addEventListener('play', () => {
zenovay('track', 'video_play', {
  video_title: video.title,
  video_duration: video.duration
});
});

video.addEventListener('ended', () => {
zenovay('track', 'video_complete', {
  video_title: video.title,
  watch_time: video.currentTime
});
});

React統合

Reactアプリケーションでは、トラッキングスクリプトからグローバルなzenovayオブジェクトを使用します：

React例JavaScript

function ProductCard({ product }) {
const handleAddToCart = () => {
  // トラッキングスクリプトからグローバルなzenovayオブジェクトを使用
  zenovay('track', 'add_to_cart', {
    product_id: product.id,
    product_name: product.name,
    price: product.price
  });
};

return (
  <button onClick={handleAddToCart}>
    Add to Cart
  </button>
);
}

イベント命名規約

一貫性のあるイベントトラッキングのために、以下の規約に従ってください：

イベント名には小文字とアンダースコアを使用してください：button_click、form_submit、video_play

推奨されるイベント名

イベントタイプ	イベント名	説明
ナビゲーション	`page_view`	ページが表示された
エンゲージメント	`button_click`	ボタンがクリックされた
フォーム	`form_submit`	フォームが送信された
メディア	`video_play`	ビデオが開始した
コマース	`add_to_cart`	アイテムがカートに追加された
検索	`search_query`	検索が実行された

プロパティガイドライン

プロパティ名は説明的で一貫性のあるものにしてください
プロパティ名にはsnake_caseを使用してください
関連するコンテキスト（ID、名前、カテゴリなど）を含めてください
個人識別情報（PII）をトラッキングしないようにしてください

イベントプロパティでパスワード、クレジットカード番号、個人データなどの機密情報をトラッキングしないでください。

カスタムイベントの確認

カスタムイベントはドメインダッシュボードに表示されます。ドメインを開いてサイトをクリックし、関連するタブを使用してください：

Analytics タブ — ページビューや他の行動指標とともにイベント数を確認します
Revenue タブ — カスタムイベントから変換ファネルを構築し、目標達成をトラッキングします

イベントのデバッグ

ブラウザコンソールを使用してイベントトラッキングをデバッグします：

デバッグモードJavaScript

// デバッグモードを有効化
zenovay('debug');

// イベントをトラッキング（コンソールにログが出力されます）
zenovay('track', 'test_event', { debug: true });