🚦

ガイド/カスタムイベント リリース前確認の手順書

このページのゴール：

☝

本ページでは、Onboardingについて以下のことができるようになることをゴールとしています。

  • Onboardingのガイド/カスタムイベントのリリース前に確認することの手順をイメージできるようになる
  • 各業務フェーズにおいて、確認することのサンプルを理解する

1. リリース前確認とは？

Onboardingのガイドがプロダクトに対して影響する範囲を最小限にしつつ、正しく動作するか確認するためのプロセスのことです。

Onboardingのガイド/カスタムイベントをリリースする時に以下2つのことを確認します。

✏️
  1. 作成したOnboardingのガイド（ヒント、ツアー、ポップアップ）/カスタムイベントが正しく動作するか？計測できているか？を確認する
  2. 作成したOnboardingガイドがクライアントのプロダクトに影響を及ぼし、エンドユーザーの体験を阻害していないか？を確認する

2. 事前知識

プレビュー拡張機能/テスト環境タグ/本番環境タグ それぞれの挙動の違い

image
image

※Onboarding拡張機能のプレビューでは、自動表示条件の確認はできません。

3. 確認の実施方法

☝

確認の実施方法は［ガイド］と［カスタムイベント］で異なります。 それぞれ分けてご説明します。

3-1. ガイドの確認実施方法

3-1-1. ガイドの確認の流れ

ガイドは以下の流れで確認していきます。

step1. プレビュー拡張機能を利用した確認 ↓ step2. テスト環境タグを利用した確認 ↓ step3. 本番環境タグにて公開対象を一部に限定した確認*

icon

step.3 本番環境タグにて一部限定公開を利用した確認について こちらは必須ではなく、必要に応じて実施します。

例1： テスト環境タグを埋め込んだ環境がない場合 例2：テスト環境タグでも確認したが、本番環境でも念のため確認したい場合

3-1-2. ガイドの各流れ別で確認すること

各stepでは、以下のことを確認していきます。

テストで確認すること
備考
step1. プレビュー拡張機能を 利用した確認
■全ガイド共通 ・作成したガイドの見た目に問題ないか？ ・自社プロダクトとOnboardingの干渉によって、UIが崩れたり、ボタンが押せないなどの不具合が発生していないか？ ■ツアー/ポップアップ ・作成したガイドでフォーカス外れがないか？ ■ヒント ・意図した場所に配置されているか？ ・アイコンが意図した形で表示されているか？ ・（want）［ヒントを表示するURL］で指定したページ以外でヒントが配置されていないか？
プレビュー拡張機能は、作成中のガイドの見た目を確認するものです。 ■プレビューで確認できないこと ・ゴール/ポップアップの自動表示条件の挙動確認はできません。 ・ヒントとポップアップ、ヒントとツアーなど作成中ではないガイドとの組み合わせを確認することはできません。
step2. テスト環境タグを 利用した確認
■全ガイド共通 ・作成したガイドの見た目に問題ないか？ ・自社プロダクトとOnboardingの干渉によって、UIが崩れたり、ボタンが押せないなどの不具合が発生していないか？ ・他のガイドと干渉して不具合が発生していないか？ ・ターゲット設定で設定したとおりに表示されるか？ ■ツアー/ポップアップ ・作成したガイドでフォーカス外れがないか？ ■自動表示条件を設定しているゴール/ポップアップ ・設定条件で正しく表示されるか？ ・条件外の場合に表示されていないか？ ■ヒント ・意図した場所に配置されているか？ ・アイコンが意図した形で表示されているか？ ・他のヒントと共存しても違和感ないか？ ・（want）［ヒントを表示するURL］で指定したページ以外でヒントが配置されていないか？
テスト環境タグは、下書き/公開（アクティブ）のステータスのものが表示されます。 ツアー/ポップアップについては、下書きの優先順位に基づいて上記ステータスのものが表示されます。 テスト環境タグでは、プレビュー拡張機能と違い、ヒントとポップアップ、ヒントとツアーなどの複数のガイド種類を組み合わせた体験を確認することができます。
step3. 本番環境タグにて公開対象を 一部に限定した確認
テスト環境タグを利用した確認と同様の内容
本番環境タグは公開設定したガイドしか表示されません。（下書き状態のものは表示されません。）

3-1-3. ガイドのテスト実施確認書のサンプル

以下にガイドの本番リリース前チェックシートを作成しました。 参考にお使いください。

3-2. カスタムイベントの確認の実施方法

☝

カスタムイベントのテストは、意図したとおりに計測ができているか？を確認します。

3-2-1. カスタムイベントの確認の流れ

カスタムイベントは以下の流れで確認していきます。

step1. テスト環境タグを利用した確認 ↓ step2. 本番環境タグを利用した確認 ↓ step3. CSVダウンロードによる計測確認

3-2-2. テスト環境タグ・本番環境タグを利用した確認の方法

☝

テスト環境タグ、本番環境タグともに同じ方法で確認をします。 カスタムイベントのテストはChromeの検証（デベロッパー）ツールにて確認します。 今回は例として、「レポートCSVダウンロードボタンのクリック」を確認します。

image
  1. テストしたいカスタムイベントを設定したページ内で右クリックし、［検証］をクリック
    2. image
  2. 検証ツール内の［Network］をクリック
    3. image
  1. イベント計測ができているか確認しやすくするため、フィルター欄に［log.gif?acc］と入力
    2. image
  1. 計測しているイベントが取得できるように画面を操作する 今回のサンプルでは、レポートページ内にあるダウンロードボタンをクリックするという動きをします。 操作後、以下画像のように、Network内のName欄に設定していたイベント名があれば計測できています。
    2. image

3-3-3. CSVダウンロードによる計測確認

☝

本番環境タグを通した計測では、Onboardingのレポート画面内のCSVダウンロードにより、計測できているか確認することもできます。

CSVダウンロードは、1時間ごとに更新処理が実行されます。 そのため、2時間前に計測したデータの確認が実施できます。 例：19時にダウンロードしたら、17時までのデータがダウンロードできる。

ダウンロード方法は以下の画像をご確認ください。