この記事は何

「このページの評価をお聞かせください」と行ったフォーム＋星五段階評価で評価を送ることができるサイトを見かけた。作成の仕方を調査。

調べたこと

Google Analytics

基本的な機能についてはドキュメント＋多くの人が資料を作成しているのでそちらを参照。

googleアナリティクスによるアクセス解析の基本 from ニフティ株式会社

www.slideshare.net

参照先・参照元メディア・アクセスの時間帯など基本的な情報は初期状態でも入手できる。これらのデータに加えて、ウェブサイトにフォームを設定してそのデータも集めたい。

アンケートフォームの作成

アンケートフォームを表示する

サイトに analytics.js を追加する | ウェブ向けアナリティクス（analytics.js）

analytics.js ライブラリを使用するので、Google Analyticsアカウントを取得した上で上記ページを参照しつつanalytics.jsをロードする。

analytics.js のフィールドリファレンス | ウェブ向けアナリティクス（analytics.js）

次に集めたいデータを決めて、それに対応するフォームをHTMLに記述する。通常のフォームでは解答を選択してから「送信」ボタンを押すような作りだが、手軽にアンケートしてもらった方が回答率が上がる気がしたので、チェックボックスをクリックしたと同時に onclick="sendans('/v1/index.html')" でデータを送信するようにした。

eventCategoryはイベントのカテゴリを指定する欄であり空白にすることはできない。後でGoogleAnalytisで集計するときにイベントのカテゴリでまとめるため、わかりやすいカテゴリ名をつける。

<div class="ga-form">
  <div>この記事は役に立ちましたか？</div>
  <p id="thumbs-ans"></p>
  <label><input onclick="sendans()"  type="checkbox" name="q1" value="yes">はい</label>
  <label><input onclick="sendans()"  type="checkbox" name="q1" value="no">いいえ</label>
</div>

function sendans() {
    var thumbs_ans = $("input:checkbox[name='q1']:checked").val();
    var url = $(location).attr('href');

    if(thumbs_ans) {
        ga('send', 'event', {
            'eventCategory': 'blog_eval_questionnaire',
            'eventAction': thumbs_ans,
            'eventLabel': url,
            });
            $(".ga-form").html("<p>フィードバックをお寄せいただき、ありがとうございます。</p>");
        }
}