バズログ BUZZLOG

MENU

SEO

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

土肥大夢 4

目次

『Googleアナリティクスのイベントトラッキングの設定方法が知りたい!』

イベントトラッキングの設定方法は少しややこしいですが、初心者でも難しいものではありません。

一度設定してしまえばWebサイトを閲覧しているユーザーの行動を知ることができ、今後の集客や導線改善に役立てることができます。

そこで今回はGoogleアナリティクス初心者でもわかるイベントトラッキング設定方法を解説します。

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

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

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

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

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

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

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

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

1-2:トラッキングコードを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 >直前)へ設置します。

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

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

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

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

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

2-1:イベントトラッキングコードの基本形

イベントトラッキングを設定するにはトラッキングを行う対象の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(円)

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

2-2:<実装編>イベントトラッキング

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

1

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

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

基本形

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

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

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

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

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

2

<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部分)です。

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

<a href = “https://4nema.com/netflix-recommend-movie/” target=”_blank” onClick=”ga(‘send’,’event’,’sp’,’click’,’banner’,’1’);”><img src= “https://4nema.com/wp/wp-content/uploads/U-NEXT_31.jpg” alt = “U-NEXT”/></a>

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

2-3:イベントトラッキングの計測結果を確認

①  アナリティクスTOPページから”行動”を選択

結果1

 

②  “イベント”を選択

結果2

③  “概要”でイベントトラッキングの計測結果を見ることができます

結果③

  • 合計イベント数→イベントの発生数
  • ユニークイベント数→1ユーザーを1と計則。同じユーザーが同じイベントにきてもカウントされない
  • イベントの値→イベントに設定した数値×イベント発生回数(今回なら1で設定しているので100回イベントが発生すれば100と表示されます)

3:イベントトラッキング設定→目標の設定

イベントトラッキングの設定が完了し、ユーザーの行動を計測できるようになったら次は目標設定を行います。

Googleアナリティクス内で目標を設定することでコンバージョン数などを計測することができるようになるので欠かしてはいけない設定です。

3-1:目標の設定はたったの3STEP

<STEP1>Googleアナリティクス左下”設定マーク”を選択→“目標”を選択

目標1

<STEP2>”新しい目標”を選択

目標2

<STEP3>”カスタム”にチェックを入れて“続行”を選択

目標3

<STEP4>イベント条件を設定し”保存”で目標の設定完了

イベント条件はイベントトラッキングと同じ内容を設定すればOKです。

目標4

4:イベントトラッキングが計測されない!2つ原因と対処法

「イベントトラッキングを設定しているのにGoogleアナリティクス内で計測されてない!」

この原因は、次の2つが考えられます。

  • GoogleアナリティクスがWebサイトと結び付けられていない
  • イベントトラッキングコードにミスがある

4-1:GoogleアナリティクスがWebサイトと結び付けられていない

1章でもお伝えしている通り、Googleアナリティクスアカウントを開設するだけではダメです。Webサイトと紐づけなければイベントトラッキングも計測ができません。

1章でイベントトラッキングの前に確認するポイントを解説していますので、飛ばした方は戻って確認してください。

4-2:イベントトラッキングコードにミスがある

イベントトラッキングコードは「スペルミス」「コンマ(,)」が一つ抜けているだけでも正常に計測されません。イベントトラッキングコードの基本形を見ながら再度HTML に入力しなおしてみましょう。

基本形

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

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

5:Googleタグマネージャを使えばイベントトラッキングは簡単に設定できる

『Googleタグマネージャ』というツールを使っても、イベントトラッキングの設定が可能です。

  •  HTMLをいじる必要がない
  • 公開前にテストができる
  • Webサイトの高速化ができる

Googleタグマネージャを利用してイベントトラッキングコードを設定することでこのようなメリットがあります。

ただし、タグマネージャを利用するにはWebサイトへ紐づける作業がまた増えるので初心者にはおすすめしません。無理せず『analytics.js』を使って設定をしましょう。

5-1:GoogleタグマネージャをWebサイトへ紐づけ

①Googleタグマネージャへログイン

②コンテナを新規作成

紐付け1

 

③コンテナ名を入力し”作成”を選択

紐付け2

④GoogleタグマネージャのコードをWebサイトの指定された位置へコピー&ペースト

紐付け3

5-2:Googleタグマネージャからイベントトラックングの設定をしよう

①GoogleタグマネージャTOPページより“タグ”を選択し右上”新規”を選択

gtm1

②「タグタイプ」を“Googleアナリティクス・ユニバーサルアナリティクス”に設定

gtm2

③タグの設定

gtm3

④トリガーの設定

gtm5

⑤最後に”保存”を選択したら外部リンクのイベントトラッキング設定が完了です。

外部リンクへのイベントトラッキングの設定はこのまま真似をしてOK です!

gtm5

まとめ

イベントトラッキングの設定はWebサイトを管理する方なら必ずできておきたい設定です。

この設定を行うだけで、Webサイトへ訪れたユーザーがどのような動きをしているのかを知ることができます。イベントトラッキングはコンバージョンへの導線の改善や、バナーの設置する場所など細かい部分で役に立つので欠かせない設定なのです。

GoogleアナリティクスでPV 数だけを見るのではなく、Webサイトを訪れるユーザーの行動まで知ってコンバージョンへ繋げていきましょう。

会社案内・解説資料はこちら!

資料をダウンロードする ▷
  • このエントリーをはてなブックマークに追加

  • 4

    • このエントリーをはてなブックマークに追加
    目次

    関連記事