衣袋教授のGoogleアナリティクス入門講座

Googleアナリティクスの導入から、運用、活用まで、正式なサポートがない初めての人でもゼロから学んでいけるように、丁寧に解説していく。

Googleアナリティクスとは/衣袋教授のGoogleアナリティクス入門講座

入力フォームのどこで脱落したのか? Googleアナリティクスで評価する――実例で解説!イベントトラッキング(3)[第68回]

入力フォームの、どの入力項目までユーザーが入力を試みたかというデータを、イベントトラッキングで取得するカスタマイズをしてみよう。

ページ

eコマースサイトなどでは、商品をカートに投入してから購入までの間に、少なくとも初回購入時には、名前、住所、メールアドレス、クレジットカード番号などの各種情報を入力したり、入力内容の確認作業をしたりしなければならない。

ユーザーのうち、一定の割合は、この手続きが面倒で、途中でやめてしまうことがある。いわゆる「脱落」だ。

どのステップ(ページ)で脱落したかを知りたいときは、Google アナリティクスの「目標到達プロセス」レポートを設定すれば、どのページで動きが止まったのかを簡単に知ることができる。詳しくは以下の過去記事を参照してほしい。

しかし、Web解析担当者としては、ページ単位ではなく、各ページの入力フォームのどこで入力を諦めてしまったのかまで知りたい、というのが本音ではないだろうか。

そこで今回は、入力フォームのあるページで、どの入力項目までユーザーが入力を試みたかというデータを、イベントトラッキングで取得するカスタマイズをしてみたい。

まずは課題を設定しよう

※今回もイメージしやすいように、実際のサイトを例としてあげるが、筆者は該当企業とは無関係の第三者であり、また本稿で紹介するGoogle アナリティクスのデータは架空のものである。

図1図2は「サントリーウエルネスOnline」で、ある商品を選択して注文手続きへ進んだページの一部だ。

図1:3段階の注文のステップ(サントリーウエルネスOnline)
図1:3段階の注文のステップ(サントリーウエルネスOnline)

この例(図1)のように、初めのステップでまとめて情報入力をさせて、次のステップは最終確認させて終わる、実質2ステップの購入プロセスである場合が多い。

ただ、ステップ数を減らすと、逆に最初の「注文内容の入力」ステップの入力フォーム(図2)では一度に多くの情報を入力させることになる

図2:「注文内容の入力」ページの一部(サントリーウエルネスOnline)
図2:「注文内容の入力」ページの一部(サントリーウエルネスOnline)

実際のページでは、図2のお客様情報の入力フォームの下に、

  • 注文した商品情報の表示
  • 届け先情報の入力部分
  • ギフト指定
  • 支払い方法の入力
  • 配送日時指定

などが続いていて、ユーザーが入力や選択しなければならない項目は非常に多い。

販売者側としては、入力フォームにおける入力項目はぎりぎり絞り込んでいるつもりだが、入力項目が増えれば、それに比例して、面倒くさいと感じたユーザーの脱落も増える。

まずは、この入力フォームで、ユーザーがどこまで入力を試みたかを調べたいと考えているとしよう。

【課題】

入力フォームで、ユーザーがどこまで入力を試みたかを調べたい

トラッキングコードの実装例

例として見せた入力フォームは入力項目も多く、複雑なので、説明の都合上、ここからは単純化した上で、トラッキングコードの実装例を紹介しよう。入力項目は、図3のように、

  • 社名
  • 名前
  • 住所
図3:入力項目
図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」は直帰率への影響が出ないように常に付けておくことにする。

まとめると、このようになる。

フォーム要素イベントカテゴリイベントアクションイベントラベルイベント値
社名フィールドinputform11company(なし)
名前フィールドinputform12name(なし)
住所フィールドinputform13adress(なし)

筆者の『ユニバーサルアナリティクス版Googleアナリティクス完全マニュアル(PDF)』が発行されました。

筆者が講義を行うGoogle アナリティクス徹底講座も、定期的に開催しています。 → Google アナリティクス ゼミナール

用語集
Googleアナリティクス / HTML / JavaScript / クロール / ダウンロード / ユーザーテスト / リンク / 外部リンク / 直帰 / 直帰率 / 訪問

ページ

この記事が役に立ったらシェア!
メルマガの登録はこちら Web担当者に役立つ情報をサクッとゲット!

人気記事トップ10(過去7日間)

今日の用語

アップロード
手元のPCなどの機器から、ネットワークを介して、別のPCやファイルサーバー、ウェ ...→用語集へ

インフォメーション

RSSフィード


Web担を応援して支えてくださっている企業さま [各サービス/製品の紹介はこちらから]