クイックノート

ちょっとした発見・アイデアから知識の発掘を

【GAS】サイト改善の結果を自動的にチェックする

サイトの分析の結果、
サイトのデザインを修正するなど、
日々改善を行うことは重要です。

ただ、改善しっ放しもよくありません。

その改善で本当に効果が出たのかを確認して、
効果が出なかったとしたら、
打ち手の方向性を見直すことが必要です。

ところが、サイト改善の効果は、
すぐに現れるないことも多いので、
結果の確認を忘れがちです。

「忘れやすいことは自動化する」

ということで、
ここでは、サイトの改善効果を自動的にチェックする仕組みを実現します。

効果測定の自動化はなぜ必要か

冒頭でも述べたように、
サイトを改善しっ放しはよくありません。

改善の方向性があっているのかどうかを確認せずに改善を続けることは、
暗闇の中をひたすら真っ直ぐに走っているようなものです。

このまま続けるべきか、
方向性を見直した方がいいのかを考えるために、
結果を確認することが重要になってきます。

PDCAサイクル

サイトの改善でPDCAサイクルが重要だとよく言われています。

PDCAとはPlan, Do, Check, Actionの頭文字を取ったもので、
サイト改善の場合は次のような4つのフェーズに対応します。

  • Plan : 現状の問題を認識してどのような改善をするかを計画する
  • Do: サイトを修正する
  • Check: 改善の効果を確認する
  • Act: 結果を元に次の手を考える

f:id:u874072e:20191003150152p:plain
PDCAサイクル

この一連の流れを繰り返すことで、
より良いサイトへとしていくことが重要です。

サイト改善ではDCのギャップが大きい

ところが、サイト改善の場合、
改善した効果がすぐに現れるとは限りません。

例えば、新しいブログ記事を投稿したとして、
そのブログ記事がアクセスを集めるようになるには、
何百日かかることもザラにあります。

clean-copy-of-onenote.hatenablog.com

つまり、Doの後にCheckを行うまでの期間が長くなりがちです。

f:id:u874072e:20191003150729p:plain
DCのギャップ

これのどこが問題でしょうか。

こういうデザインにしよう(Plan)と思ってから、
実際にホームページを修正する(Do)まではすぐに行えます。

一方で、修正した効果を確認するのは何日、
何ヶ月と経ってからとなると、
そもそも修正したことを忘れてしまうことになりがちです。

PDCAサイクルのうち、D→Cの流れが忘れ去れることで、
サイクルが回らなくなってしまうのです。

この「忘れる」という問題に対する処方箋として、
「自動化」することが有効になります。

GASによる改善結果の自動チェック

サイトを修正した直後は、
当然、修正したことを覚えています。

そこで、サイト改善後にその履歴を記録することにします。

f:id:u874072e:20191003151712p:plain
サイト改善の履歴

この時、改善の効果を測定する指標を一緒に記録しておいて、
あとは自動的に効果を測定してくれれば、
Checkのプロセスを忘れることはなくなるでしょう。

ということで、このような表の情報を元に、
自動的に効果測定を行うGASのスクリプトを記述します。

変数の設定

改善の効果はGoogle Analyticsから得られる指標を用います。
そのため対象となるサイトのビューIDを変数で指定しておきます。

var viewId = "google analyticsのビューID"
var EVAL_DATE_RANGE = 30

ビューIDはGoogle Analytics上のビューに表示される数字です。

f:id:u874072e:20191003152354p:plain
ビューID

EVAL_DATE_RANGEは改善の前後何日のデータを使って、
効果を測定するのかを表す変数です。

指定した日付の前後のデータを取得

下の関数は、dateで指定した日付の前後の指標を取得します。
取得する指標はmetricsで指定します。

function get_ga_before_after(date,metrics) {
  
  s_date_b = add_date(date,-EVAL_DATE_RANGE)
  e_date_b = add_date(date,-1)
  s_date_a = add_date(date,1)
  e_date_a = add_date(date,EVAL_DATE_RANGE)
  
  var data = AnalyticsReporting.Reports.batchGet({
    reportRequests: [{
      viewId: viewId,
      dateRanges: [{
        startDate: fmt_date(s_date_b),
        endDate: fmt_date(e_date_b)
      },
                   {
                     startDate: fmt_date(s_date_a),
                     endDate: fmt_date(e_date_a)
                   }],
      metrics: [{
        expression: metrics,
        formattingType: "FLOAT"
      }]

    }]
  });
  Logger.log(JSON.parse(data))
  return JSON.parse(data)
}

関数の中で下で説明するいくつかのサブ関数を読んでいます。

日付を操作するためのサブ関数

改善前後の期間を取り出すために、
日付の足し算を行う関数add_dateを定義します。

また、日付を文字列として表す時の形式を整えるために、
関数fmt_dateを定義しています。

関数leftPaddingは8月→08のように日付の0埋めをするために利用します。

function add_date(date,add){
  tmp = new Date(date)
  tmp.setDate(tmp.getDate() + add)
  return(tmp)
}

function fmt_date(date){
  var y = leftPadding("" + date.getFullYear(),"0",4)
  var m = leftPadding("" + (date.getMonth()+1),"0",2)
  var d = leftPadding("" + date.getDate(),"0",2)
  
  return "" + y + "-" + m + "-" + d
}

function leftPadding(str,pad_char,num){
  if(str.length < num){
    return (Array(1+num - str.length).join(pad_char) + str)
  }
  return(str)
}

効果を測定して記録する

下のmyFunctionは、
スプレッドシートの各行を読み込んで、
必要な指標をgoogle analyticsから取得して、
結果をスプレッドシートに記録します。

これを1日毎など、定期的に実行することで、
自動的にサイト改善の効果をチェックし、
スプレットシート上に記録されます。

function myFunction(){
  var ss = SpreadsheetApp.getActive()
  var s = ss.getSheetByName("events")
  
  var row = s.getLastRow()
  
  var cells = s.getRange(2, 1, row, 3).getValues()
  
  for(var i = 0; i < (row-1); i++){
    var date = new Date(cells[i][0])
    var title = cells[i][1]
    var metrics = cells[i][2]
    
    if(add_date(date,EVAL_DATE_RANGE) > new Date()){
      var res = get_ga_before_after(date,metrics)
      var vb = res.reports[0].data.totals[0].values
      var va = res.reports[0].data.totals[1].values    
      saveEval(i+2,date,title,metrics,vb,va)
    }
  }
}

function saveEval(row,date,title,metrics,vb,va){
  var ss = SpreadsheetApp.getActive()
  var s = ss.getSheetByName("evaluation")
  
  s.getRange(row, 1,1,6).setValues([[date,title,metrics,vb,va,(va-vb)/vb*100]])
}

自動チェックの結果例

定期実行するスケジューラーを設定すれば、
あとは放っておくだけで下のように効果測定が行われます。

f:id:u874072e:20191003153734p:plain
自動効果測定の結果例

上の結果を見ると、メニューバーなどのサイトのデザインの修正の前後で、
いくつかの指標が向上していることがわかります。
特にリピーター率は約13%改善していることがわかります。

また、広告を自動挿入することで、
ユーザーあたりの広告クリック数が約66%改善していることがわかります。

clean-copy-of-onenote.hatenablog.com

clean-copy-of-onenote.hatenablog.com

まとめ

PDCAサイクルを回すための最大の障壁は、
D→Cへのギャップが大きいことが挙げられます。

やりっぱなしにならないように、
自動的にチェックする仕組みを導入することで、
しっかりとPDCAサイクルを回して、
正しい方向で改善が進められるようにしていきたいですね。

プライバシーポリシー