めも

メモ.

google analyticsでページ上に設置したフォームの集計を行う

この記事は何

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

調べたこと

Google Analytics

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

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>");
        }
}

以下のようなフォームが表示されている状態になった。

f:id:misos:20210218201547p:plain
アンケート解答前

f:id:misos:20210218201606p:plain
アンケート解答後

デザインを変える

チェックボックス を無くしてアイコンを表示したい、Material Iconsを使用してみる。

フォントをロードするためにGoogleWebFonts経由でフォントをロードする記述をヘッダーにて指定し、上記アンケートフォームの「はい」「いいえ」の箇所にアイコンを表示する。

f:id:misos:20210218203612p:plain

結果の確認

Google Analyticsから[リアルタイム]>[イベント]のページへ移動してみると、yes/noの値が送信されていることが確認できた。

f:id:misos:20210218210306p:plain

参考文献

プライバシーポリシー

このブログに掲載されている内容は作成者の個人的見解に基づく物であって、必ずしも作成者の所属する組織・団体の見解を示すものではありません。また、記載が不正確であったことにより生じたいかなる損害に関しても、責任を負いかねますのでご了承ください。また、本サイトは、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。また、本サイトでは、第三者配信の広告サービス(Googleアドセンス、A8.net)を利用しており、ユーザーの興味に応じた商品やサービスの広告を表示するため、クッキー(Cookie)を使用しております。 クッキーを使用することで当サイトはお客様のコンピュータを識別できるようになりますが、お客様個人を特定できるものではありません。本サイトの管理者への問い合わせ、当ブログのプライバシーポリシーの詳細についてはこちらをご覧ください。