> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md).
# ウィジェットとマイクロサイトのコンポーネントの解説
PXAコースを受講する
{% hint style="success" %}
**制限付き**：コンポーネントは、指定されたテンプレートに含まれているものを除き、特定の製品エディションまたはアドオンでのみ利用できます。マイクロサイトで使用するコンポーネントをより細かく制御したい場合は、お問い合わせのうえ、プログラムのアップグレードをご相談ください。
{% endhint %}
コンポーネントは、ヒーロー画像やタスクカードのような個々の構成要素で、Advocateプログラムのウィジェットまたはマイクロサイトを構成します。これらの要素は [参加者の体験](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/introduction-to-participant-experiences.md) ブランドに合わせてカスタマイズできます。
この記事では、ウィジェットおよびマイクロサイトエディターで利用できるコンポーネントをカテゴリ別に一覧表示します。ほとんどのコンポーネントはスタイル設定とカスタマイズをサポートしていますが、一部にはデザイン上の制限があります。エディター画面でコンポーネントの状態をプレビューすることもできます。
統計
使用 *統計* コンポーネントを使って、参加者にプログラムでの進捗を知らせます。これらのコンポーネントがサポートできる統計の一覧は、 [ウィジェットとマイクロサイトの統計](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-statistics-explained.md).
| コンポーネント | 説明 |
| ------------- | ----------------------------------------------------- |
| ポイント残高 | 参加者のポイント残高を表示します。参加者にポイントを付与する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プログラムで獲得した報酬を含めることができます。
|
| 顧客メモ列 | 報酬テーブルにメモ列を追加します。報酬テーブルコンポーネント内に配置する必要があります。
|
| 日付列 | 報酬テーブルに日付列を追加します。報酬テーブルコンポーネント内に配置する必要があります。
|
| 報酬列 | 報酬テーブルに報酬列を追加します。報酬テーブルコンポーネント内に配置する必要があります。
|
| ソース列 | 報酬テーブルにソース列を追加します。報酬テーブルコンポーネント内に配置する必要があります。
|
| ステータス列 | 報酬テーブルにステータス列を追加します。報酬テーブルコンポーネント内に配置する必要があります。
|
マイクロサイトのコンポーネント
*マイクロサイト* コンポーネントは主に、マイクロサイトの登録フォームとナビゲーションサイドバーで使用されます。これらのコンポーネントはプログラムウィジェットに追加できません。
| コンポーネント | 説明 |
| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| フォームのチェックボックスフィールド | 登録フォームにチェックボックスを追加します。ボックスがチェックされているかどうかを、Advocate参加者のカスタムフィールドにマッピングできます。詳細は「マイクロサイト登録フォームの送信内容を表示する」を参照してください。
|
| フォームのドロップダウンフィールド | 登録フォームに、項目をカスタマイズできるドロップダウンリストを追加します。ユーザーが選択した項目を、Advocate参加者のカスタムフィールドにマッピングできます。これについてはサポートにお問い合わせください。
|
| フォームの入力フィールド | 登録フォームに自由記入のテキスト入力フィールドを追加します。ユーザーが入力したテキストを、Advocate参加者のカスタムフィールドにマッピングできます。 サポートにお問い合わせください この件についての
|
| フォームの氏名フィールド | 登録フォームに、入力可能な名と姓のフィールドを追加します。
|
| サイドバー項目 | マイクロサイトのサイドバーナビゲーションに、新しいページまたはリンクを追加します。マイクロサイトのログイン後レイアウトでのみ配置できます。
|
| フォームのパスワードフィールド | 登録フォームに、入力可能なパスワードフィールドを追加します。
|
インスタントアクセス
*インスタントアクセス* コンポーネントを使うと、紹介された友人は通常の登録手続きを経ずに、すばやく簡単にサインアップしたり報酬を引き換えたりできます。インスタントアクセスの紹介ウィジェットや友だち登録フローを使用するプログラムに最適です。
| コンポーネント | 説明 |
| -------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| クーポンコード | Fuel Tank 報酬の引き換えコードを表示します。
この Fuel Tank報酬 このコンポーネントを意図どおりに機能させるには、利用可能なクーポンコードが必要です。
|
| Advocate登録 | 新しいAdvocateがメールアドレスを入力して登録し、紹介を行えるようにします。メールアドレスを入力すると、ユーザーは2番目の画面に移動し、紹介用の共有リンクにアクセスできます。インスタントアクセスの Website Referral Widget で使用されます。
|
| 現在のユーザーをサインアウト | 閲覧者が個別化されたインスタントアクセス表示を終了できるようにします。
|
| 友だち登録 | 紹介された友人がメールアドレスを入力して登録できるようにします。メールアドレスを入力すると、ユーザーは2番目の画面に移動し、クーポンコード報酬にアクセスできます。インスタントアクセスの Friend Widget で使用されます。
|
レイアウト
*レイアウト* コンポーネントを使うと、他のコンポーネントを整理してグループ化できます。セクション、行、列、タブの作成に使用します。
| コンポーネント | 説明 |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 2列ヒーローレイアウト | 2列のコンテンツを備えたヒーローレイアウトを追加します。
|
| 行レイアウトコンテナー | コンテンツ用の新しい行コンテナーを追加します。行内に他のコンポーネントを配置できます。
|
| 列レイアウトコンテナー | コンテンツ用の新しい列コンテナーを追加します。列内に他のコンポーネントを配置できます。
|
| タブ | 汎用タブグループに新しいタブを追加します。
|
| 汎用タブグループ | タブのグループを追加します。各タブには別々のコンポーネントとコンテンツを含めることができます。既定では3つのタブがありますが、必要に応じてタブを削除したり追加したりできます。
|
| タイトル付きセクション | 見出しと段落テキストを含む新しいセクションを追加します。タイトル付きセクションの見出しの下に他のコンポーネントを追加できます。
|
請求書
*請求書* コンポーネントを使うと、請求書コンポーネントを挿入して収益データを表示できます。
| コンポーネント | 説明 |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| 請求書テーブル | 収益データを格納する展開可能な請求書アコーディオンを追加します。
|
| 請求書テーブルの日付列 | 請求書テーブルコンポーネントに新しい列を追加します。
|
この *リーダーボード* コンポーネントを使うと、プログラム参加者をランク付けし、上位者に報酬を提供し、参加者の意欲を高めてプログラムでより大きな成果を促せます。リーダーボードをあなたの [認証済みアクセスウィジェット](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained.md) または [マイクロサイト](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview.md)に追加し、スコアリングシステム、ランキングシステム、参加者のフィルタリングオプションを設定します。詳細は以下の記事をご覧ください。
* [リーダーボードの解説](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/leaderboards-explained.md)
* [リーダーボードを設定する](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/set-up-a-leaderboard.md)
| コンポーネント | 説明 |
| --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 紹介開始 | この種類のリーダーボードは、開始した紹介の数で参加者をランク付けします。顧客アドボケイトのスコアは、開始した紹介の件数に対応します。
|
| 紹介成立 | この種類のリーダーボードは、コンバージョンした紹介の数で参加者をランク付けします。紹介された友人が、あなたが定義した金額の購入など、プログラムの目標を達成すると、その紹介はコンバージョン済みと見なされます。顧客アドボケイトのスコアは、コンバージョンした紹介の件数に対応します。
|
| 獲得ポイント | この種類のリーダーボードは、ポイントを報酬とするAdvocateプログラムで参加者が獲得したポイントの総数でランク付けします。保留中またはキャンセル済みでない限り、すべての報酬単位のポイントがカウントされます。このリーダーボードタイプは、ポイント報酬タイプにのみ有効です。
|
| 匿名リーダーボード | 他のプログラム参加者に関する個人を特定できる情報を一切表示しない、完全に匿名化されたリーダーボードです。どのリーダーボードタイプでも表示できます。
|
税金と現金
*税金と現金* コンポーネントを使うと、税務フォームの収集と現金支払いオプションを [認証済みアクセスウィジェット](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-experiences/widget-types-explained.md) または [マイクロサイト](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsites-overview.md).
このコンポーネントグループは、 [*現金支払い*](/brand/ja/what-would-you-like-to-learn-about/advocate-program/advocate-rewards/pay-with-cash/cash-payouts-for-advocate-explained.md) この機能がお客様のアカウントで有効になっている場合にのみ利用できます。
| コンポーネント | 説明 |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| 支払いステータスアラート | 現金支払いを受け取る前に必要な対応を参加者に通知します。このコンポーネントには、参加者を支払い設定の確認画面へ移動させるCTAボタンが含まれています。
必要に応じて、参加者がコンポーネントを表示したときに目にする説明文を任意でカスタマイズできます。
|
| マイクロサイトとウィジェットの現金支払いフォーム | 参加者の銀行情報と、W-8やW-9など適用される税務フォームを収集するフォームを挿入します。
必要に応じて、参加者がフォームを表示したときに目にする説明文を任意でカスタマイズできます。
このコンポーネント内で、確認アラートと要件を設定することもできます。
|
共有
*共有* コンポーネントを使うと、参加者は紹介リンクやコードを複数のチャネルで簡単に共有できます。参加者が共有ボタンをクリックすると、次のような選択したチャネルが開きます。 *Facebook*, *LinkedIn*, *WhatsApp*または *メールアドレス*などが、あらかじめ入力されたメッセージまたはリンクとともに送信できる状態で開きます。
紹介コードのように、コピーしてすぐ共有できるオプション付きで参加者個人の紹介コードやプロモコードを表示するコンポーネントもあります。Promo Codes のように、複数の利用可能なコードが割り当てられている場合はスライダー表示で提示し、参加者が選択したコードをすぐに投稿または送信できる共有ボタンを備えたものもあります。これらのツールにより、参加者は簡単に情報を広め、新たな紹介を促進できます。
| コンポーネント | 説明 |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 紹介コード | コピーしてクリップボードに保存できるオプション付きの紹介コード欄を表示します。Promo Codes 機能の一部として使用されます。
|
| プロモコード | 事前フォーマット済みのコンポーネントブロックで、紹介プロモコード欄と、1つ以上割り当てられている場合にさまざまなコードを切り替えられるスライダーが含まれます。また、共有リンクと、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 の共有ボタンコンポーネント。必要に応じて他のコンポーネントを追加または削除できます。
|
| 紹介テーブル | 参加者が紹介した友人、コンバージョン日、コンバージョン状況を表示する表です。
|
| 紹介テーブルの日付列 | 紹介テーブルに別の日付列を追加します。紹介テーブルコンポーネント内に配置する必要があります。
|
| 紹介テーブルの報酬列 | 紹介テーブルに別の報酬列を追加します。紹介テーブルコンポーネント内に配置する必要があります。
|
| 紹介テーブルのステータス列 | 紹介テーブルに別のステータス列を追加します。紹介テーブルコンポーネント内に配置する必要があります。
|
| 紹介テーブルのユーザー列 | 紹介テーブルに別の顧客（紹介された友人）列を追加します。紹介テーブルコンポーネント内に配置する必要があります。
|
詳細設定
詳細設定コンポーネントを使うと、参加者に何をいつ見せるかをより細かく制御できます。条件付き表示、プログラムの上書き、その他特定のオーディエンス向けに体験を調整するのに役立つ特殊な構成が可能です。
| コンポーネント | 説明 |
| --------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 条件付きエリア / セグメント | 参加者が特定の ユーザーセグメント .
ユーザーセグメントを設定するには、コンポーネントのプロパティを開き、 条件 フィールドにあるJSONata式を編集します。
設定したセグメント内のユーザーには条件付きセクションに表示されているすべてのコンテンツが表示され、セグメント外のユーザーには表示されません。
|
| 条件付きエリア / フィールド | 参加者のプロフィール上の カスタムフィールド が特定の値を含む場合にのみ、このセクションのコンテンツを表示します。
カスタムフィールド名と値を設定するには、コンポーネントのプロパティを開き、 条件 フィールドにあるJSONata式を編集します。
フィールドにあるJSONata式を編集します。正しいカスタムフィールド値を持つユーザーには条件付きセクションに表示されているすべてのコンテンツが表示され、正しいカスタムフィールド値を持たないユーザーには表示されません。
|
| プログラムセクション | プログラムセクションコンポーネントを使うと、子コンポーネントのプログラムIDを上書きできます。特定のプログラムにリンクされていないコンテンツを表示したい場合に使用します。ほとんどのウィジェットとマイクロサイトのテンプレートに既定で含まれています。
|
タイポグラフィ
タイポグラフィコンポーネントを使うと、ウィジェットやマイクロサイトに整形済みのテキストブロックを追加できます。以下から選択してください：
* 段落
* 見出し1
* 見出し2
* 見出し3
* 見出し4
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://help.impact.com/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.