【図解】どのリンクがクリックされているか計測!Googleアナリティクスのイベントトラッキングの設定と使い方。計測できない場合の対処方法も紹介

Googleアナリティクスのイベントトラッキングの設定と使い方 サイト作成に役立つツール・素材・HTML・CSS

Googleアナリティクスの「イベントトラッキング」を使ってどのページのリンクがどれくらいクリックされたのか?を調べることができます。

例えば1ページに複数の内部リンクやアフィリエイトリンク設置しているけど「どの位置のリンクがクリックされているか?」「ボタンとテキストどっちがクリックされているか?」などあれこれテストしてみると楽しいです。

ネット上では「◯◯した方がクリック率が良い」とか「バナーよりもテキストが良い」など色々な情報がありますが、実際に自分でテストしてみると全く違う結果になることがほとんどです。人の意見は鵜呑みにせずに自分で実際に計測してみて下さい。

著作情報
この記事を書いた人

WEBエンジニア11年目。これまでに100を超えるサイトの立ち上げや運営に携わり、2017年に法人化。カスタマイズ、デザイン、ツール作成、サイト移転まで何でもこなします。

sigezoをフォローする

まずは計測タグの種類を判別しよう

アナリティクスの計測タグには新しいやつ(gtag.js)と古いやつ(analytics.js)があって、それぞれで計測タグの記述が異なります。

検索して調べた記述でイベントトラキングが反映されないとか計測されないというケースが多いのはこのためです。

ということで自分の利用している計測タグがどっちなのか?を調べるところからスタートします。

まずは新規記事を作成して以下2つ(タイプ1とタイプ2)のリンクをコピペして下さい。

■タイプ1(gtagタイプ)

<a href="https://www.yahoo.co.jp/" onclick="gtag('event', 'click', {'event_category': 'タイプ1','event_label': 'テスト1'});">タイプ1</a>

■タイプ2(gaタイプ)

<a href="https://www.yahoo.co.jp/" onclick="ga('send','event','タイプ2','click','テスト2');">タイプ2</a>

追加できたら「下書きで保存」してプレビュー画面で先程追加した2つのリンクをクリックして下さい。

イベントトラッキングの使い方と計測されない場合の対処1

Googleアナリティクスの管理画面へ行き、リアルタイム⇒「イベント」を選択し、「イベント(直前の 30 分間)」をクリックするとどっちかのタイプ(タイプ1かタイプ2)かが反映されているはずです(クリックしてから10秒前後のタイムラグがあるときもあります)。

イベントトラッキングの使い方と計測されない場合の対処3

  • タイプ1と表示されている:gtagタイプ
  • タイプ2と表示されている:gaタイプ

となります。このサイトはタイプ1が反映されているのでgtagタイプということになります。

これでどっちのタグの記述をしたら良いのかが分かります。反映された方を利用していきます。

イベントトラキングが計測できない!など反映されない場合

タイプ1とタイプ2をクリックしたけど、どっちも反映されないという場合に考えられる原因は2つ。

  • 計測にサイト管理者(自分)が含まれてない
  • 計測タグなどにミスがある

計測にサイト管理者(自分)が含まれてないケース

Cocoonなどのテーマを利用している場合はアクセス解析の設定でサイト管理者(自分)を含めるかどうかという設定がありますので、こちらにチェックを入れて保存して下さい(どっちのタイプか分かった後にはまた元に戻してOKです)。

「Cocoon設定」⇒「アクセス解析・認証」⇒「サイト管理者も含めてアクセス解析する」にチェックを入れる。

イベントトラッキングの使い方と計測されない場合の対処2

保存したら再度下書きしたページを開いて「一度リロード(再読み込み)」してからクリックして反映されるかチェックして下さい。

※フィルタ設定で除外するケースも自分のクリックが上手く反映されないケースがあるかもしれません。

計測タグなどにミスがあるケース

計測タグにミスがあるとイベントトラッキングも正常に計測できません。

アナリティクス「設定」から⇒「トラッキング情報」⇒「トラッキングコード」をクリック。

イベントトラッキングの使い方と計測されない場合の対処7

「テストトラフィックの送信」をクリック。

イベントトラッキングの使い方と計測されない場合の対処5

で、一度「リアルタイム」に戻っての概要選択すると「analytics_test」というのが計測されてます。

イベントトラッキングの使い方と計測されない場合の対処6

「analytics_test」が計測されない場合はトラッキングコードが正しく設定されてませんので再度確認をしてみて下さい。

イベントトラッキングの設定方法を覚えよう

タイプ別にリンクを作成します。

イベントトラッキングのタグでは「アクション」「カテゴリー」と「ラベル」を設定できます。

■タイプ1(gtagタイプ)

<a href="https://www.yahoo.co.jp/" onclick="gtag('event', 'アクション(設定できる)', {'event_category': 'カテゴリー名(設定できる)','event_label': 'ラベル名(設定できる)'});">タイプ1</a>

■タイプ2(gaタイプ)

<a href="https://www.yahoo.co.jp/" onclick="ga('send','event','カテゴリー名(設定できる)','アクション(設定できる)','ラベル名(設定できる)');">タイプ2</a>

例えば

  • カテゴリー:記事名が分かる名前やURLなど
  • アクション:クリックとかダウンロードとか
  • ラベル:リンクの場所や種類

という感じに設定しておけばどの記事でどのリンクがクリックされたのか?が計測できます。

試しにテスト記事で複数のリンクにイベントトラッキングのタグを仕込んでおくとこんな感じに計測されます。

↓テスト記事の4つのクリックが発生してます。
イベントトラッキングのテスト方法3

↓イベントカテゴリーの記事名(テスト記事)をクリックするとラベルが確認できます。
イベントトラッキングのテスト方法4

実際にイベントトラッキングコードを追加する手順

それではそれぞれのタイプ別にリンク作成例を見ていきます。

先程の例のように「イベントカテゴリーに記事名」「ラベルにリンクの場所や種類」などを設定する例です。

タイプ1(gtagタイプ)のリンク作成

基本的にはaタグ(a href=”URL”)の後ろに半角空けてイベントトラッキングのコード(onclick~)を入れたらOKです。rel属性(rel=”nofollow”など)との順番も特に気にしなくてOKです。

WordPressの方はイベントトラッキングのコード部分(onclick~)をAddQuicktagに登録しておけば簡単に挿入できます。

1.基本のリンク

<a href="https://◯◯◯◯" onclick="gtag('event', 'click', {'event_category': '記事名','event_label': 'リンクのタイプや場所'});">テキスト</a>

2.別窓で開くなど

<a href="https://◯◯◯◯" onclick="gtag('event', 'click', {'event_category': '記事名','event_label': 'リンクのタイプや場所'});" target="_blank" rel="noopener">テキスト</a>

3.アフィリエイトリンクなどの場合

<a href="https://px.a8.net/svt/ejp?a8mat=◯◯+◯◯◯" onclick="gtag('event', 'click', {'event_category': '記事名','event_label': 'リンクの場所や種類'});" rel="nofollow">テキスト</a><img decoding="async" loading="lazy" border="0" width="1" height="1" src="https://www10.a8.net/0.gif?a8mat=◯◯◯◯" alt="">

アフィリエイトリンクの場合はaタグ(a href~)の後にimgタグがくっついてますが、基本通りにaタグの後に半角開けてトラッキングコードを入れたらOKです。

※アフィリエイトリンクは改変は自己責任でお願いします。

タイプ2(gaタイプ)のリンク作成

1.基本のリンク

<a href="https://◯◯◯◯" onclick="ga('send','event','テスト記事','click','リンクのタイプや場所');">テキスト</a>

2.別窓で開くなど

<a href="https://◯◯◯◯" onclick="ga('send','event','テスト記事','click','リンクのタイプや場所');" target="_blank" rel="noopener">テキスト</a>

3.アフィリエイトリンクなどの場合

<a href="https://px.a8.net/svt/ejp?a8mat=◯◯+◯◯◯" <a href="https://◯◯◯◯" onclick="ga('send','event','テスト記事','click','リンクのタイプや場所');">テキスト</a> rel="nofollow">テキスト</a><img decoding="async" loading="lazy" border="0" width="1" height="1" src="https://www10.a8.net/0.gif?a8mat=◯◯◯◯" alt="">

という感じですね。

まずは実際にやってみてあれこれアレンジして使ってみて下さい。

アフィリエイトの始め方と稼ぐ方法まとめ
アフィリエイトの始め方から稼ぎ方を初心者向けに書いている記事のまとめページです。...

コメント