とあるエンジニアの作業ブログ

GrowthHack Web製作 サイト改善

SiTest入門 ~サイトへの導入とABテストの実施まで~

投稿日:

サイト分析・改善ツールのSiTestというツールをがすごいという噂を聞きました。サイト自体を改変することなく、各種スプリットテスト(ABテストやリダイレクトテスト、多変量テスト等)を実施できるほか、ヒートマップ解析も行ってくれテストと合わせ技で分析できるという優れものらしいです。
ということで、ひとまず導入とABテスト実施までやってみました。

アクセストレード パートナーサイト募集

1か月無料トライアル

まずはSiTestのホームページで1か月の無料トライアルに申し込みます。
https://sitest.jp/

入力項目は名前とメールアドレスと電話番号だけなんですが、なぜかその後審査するというメールが来て申し込みが承認されるまで一時待たされます。私の場合は半日ほどでした。
あの情報だけで一体何を審査しているのか不明ですが、その後特に追加の情報提供依頼などもなく「ご登録ありがとうございます。」というメールが来て利用できるようになりました。

トラッキングコードの取得と設置

まずはトラッキングコードの取得を行いテストするサイトに埋め込みます。

ログイン

ログインすると以下の画面が表示されます。

ドメイン設定

最初にテストをするサイトのドメイン登録を行います。
左側のメニューから「ドメイン設定」を選択し、「+トラッキングするドメインの追加」からドメインを追加します。

 

 

プロジェクトの追加

続いてプロジェクトの追加を行います。
SiTestのダッシュボードに戻り、「←プロジェクトの一覧に戻る」を押してプロジェクト一覧を表示します。

 
続いて「プロジェクトの新規作成」を押して、画面にしたがってプロジェクトを作成していきます。
ドメイン名は先ほど登録したドメインを選択します。

 
2つ目の画面でトラッキングするサイトにショッピングカートやブログが含まれているかを問われます。
この回答により静的サイトか動的サイトかが判定され、作成されるトラッキングコードの種類が変わってきます。
今回はブログサイトですので「提供している」を選択します。

 
最後の画面でトラッキングコードが表示されます。このトラッキングコードを</body>タグの直前にコピペします。

 
これでトラッキングコードの取得と設置は完了です。

テストの作成と開始

続いてテストを作成します。テストの作成は先にゴールの作成(そのテストで確認すべき目標)を行い、その後ゴールに対するコンバージョン率を検証するテストパターン作成するという流れです。

ゴールの作成

左側のメニューから「ゴール」を選択します。続いて「+ゴールの新規作成」を押してゴール作成画面に進みます。

 
ゴールはステップの組み合わせで作成され、ステップに定義した達成条件をクリアしていくことで最終的に目標とするコンバージョンに近づいていくという構造にします。

 
余談ですが、達成条件も様々なものが設定できます。スクロール率や要素のホバーなど痒いところに手がとどく条件もありますね。

A/Bテストの新規作成

いよいよA/Bテストの作成です。
左側のテストのメニューから「A/Bテスト」を選択し、「+A/Bテストの新規作成」を押下します。

 
画面にしたがってテスト作成を進めます。ゴールは設定しないこともできますがなるべく設定した方が目標のあるテストができます。
今回は先ほど作成したゴールを設定します。

 

 
3つ目の画面でテストの信頼度を選択します。テストの信頼度とは、結果の精度とスピードのトレードオフの設定です(多くのデータに基づけば制度が上がるがそれだけデータ収集に時間がかかるという意味です)。
今回は早く結果が欲しかったので「スピード重視」を選択してみました。

テストパターンの作成とテスト開始

そのままテストパターンの作成に進みます。
まずはプレビュー画面から「+新規パターン」を押下しオリジナルと比較するテストパターンを追加します。

 
今回は単純にコンテンツのA/Bテストを想定しているので「新規書き換えパターン」を選択します。
ちなみに「新規リダイレクトパターン」はスプリットURLテストの時に選択します(全く違うデザインのページを用意して、それぞれに一定割合でリダイレクトさせて成果を比較するテスト)。

 
続いてテストパターン側のコンテンツを編集します。
今回は簡易検証のため試しにヘッダーの背景だけ変えてみます。
ヘッダーを選択し、「HTMLを編集する」を選択します。

 
<style>タブで背景の色を変更します。

 

 
ここまでできたら「▶︎テストを実施する」を押します。
テストパターンごとの振分率を設定する画面が表示されますので、ここで振分率を設定し、「テストを今すぐ実施する」を押下したらたらいよいよテスト開始です。

テスト設定(テスト対象条件)

ちなみに、テストの条件は振分率以外にも設定できます。
先ほどのプレビュー画面で「▶︎テストを実施する」の隣にある「テスト設定」を押します。

 
例えばテスト対象者を特定のリファラからに限定したい場合は、「テストの対象になる訪問者 / システムの条件」欄の「条件設定」を押下します。
するとURLパラメータやcookieなどテスト対象をセグメンテーションするための各種条件が設定できますので、例えばURLパラメータにリファラ情報を含め、そのリファラ情報を含むリクエストのみをテスト対象にすることができます。

結果の確認

これでサイトのA/Bテストができました。
テスト結果の確認についてはデータが溜まってからビューや機能についていろいろ見てみようと思います。

-GrowthHack, Web製作, サイト改善
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

DMM電子書籍の広告を自動出し分けするショートコード

DMM電子書籍のアフィリエイト広告は、そのままだとiframe使ってたり味気なかったりで使い勝手が悪いので、自分でカスタマイズしてみました。 ついでに、前に作ったアフィリエイト自動出し分けショートコー …

【Stinger8】ページング(page-numbersクラス),サイドバーリストのレイアウト修正

Stinger8の細かなレイアウト修正をします。 目次 トップ下部の投稿一覧をページングする部分(page-numbersクラス)のレイアウト崩れの修正 サイドバーに表示される最近の投稿やアーカイブな …

【超初心者向け】githubでテーマファイルをバージョン管理する

恥ずかしながらgitでリモートリポジトリ管理するのが初めてなので自分用のメモ。 目次 やりたいこと 動作環境・前提 テーマファイルをmasterブランチで管理するまで 開発用のfeatureブランチ作 …

STINGER8で初めての投稿の準備をする

WordPressのテーマ、STINGER8を利用した場合の、初めての投稿の準備をします。 目次 前提 アウトプットイメージの確認 投稿の基本形を考える ソースコードをブログ上に表示させるための準備 …

GulpでWordPressのCI 〜実装編〜

gulpを使ったWordPressのテーマファイルCIの実装編です。 設計編はこちらを参照ください。 目次 やりたいこと・動作環境・前提 やりたいこと・環境・バージョン ディレクトリ構成 利用モジュー …