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

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タグ」にイベントトラッキングコードを追加してみましょう。

<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ボタンを計測する場合の例を見てみると……

<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ボタンのクリックと、ひと目で識別する事ができます。

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

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

計測を確認するには？

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

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

③アナリティクスでトラッキングコードが有効か確認します。「アナリティクス＞リアルタイム＞概要」と進み、自分のアクセスが計測されていればOK。

④アナリティクスでイベントトラッキングコードが有効か確認します。「アナリティクス＞行動＞イベント＞概要」と進んだページで、クリックから5～10分後に計測が表示されます。

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

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

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

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

スペルミスはないか？

クリックしてから5分～10分以上待ったか？

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

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

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

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