Googleアナリティクスは、非常に高度な分析ができる無料のアクセス解析ツールだが、正式なサポートがない。本連載では、その導入から、運用、活用まで、初めての人でもゼロから学んでいけるように、丁寧に解説していく。
eコマースサイトなどでは、商品をカートに投入してから購入までの間に、少なくとも初回購入時には、名前、住所、メールアドレス、クレジットカード番号などの各種情報を入力したり、入力内容の確認作業をしたりしなければならない。
ユーザーのうち、一定の割合は、この手続きが面倒で、途中でやめてしまうことがある。いわゆる「脱落」だ。
どのステップ（ページ）で脱落したかを知りたいときは、Google アナリティクスの「目標到達プロセス」レポートを設定すれば、どのページで動きが止まったのかを簡単に知ることができる。詳しくは以下の過去記事を参照してほしい。
しかし、Web解析担当者としては、ページ単位ではなく、各ページの入力フォームのどこで入力を諦めてしまったのかまで知りたい、というのが本音ではないだろうか。
そこで今回は、入力フォームのあるページで、どの入力項目までユーザーが入力を試みたかというデータを、イベントトラッキングで取得するカスタマイズをしてみたい。
まずは課題を設定しよう
※今回もイメージしやすいように、実際のサイトを例としてあげるが、筆者は該当企業とは無関係の第三者であり、また本稿で紹介するGoogle アナリティクスのデータは架空のものである。
図1、図2は「サントリーウエルネスOnline」で、ある商品を選択して注文手続きへ進んだページの一部だ。
この例（図1）のように、初めのステップでまとめて情報入力をさせて、次のステップは最終確認させて終わる、実質2ステップの購入プロセスである場合が多い。
ただ、ステップ数を減らすと、逆に最初の「注文内容の入力」ステップの入力フォーム（図2）では一度に多くの情報を入力させることになる。
実際のページでは、図2のお客様情報の入力フォームの下に、
- 注文した商品情報の表示
- 届け先情報の入力部分
- ギフト指定
- 支払い方法の入力
- 配送日時指定
などが続いていて、ユーザーが入力や選択しなければならない項目は非常に多い。
販売者側としては、入力フォームにおける入力項目はぎりぎり絞り込んでいるつもりだが、入力項目が増えれば、それに比例して、面倒くさいと感じたユーザーの脱落も増える。
まずは、この入力フォームで、ユーザーがどこまで入力を試みたかを調べたいと考えているとしよう。
入力フォームで、ユーザーがどこまで入力を試みたかを調べたい
トラッキングコードの実装例
例として見せた入力フォームは入力項目も多く、複雑なので、説明の都合上、ここからは単純化した上で、トラッキングコードの実装例を紹介しよう。入力項目は、図3のように、
- 社名
- 名前
- 住所
の3つあり、すべて入力必須項目だったとしよう。
ここでは、それぞれの入力項目にカーソルを合わせて、文字を入力しようとしたら、それぞれのイベントが計測されるような実装を行う。
今回は入力項目が3つしかないので、図3のソースコードを全部記載してみる。赤字部分が追記するトラッキングコードの箇所だ。
<p>社名：<input type="text" size="30" name="company" value=""onfocus="_gaq.push(['_trackEvent', 'input', 'form1', '1company', , true]);"></p><p>
名前：<input type="text" size="30" name="name" value=""onfocus="_gaq.push(['_trackEvent', 'input', 'form1', '2name', , true]);"></p><p>
住所：<input type="text" size="30" name="address" value=""onfocus="_gaq.push(['_trackEvent', 'input', 'form1', '3address', , true]);"></p>今回は、該当要素が「フォーカス」されたときに起動するonfocusというイベントハンドラを使う。フォーカスとは、該当要素がクリックされるなどで選択され、入力や操作を受けられる状態を指す。下記の要素などさまざまな部分で利用できるが、上記の例は入力ボックスの部品を作成する要素であるinput要素で使用した。
- a要素
- area要素
- button要素
- input要素
- label要素
- select要素
- textarea要素
イベントトラッキングで、ユニークに設定する項目は、「イベントカテゴリ」「イベントアクション」「ベントラベル」「イベント値」の4つであることは過去の連載で述べた。
上記例で、これらをどう考えて指定したのかを述べておこう。
イベントカテゴリにはinputと指定する
イベントカテゴリは大分類なので、前回紹介したリンクのクリック計測の「outclick」「inclick」などと混在したときにも区別できるように、「input」と指定しておくことにする。
イベントアクションには、「フォームの名前」を指定する
イベントアクションは中分類なので、どういう軸で見たいのかにもよるが、ここでは複数存在するフォーム別に名前を付けて区別しておくものとしよう。
このフォームの名前は「form1」とする。よって、このフォームの入力ボックスのイベントアクションは、すべて「form1」と指定しておく。
自社でサイト内にあるさまざまなフォームに対してこの測定をする場合は、どのフォームでの動作かを区別できるように、一意の文字列を指定しておくといいだろう。
イベントラベルには、「フォームの入力項目の名前」を指定する
イベントラベルは小分類なので、ここでは各フォーム内の入力項目別に名前を付けて区別しておきたい。
input要素の部品の名前を指定する「name」の値を持ってきて、「company」「name」「address」と指定してもよいが、ここでは入力項目の順番でレポートを見たいので、先頭に番号を付けて「1company」「2name」「3address」と指定してみた。
イベント値は指定しない
「イベント値」は今回とくに価値換算する必要性は感じないので指定しない。
「true」は付けておく
最後の「true」は直帰率への影響が出ないように常に付けておくことにする。
まとめると、このようになる。
| フォーム要素 | イベントカテゴリ | イベントアクション | イベントラベル | イベント値 |
|---|---|---|---|---|
| 社名フィールド | input | form1 | 1company | （なし） |
| 名前フィールド | input | form1 | 2name | （なし） |
| 住所フィールド | input | form1 | 3adress | （なし） |
- トラックしたイベントをレポートで確認するには？
トラックしたイベントをレポートで確認するには？
レポートは［コンテンツ］＞［イベント］＞［上位のイベント］（図4赤枠部分）を確認しよう。
［コンテンツ］＞［イベント］＞［上位のイベント］レポートでは、デフォルトで「イベントカテゴリ」ディメンションが選択（図5赤枠部分）されている。今回「イベントカテゴリ」の項目は「input」（図5青枠部分）が対象だ。
イベント アクションのディメンションを選択したのが図6だ。
図5で「input」（図5青枠部分）をクリックしてドリルダウンしわけではないので、今回対象になっていない「イベントアクション」の表示もあるが、今回の対象は、該当の1つの入力フォームを意味する「form1」（図6青枠部分）だ。
「イベントラベル」のディメンションを選択したのが図7だ。今回指定した「1company」「2name」「3address」が表示（図7青枠部分）されている。
「イベントカテゴリ」「イベントアクション」「イベントラベル」の3階層構造にあるので、「イベントカテゴリ」で「input」をクリックして「イベント アクション」へドリルダウン、「イベントアクション」の「form1」をクリックして「イベントラベル」へドリルダウンしてみてもよいだろう。
結果の評価
減衰率を算出しよう
データを確認したら、その結果からフォームの入力状況の評価をしよう。今回のケースでは図7（以下に再掲）で「1company」「2name」「3address」（図7青枠部分）のユニークイベント数（図7緑枠部分）がどれだけ減衰しているのかを見ればよい。
図7の例では、「1company」は4回フォーカスされ、そのうち「2name」は3回フォーカスされ、「3address」は2回フォーカスされている。
つまり、「社名」を入力した（しようとした）のは4件あったけど、そのうち次の「名前」を入力したのは3件にとどまったということだ。さらに次の「住所」を入力したのは2件ということで、項目別に次へ進んだ割合は、75％（3÷4）、67％（2÷3）ということになる。
| イベントラベル | フォーカス回数 | 次へ進んだ割合 | 減衰率 | |
|---|---|---|---|---|
| 社名 | 1company | 4 | 75％ | （なし） |
| 名前 | 2name | 3 | 67％ | 25％ |
| 住所 | 3adress | 2 | （なし） | 33％ |
最初の入力項目に入力した訪問の割合を算出しよう
さらに、そもそも最初の社名を入力した訪問の割合を算出するのも重要だろう。分母となる数値は、［コンテンツ］＞［サイトコンテンツ］＞［すべてのページ］レポート（図8）から、該当の入力フォームがあるページの「ページ別訪問数」とするのがよいだろう。
このケースでは、「ページ別訪問数」は「4」なので4回の訪問中、4回は社名を入力しているということで、とりあえず100％は社名を入力しようとしていたということがわかる。
まずはこのように整理した上で、次の入力項目との「ユニークイベント数」のギャップが大きければ、そこで次の入力項目へ進んでいないということなので、まずは実際のフォームで該当部分を確認しよう。
無用な必須項目になっていないだろうか、どんなことを記入すればいいのかわかりづらい項目になっていないだろうか。また、何人かに実際利用してもらうユーザーテストをしてみて反応を確かめてみるとよいかもしれない。
また、半角全角の入力の違いで、エラー表示になったような場合に、どこでエラーになったのかを動的に判定して、イベントトラッキングするような発展形もあるだろう。
現実的な実装方法
これまで3回にわたって解説してきたイベントトラッキングは、HTMLソースに個別に直接カスタマイズを施してきたが、現実的には「イベントカテゴリ」「イベントアクション」「イベントラベル」に指定する値を、自動的に関数などで計算した結果を割り当てたりする方法で省力化するのがよいだろう。
そのため、イベントトラッキングなどでは、JavaScriptのプログラマに直接何をやりたいかを伝えて、現実的な記述方法で適したカスタマイズをさらに施してほしい。
最後に自動的に各種イベントを取得できる機能拡張である「GA Funcitons」を紹介しておく。
jQueryと一連のJavaScriptを実装すれば、次の機能を実行することができる。
- 外部リンクのクリックを測定
- PDF、ZIP、エクセル、画像などのダウンロードを測定
- mailto:のクリックを測定
- 外部リンクやダウンロードのクリックまでの時間を測定
- フォーム入力欄毎のフォーカス、変更などのイベントを測定
- フォーム入力の時間を測定
- 一定時間のページ滞在で直帰にしない
- ページのスクロール量を測定
- クロスドメインのリンクを自動的に変換
ほとんどがイベントとして計測されるようになっている。もちろんさまざまな注意点があるので、よく理解してこういう機能拡張を利用するとよいだろう。
筆者が講師の「Googleアナリティクス ゼミナール」が10月に開講されます。Googleアナリティクスを徹底的に使い倒せるようになるための丸2日間の講座です。
→ お申し込みはこちらからどうぞ。
『Googleアナリティクス完全マニュアル』（電子書籍）が、オンデマンドのペーパーバック版でもお買い求めできるようになりました。
→ Amazon.co.jpの商品ページ
衣袋 宏美（いぶくろ ひろみ）
1960年東京都生まれ。東京大学教養学部教養学科卒業。大手電気メーカー勤務後、日経BP社インターネット視聴率センター長を経て、2000年ネットレイティングス入社、視聴率サービス立ち上げに参画、2006年ネットレイティングス社（現ニールセン株式会社）フェローに就任。株式会社クロス・フュージョン代表取締役。またデジタルハリウッド大学院客員教授、米Digital Analytics Association会員、アクセス解析イニシアチブ副代表。
- 新バージョン対応『Google アナリティクス完全マニュアル』（電子書籍）
- 『PROFESSIONALアクセス解析』単著
- 『ネット視聴率白書2008-2009』編著
- 『Webアナリスト養成講座』監訳
- ブログ： Insight for WebAnalytics
- 内容カテゴリ：アクセス解析
- コーナー：衣袋教授のGoogleアナリティクス入門講座
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：入力フォームのどこで脱落したのか？ Googleアナリティクスで評価する――実例で解説！イベントトラッキング（3）［第68回］ [衣袋教授のGoogleアナリティクス入門講座] | Web担当者Forum
Copyright (C) IMPRESS BUSINESS MEDIA CORPORATION, an Impress Group company. All rights reserved.