KARTE Blocksの使い方（基礎編）
こんにちは。ネクストビートでエンジニアをしている尾崎です。
普段の業務では人材紹介サービス「おもてなしHR」の開発をしています。
今回は弊社で利用しているKARTE Blocksの基礎的な使い方を紹介していこうと思います。
KARTE Blocksは低コストでA/Bテストが可能なノーコードツールです。
方法を知っていれば難しい知識は必要なく簡単に扱えますので、是非参考にしてください。
なお、タグの設置などの初期セットアップは省略とします。
本記事は、以下の内容で構成していきます。
- ページを登録する
- テスト内容を作成する
1. 配信条件の編集
2. パターンごとにページを編集 - ゴールを設定する
1. ゴールの作成
2. イベントの作成
3. ページにゴールを適用
それではテストの作成を始めましょう。
1. ページを登録する
まずはA/Bテストを行うページをKARTE Blocksに登録していきます。
今回は記事用にOHRのテスト環境の求人検索結果ページを対象とします。
以下、ページ登録のための項目一覧です。
ページ名
Karte Block上で管理されるテストの命名を決定する。
ページのトピック
テストの詳細を記載する。
URL
Karte上でA/Bテストの内容を確認したいページのURLを記載する。
URLの条件
「URL / オリジン / パス / クエリ文字」の４種類とその値の照合方法を選択する。（照合の種類については以下画像を参照）
条件を 「and / or」で繋ぎ、テスト環境と本番環境を一つのページとして管理することも可能。
2. テスト内容を作成する
登録したページを選択すると、以下のような画面が表示されます。
こちらの「ページを編集する」から、直感的に操作できるページの編集画面に遷移できます。
2–1. 配信条件の編集
配信条件の「三点リーダー」から、「編集」を押すことで配信条件の編集を行う画面を表示することができます。
こちらからテストの「実施期間」や「A/Bテストのパターンの分岐割合」などを変更できます。
以下、配信条件編集のための主要項目一覧です。
※「対象の絞り込み」に関しては「セグメント（ユーザーをその行動や属性に応じて分類したもの）」の知識が必要になるため、基礎編では省略させていただきます。
スケジュール
「開始日時 / 終了日時」を指定し、テストを実施する期間を決定する。
デバイスの絞り込み
「PC / タブレット / スマートフォン」の中からテストを行いたいデバイスを指定する。
ABテスト
それぞれのテストパターンの表示割合を指定する。
例えば、「テストパターンの値を低めに設定することで、テストが与える影響を下げる」などの調整が可能。
2–2. パターンごとにページを編集
それでは今回は、「バナーのデザインによるクリック率の分析」という体で、バナーを別のものに差し替えてみましょう。
このように、簡易な画像変更であればalt属性も含め、ものの数秒で変更することが可能です。
また、画像右下のチェックを入れることで「遅延読み込み」を適用したり、HTML/CSSを直接修正することもでき、エンジニアの知識がある方ならではの対応も可能となっています。
3. ゴールを設定する
KARTE Blocksには「ゴール」と呼ばれる、それぞれのテストパターンの結果を計測するためのモニタリング指標があります。
例として、コンバージョンや再来訪数などが挙げられます。
こちらを先ほど作成したページに紐づけることで、A/Bテストの結果を一目で判断することができるようになります。
なお、「ゴール」は独立しており、以前作成したものも他のA/Bテストに対して使い回すことが可能です。
3–1. ゴールの作成
それではゴールを作成していきましょう。
以下、ゴール作成のための主要項目一覧です。
ゴール種別
「最終ゴール / 中間ゴール」の二択。
最終ゴールは、文字通り最終的に計測したい目的のゴール。
中間ゴールは、最終ゴールに到るまでのSTEPとして考えられる様々なフローの区切り。
例：
「求人検索結果ページ」に何かしらの応募促進のためのA/Bテストを行う場合、最終ゴールを「応募完了」とする。
その場合、中間ゴールを「求人ページへの遷移/求人ページのブックマーク」などが考えられる。
ゴールタイプ
何をもってテストのゴールとするかを種別にしたもの。
「ページ閲覧 / 再来訪 / イベント(後述)」など様々なタイプが存在する。
3–2. イベントの作成
「イベント」とは、ユーザー単位で整理・閲覧・分析するための、顧客の行動・属性のことです。
この「イベント」はKARTE Blocks側がデフォルトで用意しているものとは別に、「カスタムイベント」と呼ばれる独自のイベントを作成することができます。
イベントを作成するには、どのページで何を計測するかを登録する必要があります。
今回は、「検索結果ページのバナーをクリックする」というイベントを作成しましょう。
以下、イベント作成のための主要項目一覧です。
計測ページURL
イベントを計測したいページのURLを指定。
ページの登録時と同じく、値に応じて「完全一致 / 前方一致…」から選択。
計測方法
「テキスト / CSSセレクタ」の二択。
テキストとCSSセレクタの両方の条件に一致するものを計測対象とすることも可能。
今回は「画像のクリック」を計測したいため、テキストではなくHTML上のIDを指定。
判定タイミング
「要素をクリックする / 要素が表示される」の二択。
3–3. ページにゴールを適用
ゴールは、先ほど作成したページに適用することでA/Bテストの結果を確認できるようになります。
テスト後はこちらの値を参考に、今回のテスト内容を本実施するのか、それとも別のアプローチをかけるのかを判断する、という流れになります。
ゴールUU
ゴールに到達した人数
ゴール率
「訪問UU」から「ゴールUU」の割合を算出したもの
UP率
未実施とテストパターンのゴール率を比較した値
最後に
以前はA/Bテストを実施する際、簡易なテストでも計測用のIDの埋め込み、パターンの分岐処理などをコーディングで行う必要があり、かつ結果が芳しいものでなかった場合も元に戻す作業が必要でした。
KARTE Blocksを使用することで、早いスピードでテストを実施し、良い結果が確定してからコーディングに移れるため無駄な対応をすることなく開発が可能になります。
また、簡易な修正であれば一時的にKARTE Blocksで対応しておき、後からコーディング対応を行うといった、スピード感をもった施策の実施が出来るようになりました。
世の中には便利なツールが続々と生まれ、まだまだ知らないものも多く使いこなせてはいるものも少ないですが、日々学習し選択の幅を広げていきたいです。
We are hiring!
本記事をご覧いただき、ネクストビートの技術や組織についてもっと話を聞いてみたいと思われた方、カジュアルにお話しませんか？
・今後のキャリアについて悩んでいる
・記事だけでなく、より詳しい内容について知りたい
・実際に働いている人の声を聴いてみたい
など、まだ転職を決められていない方でも、ネクストビートに少しでもご興味をお持ちいただけましたら、ぜひカジュアルにお話しましょう！
🔽申し込みはこちら https://hrmos.co/pages/nextbeat/jobs/1000008
また、ネクストビートについてはこちらもご覧ください。
🔽エントランスブック https://note.nextbeat.co.jp/n/nd6f64ba9b8dc
