設定:初期セットアップ〜配信マニュアル
📘

設定:初期セットアップ〜配信マニュアル

💡
Flyleサーベイは、事前に利用申込みをいただいたお客様にのみ提供させていただく機能となります。利用を希望される場合は、こちらのサービスサイトよりお申し込みください。 ※サーベイの製品化に向けて大幅な機能改修を想定しているため、本マニュアルは頻度高く更新されます。
目次(▶︎をクリックすると目次が開きます)

Flyleサーベイとは

image

サーベイβ版を利用するまでの流れ

  1. Flyle Surveyのサービスサイトのフォームからお申し込みください。
  2. 簡単なデモとヒアリングを実施させていただきます。
  3. サーベイβ版の利用ガイドを共有させていただきますので、内容をご確認ください。
  4. メールやチャットにて、改めてご利用意向のヒアリングさせていただきます。
  5. 利用希望の場合、貴社ワークスペースにてサーベイを利用できる設定をさせていただきます。
  6. 実際のご利用(タグの設置、設問設定、配信、回答確認、など)いただきます。
  7. 製品版リリースまで、プロダクト改善のためのユーザーヒアリングにご協力ください

🛠 手順.1:サーベイを導入する

💡
本マニュアルでは、下記の通り用語を定義します。
  • 配信設定画面:サーベイの設問や配信対象者、トリガを設定する画面。
  • 回答確認画面:サーベイの回答を確認する画面。
  • 回答フォーム:実際にサーベイに対する回答を行うためのフォーム。
  • 配信者:サーベイの設定を行い、配信作業や回答結果の確認を行う方。
  • 配信対象者:配信条件に合致し、回答フォームが表示される対象者。
  • トラッキング対象者:配信条件の判定が行われる全ての対象者。配信条件を何も設定しない場合、トラッキング対象者=配信対象者、となる

手順. 1-1:SDKを利用するためのサーベイスクリプトを埋め込む

Flyleサーベイを利用するためには、Flyleが提供するサーベイSDKを利用するためのスクリプトを設定する必要があります。下記に記載されている、 方法①、方法②からどちらかをお選びください。

方法①:プロダクト内にスクリプトを設定する場合

  1. 下記のコードを <head>タグ内に追加してください。
  2. sdkKeyは、Flyleの「連携設定(https://app.flyle.io/integration-settings) > サーベイ」欄のSDKキーからコピーをして、 xxxxxxxxxx の箇所と差し替えてください。
<script>window.flyleSurvey = { sdkKey: 'xxxxxxxxxx' };</script>
<script defer type="module" src="https://cdn.flyle.io/survey/index.js" ></script>

方法②:Google Tag Manager経由でスクリプトを設定する場合

  1. GTM経由でFlyleサーベイを実施する場合、「タグの種類」から「カスタムHTML」を選択し、下記のコードを「HTML」の入力欄に記述します。
  2. sdkKeyは、Flyleの「連携設定(https://app.flyle.io/integration-settings) > サーベイ」欄のSDKキーからコピーをして、 xxxxxxxxxx の箇所と差し替えてください。
<script>
  window.flyleSurvey = { sdkKey: 'xxxxxxxxxx' };
  var script = document.createElement('script');
  script.setAttribute('type', 'module');
  script.setAttribute('defer', '');
  script.setAttribute('src', 'https://cdn.flyle.io/survey/index.js');
  document.body.appendChild(script);
</script>

手順. 1-2:カスタムプロパティを利用する場合の設定方法

カスタムプロパティを利用することで、サーベイ配信対象の絞り込みや、回答者の絞り込み、回答者属性の確認などに利用できます。

  • カスタムプロパティの設定は、以下のコードを参考にしてください。
    • JavaScript, TypeScriptどちらでも利用可能です。
    • ※カスタムプロパティには個人情報は設定しないでください
  • ビルトインプロパティ:サーベイをより便利に活用するために利用できる、特別な仕様のプロパティです。
    • userId: ユーザーIDを指定できます。これにより、同じユーザーが別の環境からアクセスした場合でも同一の回答者とみなすことができます。また、エクスポート時にもユーザーIDを含めることができるため、Flyleサーベイの回答結果を外部のデータと突合して分析することが可能となります。
    • userName: ユーザー名を指定することができます。回答確認時画面上で、回答者名を容易に把握できます。
// ----------------------------------------------------------------------
// flyle-survey-utils.js (お客様のプロジェクトに以下のコードをコピーしてください)
// ----------------------------------------------------------------------

/**
 * - userId : ユーザーを一意に特定するIDです. 指定しない場合は同一ブラウザからのアクセスは同一ユーザーとして扱います.
 * - userName : ユーザー名を設定できます. ユーザー名を指定するとサーベイの回答結果を確認する際に誰からの回答であるかを把握しやすくなります.
 * - data : ユーザー属性を設定できます. ここで指定した情報は、サーベイの配信対象条件に使用できます.
 *
 * @typedef {{ userId?: string; userName?: string; data?: Record<string, string | number> }} SetUserDataParams
 */

/**
 * - sdkKey : 連携設定ページを参照してAPIキーを指定してください.
 * - setUserData : ユーザー情報を設定します.
 *
 * @typedef {{ sdkKey?: string; setUserData?: (params: SetUserDataParams) => Promise<void> }} FlyleSurvey
 */

/** @typedef {Window & { flyleSurvey?: FlyleSurvey }} CustomWindow */

/**
 * 関数が読み込まれるまで最大10秒待機します.
 *
 * @returns {Promise<FlyleSurvey | undefined>}
 */
const waitUntilLoaded = async () => {
  let count = 0;
  do {
    count += 1;
    const { flyleSurvey } = /** @type {CustomWindow} */ (/** @type {unknown} */ (window));
    if (flyleSurvey?.setUserData) return flyleSurvey;
    await new Promise((resolve) => setTimeout(resolve, 100));
  } while (count < 100);
  return undefined;
};

/**
 * ユーザー情報を設定します.
 *
 * @param {SetUserDataParams} params
 */
export const setUserData = async (params) => {
  const flyleSurvey = await waitUntilLoaded();
  if (flyleSurvey) flyleSurvey.setUserData?.(params);
  // エラー処理は都合に合わせて自由に変更してください.
  else console.error('Flyle Survey SDK is not loaded.');
};
// ----------------------------------------------------------------------
// カスタムプロパティを設定するJavaScriptファイル
// ----------------------------------------------------------------------
import { setUserData } from 'path/to/flyle-survey-utils';

setUserData({
  userId: "xxx",
  userName: "yyy",
  data: {
    // 任意のプロパティを設定できます.
    foo: "zzz",
    bar: 123,
  },
});

手順. 1-3:サーベイが配信できるかどうか、動作確認をする

SDKの設定が正しく行われているかを確認するために、動作確認を行います。

下記は動作確認方法の一例となります。

  1. 何らかの回答フォームを新規作成する
  2. (必要であれば)配信対象、配信トリガを設定する
  3. 配信トリガのクエリ文字列に test=true などの文字を指定する
  4. (こちらは配信対象者側の操作)配信条件に合致する状態でURLに3のクエリ文字列を指定してアクセスし( https://abc.com?test=true など)回答フォームが表示されることを確認する
  5. 回答確認画面のcsvエクスポート→「未回答者を含む」をチェックしてcsvダウンロードすることで、実際にサーベイが表示されたユーザーの一覧を確認できます

補足:動作確認モードについて

💡
サーベイを配信するにあたり、配信対象や配信トリガなどの配信条件が意図通りに動作しているかを事前に確認する必要があります。「動作確認モード」は、特定のJavaScriptコードを実行することで、サーベイフォームの表示条件や見た目を何度でも確認できる機能です。詳しい説明は下記マニュアルを参照してください。
「動作確認モード」を利用し、サーベイの表示条件を繰り返し確認する

🛠 手順.2:サーベイを作成し、配信する

手順. 2-1:設問を設定する

プレビュー画面の使い方

フォームの質問の設定画面では、画面幅に応じた表示を確認しながら質問の設定をすることが可能です。質問のタイトルや詳細など、入力した内容は即時プレビューとして反映されます。

image

表示方法の設定

回答フォームの表示方法は 1. 右下ポップアップ 2. 下部固定の2つから選択できます。サーベイの内容に応じて表示方法をお選びください。

1. 右下ポップアップ表示
1. 右下ポップアップ表示
2. 下部固定表示
2. 下部固定表示

質問の設定

質問は最大5個まで設定することが可能です。質問に選択できるデータ型と設定項目は下記の通りです。

  1. 数値(スケール)
    • 0~10まで最小値、最大値を設定し、数字による回答を取得することができます。
    • 設定項目:質問のタイトル、詳細、最小値/最大値のラベル、スケールの値
  2. テキスト入力(単行)
    • 1行分のテキストによる回答を取得します。
    • 設定項目:質問のタイトル、詳細、プレースホルダー
  3. テキスト入力(複数行)
    • 複数行のテキストによる回答を取得します。
    • 設定項目:質問のタイトル、詳細、プレースホルダー
  4. 単一選択
    • 複数の選択肢の中から一つを選択して回答を取得します。
    • 設定項目:質問のタイトル、詳細、選択肢
  5. 複数選択
    • 複数の選択肢の中から複数個を選択して回答を取得します。
    • 設定項目:質問のタイトル、詳細、選択肢

回答完了画面、追加アクションの設定

回答完了画面では、完了メッセージの他に「追加アクション」を設定することができます。例えば、回答が完了したユーザーに対して追加のユーザーインタビューを実施したい場合、日程調整用のリンクを設定しておくことで、手間をかけずにユーザーインタビューの機会を創出することができます。その他にも、更に詳しいアンケートに回答いただくなど、自由な追加アクションが設定可能です。

手順. 2-2:配信対象を設定する

💡
※配信ターゲットを設定するためには、事前にカスタムプロパティの設定が必要となります。詳しくはこちらをご参照ください。

カスタムプロパティを利用して、特定のユーザー属性にのみサーベイを配信することができます。

例えば、カスタムプロパティに userRole を設定し、そのプロパティにが member , admin などの値が入力されてる場合、 admin ユーザーにのみサーベイが配信されるよう設定することが可能となります。条件に設定するプロパティ名を間違えないよう、配信前に改めてご確認ください。

配信対象は、or条件 / and条件の組み合わせによって詳細に設定することが可能です。

image

手順. 2-3:配信トリガを設定する

「配信対象」は配信対象者のユーザー属性を利用した条件を設定することができますが、「配信トリガ」はユーザーの行動を利用した配信条件を設定することができます。

配信トリガには下記の条件を指定することが可能です。また、and / or 条件を組み合わせてトリガを設定することも可能です。

image
  1. URLオリジン:配信対象者が閲覧しているページのURLに含まれるスキーム、ホスト。(ポート番号は未対応)完全一致のみ指定可能。
    • 例:https://app.flyle.io, https://test-app.flyle.io, など
  2. URLパス:配信対象者が閲覧しているページのURLに含まれるパス。完全一致のみ指定可能。
    • 例:/settings, /aaa/bbb, など
  3. URLハッシュ:配信対象者が閲覧しているページのURLに含まれる#~のハッシュ。完全一致のみ指定可能。
    • 例:#about, #hash, など
  4. URLクエリ:配信対象者が閲覧しているページのURLに含まれるクエリ文字列。部分一致のみ指定可能。
    • 例:test=true, sample=123, など
  5. テキスト:配信対象者が表示しているページに含まれるテキスト。部分一致のみ指定可能。
    • 例:検索条件を指定する, ご登録ありがとうございました, など
  6. CSSセレクタ:配信対象者が表示しているページに含まれるCSSセレクタ。部分一致のみ指定可能。
    • 例:.search-condition, #caption, など

手順. 2-4:配信ゴール・配信期間を設定する

その他の設定項目として、配信ゴールと配信期間を設定することが可能です。

image
  • 配信ゴール:表示数や回答数の上限を設定できます。上限に達したらサーベイの配信を停止します。
  • 配信期間:配信開始日と終了日を指定できます。何も指定しない場合、特に期間の制限なくサーベイが配信されます。
    • *現状、配信期間はUTCとして扱われます(例:配信期間を 4/1 ~ 4/3 と設定した場合、日本時間(JST)での配信時間は 4/1 9:00 ~ 4/4 8:59となります)。

手順. 2-5:サーベイを配信する

サーベイには「配信中」と「下書き」の2つのステータスがあります。

画面右上のそれぞれのボタンによってステータスが変更されます。

  1. 保存して配信:設定を保存し、配信が開始されます。
  2. 下書き:下書き状態となり、配信されません。

👀 サーベイの回答結果を確認する

フォーム一覧画面
フォーム一覧画面
回答確認画面(概要タブ)
回答確認画面(概要タブ)
回答確認画面(個別回答タブ)
回答確認画面(個別回答タブ)

表示数と回答数について

サーベイ一覧、回答確認画面には回答フォームが表示された回数と、実際に回答された件数が表示されます。想定よりも表示数が少ない場合は、配信条件や配信トリガの条件を緩めるなどご対応ください。

質問が複数あった場合、1つでも質問に回答すれば回答数は1とカウントされます。

概要タブで回答を確認する

回答確認画面の「概要」タブでは、各質問毎の回答の集計を確認することができます。質問タイプが数値スケールや選択肢の場合、回答数の多い選択肢順に並べ替えができるため、回答の傾向を素早く把握できます。

個別タブで回答を確認する

回答確認画面の「個別」タブでは、回答者毎の回答内容を確認することができます。カスタムプロパティを設定している場合は回答者属性として表示されるため、回答者の背景情報を把握した上で回答を確認することができます。

回答結果を絞り込む

回答の絞り込みには下記の2つの項目を指定することが可能です。

  1. カスタムプロパティによる絞り込み
    • プロパティ名、値、条件(~と等しい、~を含む、など)を指定できます。特定のユーザー属性にのみ絞り込みを行って回答を確認したい場合に有効です。
    • 例:userRoleがadminの回答のみに絞り込む、など
  2. 回答結果による絞り込み
    • 特定の回答をした回答者のみを絞り込むことができます。
    • 例:NPSの回答が0~6の回答者の回答のみに絞り込む、「検索機能を改善をして欲しい」という選択肢を選んだ回答者の回答のみに絞り込む、など

回答をエクスポートする

より詳細な分析や外部データと突合したい場合などは、回答確認画面の「エクスポート」ボタンを選択することで、回答の一覧をcsvエクスポートすることができます。絞り込みにも対応しております。

csvをダウンロードする際、回答による絞り込みを行なっていない場合のみダウンロードするデータを 1.回答のみ、2. 未回答者を含む、から選択することが可能です。2. 未回答者を含む、を選択した場合は、フォームが表示された順に未回答/回答済みユーザーを確認することができるため、配信済みのサーベイが誰に対して表示されたかを確認できます。

エクスポートされるcsvに含まれる項目は、下記の通りです。

  1. 回答フォームの表示時間
  2. 各質問と回答
  3. カスタムプロパティ(下記画像の「ユーザー情報」に該当するデータ)
image

📋 回答フォームについて

回答フォームの表示条件

回答フォームが表示されるケースには、下記の2つのパターンが存在します。

  1. 配信対象と配信トリガの条件に一致する場合
  2. 一度回答フォームが表示された後、回答完了したり「✗」ボタンによって回答フォームを閉じることなくページから離脱した場合、離脱時の状態がスナップショットとしてブラウザに保存されます。その後再びトラッキング対象のページにアクセスすると、配信条件に合致しない場合でもSDKが読み込まれたタイミングでスナップショットが復元されます。例えば下記のような場合となります。
    1. サーベイスクリプトを埋め込んだプロダクトのURLが https://xxx.com とする
    2. サーベイの配信トリガに「パスが /abc と等しい」を設定し、配信を行う
    3. 配信対象者が https://xxx.com/abc にアクセスし、回答フォームが表示される
    4. 回答フォームが表示された状態でページを閉じる
    5. 配信対象者が https://xxx.com にアクセスする
    6. 前回ページを閉じた際に表示されていた回答フォームが、再度表示される
      1. 1度配信対象者に回答フォームが表示された場合、2回目以降は配信トリガに合致しなくても表示されます。
      2. 回答途中でページを閉じた場合、回答途中のステップから回答フォームが表示されます。
      3. 回答が完了、もしくは「✗」ボタンでフォームを非表示にした場合、同じフォームは表示されなくなります。
      4. スナップショットの情報は、ブラウザの開発者ツール > アプリケーション > Local Storage > flyleSurveyFormSnapshot に格納されています。

その他の詳細な仕様

  • フォーム右上の「✗」ボタンを押してフォームを閉じたユーザーに対しては、その後同じフォームは表示されなくなります。
  • 設定画面で必須回答に設定している質問は、回答が入力されるまで次のステップに進むボタンは押せません。
  • 条件に該当するフォームが複数ある場合、一度フォームに回答した後は24時間新たなフォームは表示されません。

🤔 よくあるご質問

Q. サーベイの回答結果の「表示数」は同じユーザーに複数回サーベイが表示された場合は、表示された回数がカウントされますか?

いいえ。同じ人に複数回表示された場合には、1としてカウントされます。サーベイの回答結果の「表示数」はユニーク数です。

Q. β版はどのようなものですか?

A. 本格的なサービス提供を見据え、一部のお客様に開発中の機能をご利用いただき、フィードバックを参考に機能を改善していくためのバージョンとなります。

Q. β版の利用時、どのようなサポートを受けることができますか?

A. サーベイ配信までの技術的なサポートに加え、サーベイの設計や回答の活用に関するサポートもさせていただく予定ですので、ご不明点などございましたら遠慮なくお申し付けください。

Q. β版での利用制限はありますか?

A. 製品版ではユーザートラッキング数に応じた利用料をご請求させていただく想定ですが、β版では制限なく全てのサーベイ機能をご利用いただけます。(事前に想定トラッキングユーザー数はヒアリングさせていただきます)

Q. β版の利用で留意すべきことはありますか?

A. 特にありませんが、製品版のリリースに向けて何度かユーザーヒアリングにご協力いただけますと幸いです。また、品質担保のため弊社内でテストを行った後にリリースを行いますが、お客様がご利用中に不具合と感じた事象がありましたら、すぐにご報告いただけますと幸いです。

🗓 今後の開発スケジュール

  1. ~2022/7:製品版に向けての改善
    1. 一部の利用希望者に限定し、サーベイβ版を公開します。
    2. β版利用ユーザーからのフィードバックへの対応を中心に開発を行います。
    3. サーベイの回答結果をFlyleのソリューションに活用できるように機能を開発します。
  2. 2022/7~:有償β版の提供
    1. 一部のユーザーに対して、サーベイβ版を有償提供します。
  3. 2022/8~:製品版の提供
    1. 全てのユーザーに対して、サーベイ機能を公開します。
    2. サーベイ機能は有償にてご提供予定です。
「動作確認モード」を利用し、サーベイの表示条件を繰り返し確認する (1)