- イベントをゴールとして設定しよう
- 設定の流れ
- 設定方法
- STEP1:プロジェクト設定画面で「ゴールの追加」を行う
- イベントで利用可能なパラメータ名について
- 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月現在、ゴール設定数に制限はございません。
設定の流れ
設定の流れは3STEPあります。
設定方法
それでは、実際に設定してみましょう!
STEP1:プロジェクト設定画面で「ゴールの追加」を行う
- 左のナビゲーションメニューの「プロジェクト設定」を選択します。 「プロジェクト設定画面」の中にある、「ゴール一覧」メニューより「ゴールを追加する」ボタンを押下します。
- 目標タイプに「イベント」を選択し、イベント条件を入力します。
イベントで利用可能なパラメータ名について
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を用意しています。必要なければ、省略可能です。
STEP2:イベントトラッキング設定(JavaScript)を行う
実装例①: GTMトリガーでクリックを検知しカスタムHTMLタグでCAイベントを送信する
最初に、GTMクリックトリガーを利用する最も一般的な実装方法を紹介します。 トリガーとタグを新規作成し、イベントを発生させたい特定のボタンがクリックされた時にCAイベントタグが配信されるようにします。
- トリガーの作成 「GTMトリガー > クリック > リンクのみ > 一部のリンククリック > Click Classes や Click ID」を選択し、計測したいボタンのclass、idを記載したトリガーを新規作成します。 例: GTMトリガーでclass「btn-summer-campaign」のボタンクリック時にタグを発火させる設定
- タグの作成
- 「GTMタグ > カスタムHTML」を選択しタグを新規作成します。
- STEP1の「ゴールの追加」で設定したイベントカテゴリー・イベントアクション・イベントラベルの値を、GTMタグやJavaScript内で
_ca
関数を使って記載します。 - 「1. トリガー作成」で作成したトリガーを選択しタグに紐づけてください。特定ボタンをクリックした時のみイベントが送信されるようになります。
※複数ページで同じclass名を流用している場合、上記設定だけでは全ページで計測されてしまいます。計測したいURLを絞りたい場合は「Page URL」などの条件を追加し、特定URLでのみクリック計測されるように設定ください。
カスタム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名以外にも様々な指定が可能です。 詳細は以下参考サイトをご確認ください。
実装例②: 高度な発火条件をカスタムHTML内にJSで記載する方法
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でJS記載する方法
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:ページレポート/コンテンツレポート確認
レポートのゴールプルダウンをゴールイベントに変更し、コンバージョンをご確認ください。
※イベント発生からレポートに反映されるまで30分~1時間かかります。