2019-08-20 SEO

【Googleアナリティクス】10分で出来るイベントトラッキングの設定

土肥大夢 4

１：【確認】イベントトラッキング設定の前に

(Googleアナリティクスの設定が完了している方は2章へ進んでください)

イベントトラッキングを設定する前にGoogleアナリティクスをWebサイトに導入しましょう。

Googleアナリティクスの設定が行われていなければ、この後に解説するイベントトラッキングの設定が完了しても何も計測できません。

Googleアナリティクスアカウントを持っていなければ作成するところから、アカウントを持っているだけの方はWebサイトと紐づけるところから行いましょう。

１-１：Googleアナリティクスアカウントを作成

GoogleアナリティクスはGoogleアカウントを持っていればすぐに無料で開設することができます。

Googleアナリティクスアカウントを開設

１-２：トラッキングコードをWebサイト</head>直前に設置する

Googleアナリティクスアカウントを開設したら受け取れるトラッキングコード。

<!– Global site tag (gtag.js) – Google Analytics –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=UA-112925847-4″></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘トラッキングコード‘);
</script>

このトラッキングコードをWebサイト内の指定された位置(</head >直前)へ設置します。

この設置が完了すれば、基本的なアナリティクスが利用可能です。イベントトラッキングも正常に反応するようになります。

２：初心者向け！『analytics.js』を使ったイベントトラッキングの設定方法

Googleアナリティクスの設定が確認できたところで次はいよいよイベントトラッキングの設定です。

イベントトラッキングの設定方法はいくつかパターンがあります。

その中でもGoogleアナリティクス初心者の方におすすめしたいのが『analytics.js』です。Googleアナリティクスが推奨している方法で僕自身もこの方法が簡単だと感じています。

２-１：イベントトラッキングコードの基本形

イベントトラッキングを設定するにはトラッキングを行う対象のWebページと、次のトラッキングコードが必要です。

ga(‘send’, ‘event’, [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

これがイベントトラッキングを設定する際の基本形です。

“send”と”event”は固定で、その後ろの4つの単語は「イベントフィールド」と呼ばれ次のような役割を指定します。

フィールド名	値	必須	説明	例
eventCategory	テキスト	はい	ユーザーがクリックする対象のカテゴリー名	Video pc sp pdf movie link
eventAction	テキスト	はい	行動	play download click tel
eventLabel	テキスト	いいえ	イベント名	キャンペーン名ファイル名 PDF名動画ファイル名
eventValue	整数	いいえ	イベントに関連する数値	1(クリック) 1000(円)

このイベントフィールドをイベントごとに変更することで、該当するバナーのクリック数などのイベント発生数を計測することができます。

２-２：<実装編>イベントトラッキング

今回はバズったーが運営する『4nema.com』のスマホ画面についてくるバナーにトラッキングコードを設定してみます。

このバナーにどれくらいくのクリック数があるのかをトラッキングコードを設定することで計測ができるようになります。

① まずはトラッキングコードの基本形を変化させる

★基本形

ga(‘send’, ‘event’, [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

<a href=”#” onClick=”ga(‘send’,’event’,’sp’,’click’,’banner’);”><img src=”…png”></a>

いきなり対象のページにトラッキングコードを入れ込むのではなく、どこでもいいので一度基本形を崩して書き出すことをおすすめします。

初心者の方は特に一度書き出す方がミスなく組み立てやすいですね！

② トラッキングコードを設定するWebページのHTML部分を確認

<a href = “https://4nema.com/netflix-recommend-movie/” target=”_blank”><img src= “https://4nema.com/wp/wp-content/uploads/U-NEXT_31.jpg” alt = “U-NEXT”/></a>

上がトラッキングコードを設定する元のWebページ(HTML部分)です。

③ トラッキングコードを実装

ピンク色の線部分がイベントトラッキングコードになります。