Google Analyticsと連携したアンケートフォーム


数日前から、このブログにアンケートを仕込んでいます。
このページを下の方までスクロールしてみてください。
下にピロっとアンケートフォームが出てきます。

このアンケートの回答結果はGoogleAnalyticsのサーバーへ送信されています。
これでGoogleAnalytics上で記事の評価を確認できるようになります。

アンケートの動作

このアンケートフォームはページの下の方までスクロールしたら出てくるようにしています。このアンケートを出すタイミングは調整可能です。
一度出たアンケートは上の方までスクロールさせると、消えるような仕組みにしています。このタイミングも調整できます。
アンケートのラジオボタンのどれかをクリックすると、trackEventを発生させて、GoogleAnalyticsへデータを送信しています。

設定方法

スクリプトとデザインはga_enq.jsで、フォームの設問はenq_box.txtに記載しています。
それぞれのソースコードはこんな感じです。
(ga_enq.jsはjQueryを使ってスクリプトを書いています。)

ga_enq.js
$(function() {

  var config = {
    //Path to the enquate text file
    "txtFile" : "/ga/js/enq_box.txt",
    //css configuration
    "css" : {
        "font-size" : "10px",
        "background-color" : "#0f8fff",
        "color" : "#FFFFFF"
      },
   //height of enquate form
    "enq_height" : 70,
   //height to appear
   "appear" : 200,
   //height to disappear
   "disappear" : 200,
   //Tracker name for multi-account use
   "trackerName" : ""
  }


  var content_height = $(document).height();
  var window_hight = $(window).height();
  var answered = false;

    $("body").append("<div id='enqbox'></div>");
    $("#enqbox").load(config.txtFile,
      function(){
       $("span.close a")
            .css({
              "float" : "right",
            })
            .hover(
              function(){
                  $(this).css({
                    "color": "#0f8fff",
                    "background-color" : "#ffffff"
                  });
                },
              function(){
                  $(this).css({
                   "color": "#ffffff",
                   "background-color" : "#0f8fff"
                  });
                }
              )
            .click(function(){
              $("#enqbox").hide();
              answered = true;
              return false;
          });
       $("span.close a:link").css({
           "color" : "#ffffff"
          });

       $("input[name=enq]").change(function(){
          var data = $("input[name=enq]:checked").val();
          if(data){
            var tracker = "_trackEvent";
            if(config.trackerName !== ""){
              tracker = (config.trackerName + "._trackEvent");
            }
            _gaq.push([tracker, 'enq', data, location.pathname]);
          }

          $("form div#question").hide();
          $("form div#thanks").show();
          setTimeout(function(){
            $("#enqbox").slideUp("fast")}
            , 1000 * 3);
          answered = true;
        });
      }
    ).hide()
      .css(config.css)
      .css({
        "height" : config.enq_height + "px",
        "left" : "0px",
       "width" : $(window).width(),
        "position" : "absolute"
      });


  var moveBox = function(scroll_height){
     if(content_height - window_hight - scroll_height > - config.enq_height){
       $("#enqbox").css({
            "top" : (scroll_height + window_hight  - config.enq_height) + "px"
          });
        }
    }


  $(window).scroll(function(){
    var scroll_height = $(window).scrollTop()
    moveBox(scroll_height);
    if((!answered)&&(content_height - window_hight - scroll_height < config.appear)){
      $("#enqbox").slideDown("fast");
      }
    if(scroll_height < config.disappear){
      $("#enqbox").hide();
    }
  })

});
enq_box.txt
<form action="#" id="enq_form">
<span class="close"><a href="#">[close]</a></span>
<p>&nbsp;■お役に立ちましたか?</p>
<div id="question">
<input type="radio" name="enq" value="great">とても役立った
<input type="radio" name="enq" value="good">役立った
<input type="radio" name="enq" value="soso">まあまあ
<input type="radio" name="enq" value="bad">いまいち
<input type="radio" name="enq" value="terrible">ひどい
</div>
<div id="thanks" style="display:none">
ご協力ありがとうございます!
</div>
</form>

設定方法

アカウント設定とかは通常のGAコード側で行うので、特に必要ありません。なので、このまま使っても普通に動作すると思います(ファイルのパスの設定は必要です)。ちょっと変えたいなという人には、アンケートの内容とデザインが設定できるようになっています。

アンケートの内容

アンケートフォームの内容はenq_box.txtに記載してください。普通にHTMLでラジオボタンのフォームを作成すればOKです。別に5択ではなくても問題ありません。valueの値がGoogleAnalyticsへ送信されます。

デザインなどの設定

ga_enq.jsのconfigセクションで設定できるようになっています。

“txtFile” にenq_box.txtを配置したパスを記載してください。この設定は必須です。
“css”のセクションでアンケートフォームのCSSを記載してください。
“enq_height”はアンケートフォームの高さです。
“appear”はスクロールしてアンケートが出てくるタイミングです。値が大きいと早めに出てきます。
“disappear” は値が大きいと早めにアンケートが閉じられます。
この3つはページに合わせて試行錯誤しながら、決めると良いかなと思います。
“trackerName” はマルチアカウントでGAを利用している場合に使用します。通常はカラのままでOKです。

*ただ、デザインとロジックの切り分けが実はうまくできていなくて、閉じるボタンの箇所だけconfigセクションの下の方にある$(“span.close a”)以降で設定されてしまっています。「閉じる」のデザインが気に入らない場合はここを修正してください。

インストール方法

サーバーにga_enq.jsとenq_box.txtを配置してください。ga_enq.js内でenq_box.txtのパスの設定は忘れず行ってください。
その後、HTML内にjQueryとこのga_enq.jsを呼び出すタグを記載するだけでOKです。
Google Analyticsのトラッキングコードも必要です。忘れずに記述しておいてください。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="/ga/js/ga_enq.js"></script>

既にサイト上でjQueryを使っている場合はjQyeryの呼び出しは必要ありません。

結果の確認方法

データはGA画面(新バージョン)の
コンテンツ>イベント>ページ
で対象のページを選択すると、
enqというイベントカテゴリが表示されると思うので、enqをクリックすると対象ページに対する評価を見ることができます。

アンケートを設置してわかったこと。

やっぱりほとんどアンケート答えてくれない。。。
あ、ちなみに今、_trackEventしか飛ばしていないですけど、その前にsetCustomVarで設定すれば、カスタム変数にも入れることができると思います。
これでアンケート回答内容によって、セグメント化ができるようなると思いますよ。きっと。

追記:
回答内容でセグメント化するにはカスタム変数をセットする必要があります。64行目の_gaq.pushの前にこんな感じのコードを追加すればOKです。

            var cstmVar = "_setCustomVar";
            if(config.trackerName !== ""){
              cstmVar = (config.trackerName + "._trackEvent");
            }
            _gaq.push([cstmVar, 5, 'enq', data, 1]);

カスタム変数はガンガン上書きされてしまいます。最後に回答した内容のみ保持される感じになってしまいますので、注意してください。
この記述を追加したバージョンは↓に置いています。
ga_enq2.js