脱初心者!Google Analytics活用法【イベントトラッキング・参照元(utm)】

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

機能豊富なGoogle Analyticsですが、画面も複雑で、サイトに計測タグ仕込んだだけでそのままな場合も多いのではないでしょうか。
一段階ステップアップして、イベントトラッキングと参照元の機能を使用してみましょう。
これらを活用すれば、より深い分析が可能です。

イベントトラッキング

イベントトラッキングとは?

イベントトラッキングを使用すると、サイト内にいるユーザーがどんな行動をとったかを知ることができます。
  • 事例ページからお問合せのボタンをクリックした
  • 特定のPDFを閲覧した
  • ファイルがダウンロードされた
  • 記事を最後まで読んだ
これらの回数をカウントしたり、金額の計算をしたり、任意の場所にイベントを設定できます。
この機能は、サイト内で完結します。

当社の公式サイトでは、「お問合せボタンを押した」「見積もりシミュレーションからお問合せページに遷移した」など、お問合せに直接つながるボタンにイベントを設定し、計測しています。

Google Analyticsでの実際の計測結果です。どのようなイベントが何回行われたかが表示されています。

使用方法

この機能を使用するには、イベントを設定したいボタンやリンクなどに専用のタグを追記する必要があります。追加するタグの基本的な構文は以下の通りです。

イベントハンドラ=”gtag(‘event’, ‘アクション‘, {‘event_category’: ‘カテゴリ‘,’event_label’: ‘ラベル‘,’value’: ‘‘});

この構文の赤文字の箇所を、任意の文字列や数値に変更して追加します。
例として、先ほど紹介した当社のお問合せボタンに設定しているイベントを見てみましょう。

イベントはonClickなので、クリックした時に発生するイベントです。
このボタンをクリックした時に、カテゴリやラベルの文字列を記録し、+1の値をカウントアップします。
それぞれ解説していきます。

イベントハンドラ

イベントハンドラは、「どの行動をきっかけに計測イベントを発生させるか」の設定です。
onClick 要素やリンクをクリックした時
onDblClick 要素をダブルクリックした時
onKeyUp 押していたキーをあげた時
onMouseOut マウスが離れた時
onMouseOver マウス乗った時
onMouseDown マウスでクリックした時
onLoad ページや画像の読み込みが完了した時
色々選べますが、onClick を覚えておけば大丈夫だと思います。

アクション

イベントを発生させた時に何が起こるかを記載します。
要素をクリックしたことでダウンロードするなら「download」、ページ遷移するなら「visit」や「link」など、と設定しましょう。
項目自体は必須ですが、内容は任意入力なので、めちゃくちゃな文字列でも構いません。あとで自分が見て分かりやすい内容にするのがいいと思います。

カテゴリ

アクションの対象を記載します。
アクションにlinkと入れたなら、遷移先の「contact」などと記載すると良いでしょう。
こちらも必須ですが、内容は自由に入力します。

ラベル

ラベルには、更に詳細な内容があれば記載します。
ボタン名やファイル名を記載するのが良いと思います。例では「画面サイドから問合せ押下」と入れています。
省略することもできます。

カウントアップする値を記載します。
回数をカウントしたいなら1と、金額などを追加したい場合は500などと入力します。

これらを踏まえて、例をいくつか用意しました。

問い合わせボタンを押下する計測


電話をかけた回数を計測


ZIPがダウンロードされた回数を計測


PDFの閲覧回数を計測


サンプルテキストにマウスオーバーした回数を計測


※読了率をカウントするには、JSを追加しなければいけないので、今回は割愛します。

動作の確認

タグを追加してファイルをサーバーにアップしたら、実際に動作しているか確認しましょう。
直近の動作確認には、リアルタイムページを使います。
サイドナビから[リアルタイム]>[イベント]のページを開き、アクティブユーザー数のTABLE表の上にある「イベント(直近の30分)」リンクをクリックします。

この表示を開いたままで、サイトに仕込んだイベントを発生させます。(当社の場合だと、お問い合わせボタンを押します。)
表に、発生させたイベントが表示されれば動作の確認はOKです。

計測データの確認方法

詳細な計測データは、イベントをサイトに仕込んだ翌日くらいには確認可能になります。
今度は行動ページを使います。
サイドナビから[行動]>[イベント]>[概要]のページを開くと、ページ下部に表示されます。


更に詳細を確認する場合は、「イベントラベル」などリンクをクリックすればそれに応じた内容が確認できます。

参照元(utm)

参照元とは?

参照元の機能を使用すれば、サイトに訪問したユーザーがどこからの流入したかを計測できます。
  • ランディングページからのクリック
  • 3月に出稿したSNS広告からのクリック
といった風に、より具体的に広告の効果測定などを行うことができます。
この機能は、外部からのアクセスに適用します。

例えば、SNSに自社サイトに宣伝を投稿するとします。
「当社の公式サイトです! https://8bit.co.jp/」とすることろを、
「当社の公式サイトです! https://8bit.co.jp/?utm_source=twitter」とします。
赤字の部分が追加になっています。

そして、誰かがこのリンクをクリックして当社の公式サイトに訪問すれば、追加した部分のパラメーターが計測され、Twitterからの訪問だと分かるようになります。

使用方法

SNSやWEB広告などで、外部に自分所有のサイトのURLを張る際に、URLの末尾にパラメーターを追加します。
基本的なパラメータのお作法ですが、パラメータ名と値を「=」で繋いでいきます。一つ目のパラメータの前には「?」を付けますが、二つ目以降は「&」で区切って繋げていきます。

そして、Goole Analyticsで使用するパラメータは、あらかじめ名前が決められています。
https://8bit.co.jp/?utm_source=twitter&utm_medium=display&utm_campaign=pr202203&utm_term=WEB制作&utm_content=banner_b

これで全部乗せの状態です。赤文字の箇所が、値になります。値は自分で設定する必要があります。
各パラメータを解説していきます。

utm_source

参照元の名称です。どこから流入したかを記載します。
具体的には、Google、Youtube、Twitter、Instagram、LINE などと記述します。例えば、Youtubeに広告を打つ際には「utm_source=Youtube」となります。
utm_source は必須の項目です。

utm_medium

参照元の一般的な分類を記載します。
具体的には、検索広告なら「CPC」、バナー広告なら「banner」などと記述します。
こちらも必須の項目です。

utm_campaign

キャンペーン名やページ名など、任意の名前を記載します。
2022年4月の春セールなら「202204_spring_sale」、LINE公式アカウントから配信したプロモーションコードなら「code_12345」などと記述します。
自由に自分で分かりやすい名前をつけましょう。
こちらも必須の項目です。

utm_term

キーワードを記載します。
例えば検索広告の設定で「WEB制作会社」と設定している広告であれば、「WEB制作」とそのまま記述すればOKです。
utm_term は任意の項目です。

utm_content

画像名などを記載します。
ABテストを行う際、複数のパターンが存在する場合に、どの画像がクリックされたか分かるようにします。
「banner_a」「banner_b」などと記述すればOKです。
こちらも任意の項目です。

これらを踏まえて、例をいくつか用意しました。
LINEでプロモーションコードを配信した

Youtubeでバナー広告を配信した

Googleで検索広告を配信した

メールマガジンを配信した


動作の確認

参照元の計測は、イベントハンドラのようにリアルタイムで確認することができないため、集客ページで閲覧します。
データが確認できるのは翌日以降となるため、実稼働させる数日前にあらかじめURLを発行して、動作確認を行う必要があります。

計測データの確認方法

詳細な計測データは、集客ページから閲覧します。
まず、サイドナビから[集客]>[すべてのトラフィック]>[参照元/メディア]のページを開きます。

グラフ下の、「セカンダリディメンション」から、確認したい項目を選択します。例えばキャンペーンを選択すると、「utm_campaign」の値でソートされます。

キャンペーンの値が確認できました。



執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

マークアップ

背景に画像や動画を置いてパララックス効果で見せる

サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。 簡単なものであれば簡単なcssで実現できます。 目次1 背景画像をパララックス効果で見せる1.1 DEMO1.2 HTML1.3 CSS 背景画像をパララックス効果で見せる DEMO See the Pen Untitled by kkdd (@kk8kk) on CodePen. なんとなくよく見る感じの表示になっていると思います。 HTMLとcss […]

スマホアプリ

Android Studioでベクター画像を登録しよう

Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。 そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。 Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。 簡単なので、早速進めてみましょう。 目次1 Android Studioを開こう2 ベクター画像の登録画面を開こう3 クリップ・アートで登録してみよう4 ロ […]

マークアップ

属性セレクターを使ってファイルごとにアイコンをつけよう!

例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。 ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。 そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。 早速属性セレクターを使ってみよう 属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。