• イベントをゴールとして設定しよう
• 設定の流れ
• 設定方法
• STEP１：プロジェクト設定画面で「ゴールの追加」を行う
• イベントで利用可能なパラメータ名について
• STEP2：イベントトラッキング設定（JavaScript）を行う
• 実装例①: GTMトリガーでクリックを検知しカスタムHTMLタグでCAイベントを送信する
• 実装例②: 高度な発火条件をカスタムHTML内にJSで記載する方法
• 実装例③: GTMを使わずHTMLファイルのaタグにonclickでJS記載する方法
• STEP3：ページレポート/コンテンツレポート確認

イベントをゴールとして設定しよう

• Content AnalyticsではURLの他にイベントをゴールとして設定可能です。
• イベントの利用にはGTMクリックトリガーなどの実装が必要です。 例えば、GTMクリックトリガーで特定のボタンを指定し、GTMカスタムHTMLタグ内で、JavaScriptの _ca 関数を使いContent Analyticsのサーバーにイベントを送信いただくことで、クリックなどのイベント計測が可能になります。
• イベントはカテゴリ単位・アクション単位・ラベル単位で目標を設定できます。
• 2023年8月現在、ゴール設定数に制限はございません。

設定の流れ

設定方法

STEP１：プロジェクト設定画面で「ゴールの追加」を行う

1. 左のナビゲーションメニューの「プロジェクト設定」を選択します。 「プロジェクト設定画面」の中にある、「ゴール一覧」メニューより「ゴールを追加する」ボタンを押下します。

2. 目標タイプに「イベント」を選択し、イベント条件を入力します。

イベントで利用可能なパラメータ名について

STEP2：イベントトラッキング設定（JavaScript）を行う

実装例①: GTMトリガーでクリックを検知しカスタムHTMLタグでCAイベントを送信する

1. トリガーの作成 「GTMトリガー > クリック > リンクのみ > 一部のリンククリック > Click Classes や Click ID」を選択し、計測したいボタンのclass、idを記載したトリガーを新規作成します。 例: GTMトリガーでclass「btn-summer-campaign」のボタンクリック時にタグを発火させる設定


※複数ページで同じclass名を流用している場合、上記設定だけでは全ページで計測されてしまいます。計測したいURLを絞りたい場合は「Page URL」などの条件を追加し、特定URLでのみクリック計測されるように設定ください。

2. タグの作成
• 「GTMタグ > カスタムHTML」を選択しタグを新規作成します。
• STEP1の「ゴールの追加」で設定したイベントカテゴリー・イベントアクション・イベントラベルの値を、GTMタグやJavaScript内で _ca 関数を使って記載します。
• 「1. トリガー作成」で作成したトリガーを選択しタグに紐づけてください。特定ボタンをクリックした時のみイベントが送信されるようになります。


カスタムHTML例1. 最低限必要なパラメータ例

Copy

<script>
_ca('event', {
  eventCategory: 'summer_campaign_bottom_cv_button', // ※STEP1「ゴールの追加」で設定した値に書き換えてください
  eventAction: 'click' // ※STEP1「ゴールの追加」で設定した値に書き換えてください
});
</script>

カスタムHTML例2. 全パラメータ記載例

Copy

<script>
_ca('event', {
  eventCategory: 'summer_campaign', // ※STEP1「ゴールの追加」で設定した値に書き換えてください
  eventAction: 'click', // ※STEP1「ゴールの追加」で設定した値に書き換えてください
  eventLabel: 'bottom_cv_button', // ※STEP1「ゴールの追加」で設定した値に書き換えてください
  eventValue: 123456 // ※STEP1「ゴールの追加」で設定した値に書き換えてください
});
</script>

• Google公式 クリック トリガー - タグ マネージャー ヘルプ

実装例②: 高度な発火条件をカスタムHTML内にJSで記載する方法

1. トリガーの作成: 配信したいURLのページビュートリガーを作成します。 例「GTMトリガー > ページビュー > Page URL > https://www.example.com/summer_campaign_lp/ 」
2. タグの作成 : 「GTMタグ > カスタムHTML」を選択し、独自の発火条件 & カスタムイベントをJavaScriptで記載します 例: カスタムHTMLタグ
Copy

<script>
// ※サイトでjQueryが利用できることが前提のコード

// 例: 上部バナークリック計測
// 高度な発火条件をJavaScirptで記載
$('a.banner_top').on('click', function () {
  // CAカスタムイベント
  _ca('event', {
    eventCategory: 'summer_campaign', // ※STEP1「ゴールの追加」で設定した値に書き換えてください
    eventAction: 'click', // ※STEP1「ゴールの追加」で設定した値に書き換えてください
    eventLabel: 'top_cv_button' // ※STEP1「ゴールの追加」で設定した値に書き換えてください
  });
});

// 例: 下部バナークリック計測
// 高度な発火条件をJavaScirptで記載
$('a.banner_bottom').on('click', function () {
  // CAカスタムイベント
  _ca('event', {
    eventCategory: 'summer_campaign', // ※STEP1「ゴールの追加」で設定した値に書き換えてください
    eventAction: 'click', // ※STEP1「ゴールの追加」で設定した値に書き換えてください
    eventLabel: 'bottom_cv_button' // ※STEP1「ゴールの追加」で設定した値に書き換えてください
  });
});

// 例: 下部バナーをマウスホバー時に発火する計測
// 高度な発火条件をJavaScirptで記載
$('a.banner_bottom').on('mouseenter', function () {
  // CAカスタムイベント
  _ca('event', {
    eventCategory: 'summer_campaign', // ※STEP1「ゴールの追加」で設定した値に書き換えてください
    eventAction: 'hover', // ※STEP1「ゴールの追加」で設定した値に書き換えてください
    eventLabel: 'bottom_cv_button' // ※STEP1「ゴールの追加」で設定した値に書き換えてください
  });
});

</script>

実装例③: GTMを使わずHTMLファイルのaタグにonclickでJS記載する方法

<!-- 変更前HTMLコード -->
<a href="order.html">購入はこちら</a>

↓

<!-- 変更後HTMLコード -->
<a href="order.html" onclick"_ca('event', { eventCategory: 'summer_campaign_button', eventAction: 'click' });">購入はこちら</a>
<!-- ※ // ※STEP1「ゴールの追加」で設定した値に書き換えてください -->

STEP3：ページレポート/コンテンツレポート確認