クリックを計測!
Google Analyticsでのイベントトラッキングのやり方

2019-01-12

SNSボタンや広告バナーのクリック数を計測するには、Googleアナリティクスのイベントトラッキングコードを使うとカンタンに実装できます。

クリック数を計測したい要素に計測用コードを埋め込むだけ。

あとは、Googleアナリティクスでクリック数を自動で集計してくれます。

ここでは、Googleアナリティクスでクリック数を計測するための、イベントトラッキングコードを実装する手順を見ていきましょう。

\項目をタップするとジャンプできます/

Googleアナリティクス
イベントトラッキングのポイント

Googleアナリティクスのイベントトラッキングコードを使う上で、押さえておきたいポイントは2つ。

アナリティクスのトラッキングコードとセットで使う

Googleアナリティクスで計測していないページで、Googleアナリティクスのイベントトラッキング機能は使えません。

Googleアナリティクスでクリック数を計測する時は、アナリティクスのトラッキングコードをセットしてから使いましょう。

コードのバージョンを合わせる

Googleアナリティクスのトラッキングコードには、新旧の異なったバージョンがあります。

イベントトラッキングコードも、それに合わせた新旧のバージョンがあります。

コードは新旧で互換性がないため、旧式トラッキングコードを使っているページで新式イベントトラッキングコードを記述しても計測できません。

旧式トラッキングコードを使っているなら、旧式イベントトラッキングコードを。

新式トラッキングコードを使っているなら、新式イベントトラッキングコードを使います。

アナリティクスのトラッキングコード内に「gtag.js」と記述があれば新式、「analytics.js」と記述があれば旧式です。

POINT 2019年以降にアナリティクスを使い始めたなら、デフォルトで新式(gtag.js)になっているので、イベントトラッキングコードも新式を使います。

さらに、イベントトラッキングで覚えておきたいポイントも2つ。

計測には時差がある

イベントトラッキングコードを設置したあと、Googleアナリティクスで計測・確認できるまでには、少し時間がかかります。

クリック後、5分~10分ほど待ちましょう。

計測には誤差がある

javascriptのonclickは、端末ごとに多少の誤差が出るようです。

onclickは元々PCのクリックを計測するハンドラなので、スマホのタッチを時々取りこぼすなど、実際のクリック数と数が合わない時もあります。

イベントハンドラは他にも種類はありますが、もっとも汎用性の高いonclickが使われる事が多いようです。

イベントトラッキングの実装の仕方

Googleアナリティクスで計測してるいるページで、クリックを計測したい要素(リンクなど)に、イベントトラッキングコードを追加します。

ここでは、新式(「gtag」版)で見ていきます。

イベントトラッキングコード

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

このコードを、計測したいリンクに埋め込みます。

「aタグ」にイベントトラッキングコードを追加してみましょう。

HTML

<a href="https://リンク先URL/" onclick="gtag('event', 'アクション', {'event_category': 'カテゴリ','event_label': 'ラベル','value': '値'});">ここをクリック</a>

「gtag(~);」内には必ず入れる必須のタグ、あってもなくてもOKなタグとがあります。

'event'
 必須。ここは「event」のままいじらない。

'アクション'
 必須。名称変更OK。どんな動きを計測するか、自分でわかりやすい名称を入れます。

'event_category': 'カテゴリ'
 任意。あってもなくてもOK。名称も自分で変えられる。

'event_label': 'ラベル'
 任意。あってもなくてもOK。名称も自分で変えられる。

'value': '値'
 任意。この動きで発生する数値を整数で入れられる。

必須なのは「gtag('event','アクション');」のみですが……

計測ページはデフォルトではカテゴリで分類されており、カテゴリが設定されていない場合は「general」と表示されます。

これだと、何がクリックされたのか分かりづらいですよね。

カテゴリとラベルには、分かりやすい名称をつけておくと管理しやすくなります。

特にラベルには、どのリンクかを識別する名前をつけておくと、より細かく識別することができて便利です。

SNSボタンを計測する場合の例を見てみると……

HTML

<a href="リンク先URL" onclick="gtag('event', 'click', {'event_category': 'sns_button','event_label': 'Twitter'});">
SNSボタン
</a>

カテゴリーには「'event_category': 'sns_button'」

ラベルには「'event_label': 'Twitter'」とすることで、SNSボタンの中のTwiterボタンのクリックと、ひと目で識別する事ができます。

また、イベントトラッキングは画像リンクでも使えます。

HTML

<a href="リンク先URL" onclick="gtag('event', 'click', {'event_category': 'img_link','event_label': 'img1'});">
<img src="画像.png">
</a>

計測を確認するには?

①トラッキングコードとイベントトラッキングコードを書いたページを、サーバーにアップします。

②イベントトラッキングコードをつけたリンク等を実際にクリックしてみます。

③アナリティクスでトラッキングコードが有効か確認します。

「アナリティクス>リアルタイム>概要」と進み、自分のアクセスが計測されていればOK。

④アナリティクスでイベントトラッキングコードが有効か確認します。

「アナリティクス>行動>イベント>概要」と進んだページで、クリックから5~10分後に計測が表示されます。

クリックが計測されない時に確認すること

コードを埋め込んでみたものの、クリックが計測されない、という時は以下を確認してみましょう。

head内にトラッキングコードは貼られているか?

トラッキングコードとイベントトラッキングコードのバージョンは合っているか?

スペルミスはないか?

クリックしてから5分~10分以上待ったか?

計測確認ページ(アナリティクス>行動>イベント>概要ページ)で、日付(表示期間)に当日が含まれているか?

アナリティクスの計測ページでは、日付(表示期間)はデフォルトでは昨日までになっていたりするので、計測されない、という時は一度確認してみましょう。

はじめてイベントトラッキングコードを実装する時は、慣れないコードや計測で、ちょっとあたふたする事もあります。

実際にサイトに組み込む前に、簡易なテストページで試してみると、落ち着いて対処できておすすめです。