Googleアナリティクスのイベントトラッキング設定方法

Googleアナリティクスのイベントトラッキングの実装方法を解説します。

Googleアナリティクスのイベントトラッキング実装方法

【gtag.js】

【埋め込みコード】

onclick="gtag('event', 'アクション',{'event_category': 'カテゴリ', 'event_label': 'ラベル', 'value': '値'});"

【埋め込みコード】

onclick="gtag('event', 'クリック',{'event_category': '資料ダウンロード', 'event_label': this.href, 'value': '100'});"

【ユニバーサルアナリティクス】

【埋め込みコード】

onclick="ga('send','event','カテゴリ','アクション','ラベル');"

※コードをコピー＆ペーストした際に、仕様上シングルクオーテーションやカンマなどが全角になってしまうかもしれません。ご注意ください。全角部分（主に記号）を半角になおすときちんと計測されます。

実装手順

「上記の説明だけでは足りない」という方のために、もう少し詳しく解説します。

イベントトラッキングで計測できること

• リンクボタンなどのクリック動作
• 電話のタップ動作
• PDF資料などのダウンロード
• 動画再生

Googleアナリティクスのバージョン確認

イベントトラッキングを設定する際には、コードの実装前に計測したいWebサイトのアナリティクスのバージョンを確認する必要があります。下記が目印です。

ただ、下記2つ以外にも種類があるので、古いWebサイトの場合は注意です。

【gtag.js】2017年～

<!-- Global site tag (gtag.js) - Google Analytics -->

【ユニバーサルアナリティクス】

(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

Chrome検証ツール（デベロッパーツール）を使用したリアルタイム計測チェック

実際にコードを埋め込む前にChromeの検証ツール（デベロッパーツール）などで計測確認をしておきましょう。

あわせて読みたい

Chromeの検証ツール（デベロッパーツール） の使い方 Chromeの検証ツール（デベロッパーツール）を使用して、試験的にWebサイトのHTML・CSSを変更する方法を解説します。 【とっても便利なChromeの検証ツール（デベロッパー...

イベントトラッキングコードの解説

コードの各要素について

onclick="gtag('event', 'アクション',{'event_category': 'カテゴリ', 'event_label': 'ラベル', 'value': '値'});"

上記コード内の日本語部分は、「Googleアナリティクス内でどんな文字列として計測されるか」のためにある部分なので、自由に設定できる箇所です。

【アクション】と【カテゴリ】は必須で、
【ラベル】と【値】は任意項目です。

そのため、【ラベル】や【値】がいらない場合には【カテゴリ】と【アクション】だけでも大丈夫です。

onclick="ga('send','event','カテゴリ','アクション');"

たとえば、スマートフォンでの電話動作をイベントトラッキングで設定したいとします。

その場合の実装手順は以下のようなかんじです。

1. イベントトラッキングを設定したい箇所を確認する。（ヘッダー部分の電話アイコンの箇所、など）
2. Googleアナリティクスのバージョン確認
3. Googleアナリティクスのバージョンに合わせたコードを実装

たとえば、電話の場合、ヘッダー部分とフッター部分にアイコンがあったとします。

その際に、
以下のように設定しても良いかもしれません。

必須項目ではなく、明確なルールがあるわけでもないので、管理しやすいルールをご自身で決めるのが良いです。

※「this.href」については、JavaScriptの変数になっており、設定したい項目が複数ある場合に便利です。「this.href」を設定する場合は、「this.href」部分は”（シングルクオーテーション）で囲みません。

【値】に関しては、イベント要素の価値を数値として把握するために設定します。主にはGoogleアナリティクス上で効果測定を行うために設定します。

Googleアナリティクス上での確認方法

行動＞イベントで確認可能です。

まとめ

以上がGoogleアナリティクスのイベントトラッキングの設定方法になります。

設定項目がいくつかあるので「めんどくさい」と感じるかもしれませんが、イベントトラッキングなど、こういった設定をしっかりと行うことで、Webサイトの分析がより効果的にできるようになります。ぜひ設定しましょう。