カスタムイベントをゴールに設定しよう

カスタムイベントを実装することで、画像系ボタンなど、デフォルト機能では計測できないクリックイベントや、特定のコンテンツ表示イベントなど、任意のカスタムイベントをゴールとして設定することができるようになります。

なお、任意のカスタムイベントをゴールに設定する場合は、Javascriptを用いてイベントトラッキングコードを記述する必要があります。

このページでは、任意のクリックイベントをゴール設定する場合の設定例についてご紹介致します。

設定の流れ

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

Content Analyticsでゴール設定画面を開き、[ゴールを追加]をクリックします。

[目標名]に任意の名前をつけ、[目標タイプ]で[イベント]を選択します。

[イベント条件]は、下部の表を参考にパラメータ名を入力してください。

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

Google Analytics (以下GA) のパラメータ名を模した4項目が利用可能です。GAのイベントトラッキングと同じパラメータ設計でご利用ください。

パラメータ名	値の入力形式	必須	説明
eventCategory	文字列	必須	link, button, など対象オブジェクトを表すワードや、キャンペーン名を設定することを想定例: summer_campaign, summer_campaign_bottom_banner
eventAction	文字列	必須	対象オブジェクトの動作を表すワードを設定することを想定例: click, play, hover, download
eventLabel	文字列	省略可※	イベントの分類を表すワードを設定。例: bottom_banner など。
eventValue	半角数値	省略可※	数値入力が可能です。例えば購入金額をセットし「購入金額が10,000円以上」といった設定が可能です。通常は省略されることが多いです

※ eventCategory, eventActionだけでイベント値を管理できない場合を考慮して、eventLabel, eventValueを用意しています。必要なければ、省略可能です。

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

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

最初に、GTMクリックトリガーを利用する最も一般的な実装方法を紹介します。トリガーとタグを新規作成し、イベントを発生させたい特定のボタンがクリックされた時にCAイベントタグが配信されるようにします。

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

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

タグの作成

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

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

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

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

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

補足: 作成済みのGTMトリガーが使い回せる可能性があります

GTMトリガーとJavaScriptイベント送信関数(_ca)を使った実装方法は、ContentAnalyticsに限らず、Google Analytics(ga関数)、GA4(gtag関数)、KARTE(krt関数)など、多くのツールで共通の実装方法です。そのため、すでに別ツール用に計測対象ボタンのGTMクリックトリガーを実装済みの場合、そのまま既存トリガーを選択するだけで設定は完了となります。

補足: GTMトリガーはClass名やID名以外にも様々な指定が可能です。 詳細は以下参考サイトをご確認ください。

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

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

GTMトリガーでは設定できない高度な計測を行いたい場合、発火条件をJavaScriptで記載することで可能になります。例えば、動的に切り替わる要素のクリック計測、マウスホバー時にイベント送信する実装などが可能になります。設定例を紹介します。

トリガーの作成: 配信したいURLのページビュートリガーを作成します。

例「GTMトリガー > ページビュー > Page URL > https://www.example.com/summer_campaign_lp/ 」

タグの作成 : 「GTMタグ > カスタムHTML」を選択し、独自の発火条件 & カスタムイベントをJavaScriptで記載します例: カスタムHTMLタグ

<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でJavaScriptを記載する方法

GTMを使わずにサーバーのHTMLファイルを直接編集する方法です。HTMLソースコード内のaタグにonclick属性を追加し、JavaScriptで _ca 関数を記載してください。

実装例:

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

↓

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

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

設定完了時からゴールの計測が開始され、翌日からレポートを確認することができます。

必ずテストコンバージョンを実施し、翌日以降にゴールが計測されていることを確認してください。

パターンA カスタムイベント