# ウィジェットとマイクロサイトのコンポーネントの概要
PXAコースを受講する
{% hint style="success" %}
**限定**：コンポーネントは、提供されたテンプレートに含まれるものを除き、特定の製品エディションまたはアドオンでのみ利用できます。マイクロサイトで使用するコンポーネントをより細かく制御したい場合は、プログラムのアップグレードについてお問い合わせください。
{% endhint %}
コンポーネントは、ヒーロー画像やタスクカードのような個々の構成要素であり、Advocateプログラムのウィジェットまたはマイクロサイトを構成します。これらの要素は [参加者の体験](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/introduction-to-participant-experiences) を形作り、ブランドに合わせてカスタマイズできます。
この記事では、ウィジェットおよびマイクロサイトのエディターで利用可能なコンポーネントをカテゴリ別に一覧表示します。ほとんどのコンポーネントはスタイル設定やカスタマイズに対応していますが、一部にはデザイン上の制約があります。エディター画面内でコンポーネントの状態をプレビューすることもできます。
統計
使用する *統計* コンポーネントを使うと、参加者にプログラムでの進捗状況を知らせることができます。これらのコンポーネントが対応する統計の一覧については、 [ウィジェットおよびマイクロサイトの統計](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-statistics-explained).
| コンポーネント | 説明 |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| ポイント残高 | 参加者のポイント残高を表示します。ポイントで参加者に報酬を与えるAdvocateプログラムで使用されます。
|
| 獲得したギフトカード | Advocateが獲得したギフトカード報酬の数を表示します。
|
| 紹介 | 参加者が行った紹介数を表示します。開始済みの紹介とコンバージョン済みの紹介を含みます。
|
| 3つの統計を含むコンテナ | 3つの統計を表示するためのスペースを備えたテンプレートです。表示する統計は変更できます。統計は必要に応じて追加・削除できます。
|
| その他の統計 | 任意の統計を表示します。紹介統計、各種報酬統計、またはカスタム統計を選択できます。 |
共通コンポーネント
*共通コンポーネント* は、ウィジェットやマイクロサイト全体の機能性とデザインの一貫性を高めるために広く使われます。ヒーロー画像、レイアウトの整形、説明用のプログラム手順など、汎用的な視覚要素や構造要素を含みます。
| コンポーネント | 説明 |
| ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 2カラムのヒーロー画像 | 2カラムにまたがるバナー画像とヘッダーテキストです。画像、テキスト、背景色を更新できます。
|
| オーバーレイヒーロー画像 | テキストが重ねられたバナー画像です。画像、テキスト、背景色を更新できます。
|
| 画像 | 画像です。背景色、配置、高さ、幅を変更できます。
|
| リンクボタン | クリック可能なボタンで、参加者を選択したリンク先へリダイレクトします。ボタンの色は、Brand Containerレベルで設定されたブランドカラーによって制御されます。
|
| プログラムの説明 | Advocateプログラムの仕組み、たとえば報酬の獲得方法などを説明するテンプレートです。デフォルトで2つの説明ステップが含まれます。追加ステップもできます。色はBrand Containerレベルで設定されたブランドカラーによって制御されます。
|
| プログラム説明ステップ | プログラムの一部を説明するテキストを追加します。プログラムの説明コンポーネント内に配置できます。色はBrand Containerレベルで設定されたブランドカラーによって制御されます。
|
| プログラムのタイムライン | 参加者向けに、紹介の流れと報酬の概要を表示します。必要に応じてタイムラインの項目を追加・削除できます。円アイコンと項目間の線の色は、Brand Containerレベルで設定されたブランドカラーによって制御されます。
|
| タイムライン項目 | 紹介の流れの1ステップを表示するために、プログラムのタイムラインコンポーネント内に配置できます。円アイコンと項目間の線の色は、Brand Containerレベルで設定されたブランドカラーによって制御されます。
|
| ユーザー名の表示 | 参加者のフルネームを動的に取得して表示します。参加者が名前を入力していない場合は、デフォルトで「Anonymous User」と表示されます。
|
報酬
{% hint style="info" %}
**注：** *報酬* コンポーネントは、認証済みアクセスのウィジェットとマイクロサイトでのみ使用できます。
{% endhint %}
| コンポーネント | 説明 |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| タスクカードフィード | タスクカードを使うと、ユーザーはウィジェットやマイクロサイト上で直接、アクションを実行したり、Advocateプログラムの目標への進捗を確認したりできます。このコンポーネントは、ウィジェットまたはマイクロサイトに複数のタスクカードを追加します。ボタンの色はBrand Containerレベルで設定されたブランドカラーによって制御されます。
|
| 報酬の交換 | 参加者が獲得した報酬を別の種類の報酬と交換できるようにします。
これを使用するには、 報酬の交換 が設定されている必要があります。
|
| 報酬テーブル | 参加者が獲得した報酬の一覧を表示します。手動報酬や、複数のAdvocateプログラムで獲得した報酬を含めることができます。
|
| 顧客メモ列 | 報酬テーブルに別のメモ列を追加します。Reward tableコンポーネント内に配置する必要があります。
|
| 日付列 | 報酬テーブルに別の日付列を追加します。Reward tableコンポーネント内に配置する必要があります。
|
| 報酬列 | 報酬テーブルに別の報酬列を追加します。Reward tableコンポーネント内に配置する必要があります。
|
| ソース列 | 報酬テーブルに別のソース列を追加します。Reward tableコンポーネント内に配置する必要があります。
|
| ステータス列 | 報酬テーブルに別のステータス列を追加します。Reward tableコンポーネント内に配置する必要があります。
|
マイクロサイトコンポーネント
*マイクロサイト* コンポーネントは、主にマイクロサイトの登録フォームとナビゲーションサイドバーに使用されます。これらのコンポーネントをプログラムのウィジェットに追加することはできません。
| コンポーネント | 説明 |
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| フォームのチェックボックスフィールド | 登録フォームにチェックボックスを追加します。チェックされたかどうかを、Advocate参加者のカスタムフィールドにマッピングできます。詳細は「マイクロサイト登録フォームの送信内容を表示」をご覧ください。
|
| フォームのドロップダウンフィールド | カスタマイズ可能な項目を含むドロップダウンリストを登録フォームに追加します。ユーザーが選択した項目を、Advocate参加者のカスタムフィールドにマッピングできます。サポートが必要な場合はお問い合わせください。
|
| フォームの入力フィールド | 自由記述のテキスト入力フィールドを登録フォームに追加します。ユーザーが入力したテキストを、Advocate参加者のカスタムフィールドにマッピングできます。 サポートにお問い合わせください サポートが必要な場合。
|
| フォームの名前フィールド | 登録フォームに、入力可能な名と姓のフィールドを追加します。
|
| サイドバー項目 | マイクロサイトのサイドバーナビゲーションに、新しいページまたはリンクを追加します。マイクロサイトのLogged In Layout内にのみ配置できます。
|
| フォームのパスワードフィールド | 登録フォームに、入力可能なパスワードフィールドを追加します。
|
即時アクセス
*即時アクセス* コンポーネントを使うと、紹介された友達が標準の登録手続きを経ずに、すばやく簡単にサインアップしたり報酬を引き換えたりできます。即時アクセスの紹介ウィジェットや友達登録フローを使用するプログラムに最適です。
| コンポーネント | 説明 |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| クーポンコード | Fuel Tank報酬の引き換え可能なコードを表示します。
この 報酬Fuel Tank が、このコンポーネントを意図どおりに機能させるための利用可能なクーポンコードを持っている必要があります。
|
| Advocate登録 | 新しいAdvocateがメールアドレスを入力して登録し、紹介できるようにします。メールアドレスを入力すると、ユーザーは2つ目の画面に移動し、紹介用共有リンクにアクセスできます。即時アクセスのWebsite Referral Widgetで使用されます。
|
| 現在のユーザーをサインアウト | 表示中の個別化された即時アクセス画面を終了できるようにします。
|
| 友達登録 | 紹介された友達がメールアドレスを入力して登録できるようにします。メールアドレスを入力すると、ユーザーは2つ目の画面に移動し、Coupon Code報酬にアクセスできます。即時アクセスのFriend Widgetで使用されます。
|
レイアウト
*レイアウト* コンポーネントを使うと、他のコンポーネントを整理してグループ化できます。セクション、行、列、タブの作成に使用します。
| コンポーネント | 説明 |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 2カラムのヒーローレイアウト | 2列のコンテンツを備えたヒーローレイアウトを追加します。
|
| 行レイアウトコンテナ | コンテンツ用の新しい行コンテナを追加します。行の中に他のコンポーネントを配置できます。
|
| 列レイアウトコンテナ | コンテンツ用の新しい列コンテナを追加します。列の中に他のコンポーネントを配置できます。
|
| タブ | 汎用タブグループに新しいタブを追加します。
|
| 汎用タブグループ | タブのグループを追加します。各タブには、異なるコンポーネントやコンテンツを含めることができます。デフォルトで3つのタブがありますが、必要に応じて追加・削除できます。
|
| タイトル付きセクション | 見出しと段落テキストを含む新しいセクションを追加します。タイトル付きセクションの見出し下に、他のコンポーネントを追加できます。
|
請求書
*請求書* コンポーネントを使うと、請求書コンポーネントを挿入して収益データを表示できます。
| コンポーネント | 説明 |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 請求書テーブル | 収益データを格納する、展開可能な請求書アコーディオンを追加します。
|
| 請求書テーブルの日付列 | 請求書テーブルコンポーネントに新しい列を追加します。
|
この *リーダーボード* コンポーネントを使うと、プログラム参加者を順位付けし、上位者に報酬を与え、参加者の意欲を高めてプログラムの成果を向上させることができます。リーダーボードを [認証済みアクセスウィジェット](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained) または [マイクロサイト](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview)に追加し、スコアリングシステム、ランキングシステム、参加者フィルタリングオプションを設定できます。詳細は以下の記事をご覧ください：
* [リーダーボードの説明](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/leaderboards-explained)
* [リーダーボードを設定する](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/set-up-a-leaderboard)
| コンポーネント | 説明 |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 紹介開始 | このタイプのリーダーボードは、開始した紹介の数で参加者を順位付けします。顧客Advocateのスコアは、開始した紹介数に対応します。
|
| 紹介コンバージョン | このタイプのリーダーボードは、コンバージョンした紹介数で参加者を順位付けします。紹介は、紹介された友達が、たとえば設定した金額の購入など、プログラムの目標を達成した時点でコンバージョン済みと見なされます。顧客Advocateのスコアは、コンバージョンした紹介数に対応します。
|
| 獲得ポイント | このタイプのリーダーボードは、ポイントを報酬として付与するAdvocateプログラムで獲得したポイントの合計数で参加者を順位付けします。保留中またはキャンセルされていない限り、すべての報酬単位ポイントがカウントされます。このリーダーボードタイプは、ポイント報酬タイプにのみ有効です。
|
| 匿名リーダーボード | 他のプログラム参加者に関する個人識別情報を一切表示しない、完全に匿名化されたリーダーボード版です。任意のリーダーボードタイプを表示できます。
|
税金と現金
*税金と現金* コンポーネントを使うと、税務フォームの収集と現金支払いのオプションを [認証済みアクセスウィジェット](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained) または [マイクロサイト](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview).
このコンポーネントグループは、 [*現金支払い*](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/advocate-rewards/pay-with-cash/cash-payouts-for-advocate-explained) 機能がアカウントで有効になっている場合にのみ利用できます。
| コンポーネント | 説明 |
| ------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 支払いステータスアラート | 現金支払いを受け取る前に必要な対応を参加者に通知します。このコンポーネントには、支払い設定の確認画面へ移動するCTAボタンが含まれます。
必要に応じて、参加者がコンポーネントを表示したときに見るテキスト説明を自由にカスタマイズできます。
|
| マイクロサイト＆ウィジェットの現金支払いフォーム | 参加者の銀行情報と、W-8やW-9のような適用される税務フォームを収集するフォームを挿入します。
必要に応じて、参加者がフォームを表示したときに見るテキスト説明を自由にカスタマイズできます。
このコンポーネント内で、確認アラートや要件も設定できます。
|
共有
*共有* コンポーネントを使うと、参加者は複数のチャネルで紹介リンクやコードを簡単に宣伝できます。参加者が共有ボタンをクリックすると、 *Facebook*, *LinkedIn*, *WhatsApp*、または *メール*などの選択したチャネルが、入力済みメッセージまたはリンクとともに開き、すぐに送信できます。
Referral Codeのような一部のコンポーネントでは、参加者個別の紹介コードまたはプロモコードが、クリップボードへのコピーオプション付きで表示され、すばやく共有できます。Promo Codesのような他のコンポーネントでは、複数の利用可能なコードが（割り当てられている場合）スライダー表示で提示され、共有ボタンが含まれるため、参加者は選択したコードをすぐに投稿または送信できます。これらのツールにより、参加者は簡単に情報を広め、新しい紹介を促進できます。
| コンポーネント | 説明 |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 紹介コード | クリップボードにコピーするオプション付きの紹介コードフィールドを表示します。Promo Codes機能の一部として使用されます。
|
| プロモコード | あらかじめ整形されたコンポーネントブロックで、紹介プロモコードフィールドと、複数割り当てられている場合に各コードを切り替えるためのスライダーが含まれます。また、共有リンク、Facebook、LinkedIn、Twitter / Xの共有ボタンコンポーネントも含まれます。
|
| Facebook共有ボタン | カスタマイズ可能なテキスト付きの「Facebookで共有」ボタンを表示します。クリックすると、ブランドのソーシャルメッセージが事前入力された状態で、ユーザーのFacebookプロフィールの新規投稿画面にリダイレクトします。
|
| X共有ボタン | カスタマイズ可能なテキスト付きの「Xで共有」ボタンを表示します。クリックすると、ブランドのソーシャルメッセージが事前入力された状態で、ユーザーのXアカウントの新規投稿画面にリダイレクトします。
|
| メール共有ボタン | カスタマイズ可能なテキスト付きの「メールで共有」ボタンを表示します。クリックすると、ユーザーの既定のメールアプリが開き、ブランドのソーシャルメッセージが事前入力された新規メールが作成されます。
|
| モバイル共有シートボタン | 参加者のWebブラウザ内で共有するためのボタンを表示します。クリックすると、リンクを共有するために開ける利用可能なアプリの一覧メニューが開きます。アプリを選択すると、ブランドのソーシャルメッセージが事前入力された新規投稿またはメッセージが作成されます。
|
| LinkedIn共有ボタン | カスタマイズ可能なテキスト付きの「LinkedInで共有」ボタンを表示します。クリックすると、ブランドのソーシャルメッセージが事前入力された状態で、ユーザーのLinkedInプロフィールの新規投稿画面にリダイレクトします。
|
| SMS共有ボタン | カスタマイズ可能なテキスト付きの「友達にテキスト送信」ボタンを表示します。クリックすると、ユーザーの既定のSMS/テキストメッセージアプリにリダイレクトされ、ブランドのソーシャルメッセージが事前入力された新しいSMS/テキストメッセージが作成されます。
|
| Messenger共有ボタン | カスタマイズ可能なテキスト付きの「Messengerで共有」ボタンを表示します。クリックすると、ブランドのソーシャルメッセージが事前入力された状態で、ユーザーのFacebook Messengerアプリの新規メッセージ画面にリダイレクトします。
|
| WhatsApp共有ボタン | カスタマイズ可能なテキスト付きの「WhatsAppで共有」ボタンを表示します。クリックすると、ブランドのソーシャルメッセージが事前入力された状態で、ユーザーのWhatsappアカウントの新規メッセージ画面にリダイレクトします。
|
| LINE共有ボタン | カスタマイズ可能なテキスト付きの「Line Messengerで共有」ボタンを表示します。クリックすると、ブランドのソーシャルメッセージが事前入力された状態で、ユーザーのLine Messengerアプリの新規メッセージ画面にリダイレクトします。
|
| Pinterest共有ボタン | カスタマイズ可能なテキスト付きの「Pinterestで共有」ボタンを表示します。クリックすると、ブランドのソーシャルメッセージが事前入力された状態で、ユーザーのPinterestプロフィールの新規投稿画面にリダイレクトします。
|
| 共有リンク | このプログラムの参加者の共有リンクを表示します。
|
| QRコード | このプログラムの参加者の共有リンクをQRコード形式で表示します。
|
紹介
*紹介* コンポーネントは、参加者が紹介した友達とそのコンバージョン状況に関する情報を表示します。誰を紹介したか、いつコンバージョンしたか、紹介から得た報酬を簡単に追跡できます。
| コンポーネント | 説明 |
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 紹介カード | 以下を含む整形済みコンポーネントブロック： プログラムのタイムライン, 共有リンク、および Facebook, LinkedIn、 そして Twitter / X 共有ボタンコンポーネント。必要に応じて他のコンポーネントを追加・削除できます。
|
| 紹介テーブル | 参加者が紹介した友達、コンバージョン日、コンバージョン状況を表示するテーブルです。
|
| 紹介テーブルの日付列 | 紹介テーブルに別の日付列を追加します。Referral tableコンポーネント内に配置する必要があります。
|
| 紹介テーブルの報酬列 | 紹介テーブルに別の報酬列を追加します。Referral tableコンポーネント内に配置する必要があります。
|
| 紹介テーブルのステータス列 | 紹介テーブルに別のステータス列を追加します。Referral tableコンポーネント内に配置する必要があります。
|
| 紹介テーブルのユーザー列 | 紹介テーブルに別の顧客（紹介された友達）列を追加します。Referral tableコンポーネント内に配置する必要があります。
|
詳細設定
詳細設定コンポーネントを使うと、参加者に何を、いつ表示するかをより細かく制御できます。条件付きコンテンツ表示、プログラムの上書き、特定の対象に合わせた体験を調整するためのその他の特殊設定が可能です。
| コンポーネント | 説明 |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 条件付きエリア / セグメント | 参加者が特定の ユーザーセグメント.
に属する場合にのみ、このセクションのコンテンツを表示します。ユーザーセグメントを設定するには、コンポーネントのプロパティを開き、 Condition フィールドのJSONata式を編集します。
設定されたセグメント内のユーザーには条件付きセクションに表示されたすべてのコンテンツが見え、セグメント外のユーザーにはコンテンツは表示されません。
|
| 条件付きエリア / フィールド | 参加者のプロフィール上の カスタムフィールド に特定の値が含まれる場合にのみ、このセクションのコンテンツを表示します。
カスタムフィールド名と値を設定するには、コンポーネントのプロパティを開き、JSONata式を編集します。 Condition フィールドのJSONata式を編集します。
正しいカスタムフィールド値を持つユーザーには条件付きセクションに表示されたすべてのコンテンツが見え、正しいカスタムフィールド値を持たないユーザーにはコンテンツは表示されません。
|
| プログラムセクション | プログラムセクションコンポーネントを使うと、子コンポーネントのプログラムIDを上書きできます。特定のプログラムに関連付けられていないコンテンツを表示したい場合に使用します。ほとんどのウィジェットおよびマイクロサイトテンプレートにデフォルトで含まれています。
|
タイポグラフィ
タイポグラフィコンポーネントを使うと、ウィジェットやマイクロサイトに整形済みテキストブロックを追加できます。以下から選択してください：
* 段落
* 見出し 1
* 見出し 2
* 見出し 3
* 見出し 4
