コンポーネントライブラリの解説

コンポーネントとは、ヒーロー画像やタスクカードなど、ウィジェットやマイクロサイトを構成する個々の構成要素のことです。現在のテンプレートはすべて、Mint と Bedrock のコンポーネントライブラリによって動作しています。

chevron-rightMint コンポーネントhashtag

Mint コンポーネントで構築されたウィジェットとマイクロサイトは、顧客支持者に最新の Advocate 体験を提供します。現在のテンプレートのほとんどは Mint コンポーネントを使用しています。現在のコンポーネントライブラリを使用しているかどうか不明な場合は、手動で確認して必要に応じてライブラリを更新できます。

次の対象の Mint コンポーネントにアップグレードするには プログラムウィジェット:

  1. 左側のナビゲーションメニューで、 [Engage] → Content.

  2. を選択します ウィジェットを編集ウィジェット カードで選択します。

  3. 編集したいウィジェットの名前を選択します。

  4. 左側のサイドバーメニューで、 パッケージ.

  5. を選択します パッケージを追加.

  6. を選択します 追加Mint コンポーネント カードで選択します。

次の対象の Mint コンポーネントにアップグレードするには マイクロサイト:

  1. 左側のナビゲーションメニューで、 [Engage] → Content。

  2. を選択します 設定を編集 ボタンを マイクロサイト カードで選択します。

  3. の下で サイトホスティング 見出しの下で、 パッケージ セクションに移動します。

  4. を選択します パッケージを追加.

  5. を選択します 追加Mint コンポーネント カードで選択します。

  6. を選択します 保存.

chevron-rightBedrock コンポーネントhashtag

Mint コンポーネントで動作するすべてのテンプレートには、Bedrock コンポーネントパッケージもインストールされています。Bedrock コンポーネントは参加者には表示されませんが、デザインに高度なロジックを追加する機能を提供します。ほかのコンポーネントを条件付きで表示したり、コンポーネントがどのプログラムからデータを取得するかを定義したりできます。Bedrock コンポーネントパッケージは、Widget または Microsite Editor の 高度なコンポーネント セクション内の 追加 タブで確認できます。

Bedrock コンポーネントパッケージには 2 つのコンポーネントがあります。

条件付きセクション

この 条件付きセクション コンポーネントを使用すると、参加者のメールアドレス、国、セグメント、またはカスタムフィールドに基づいて条件付きコンテンツを含めることができます。表示条件を設定するには、 条件 ボックスに JSONata 式を挿入します。次に、条件付きセクション内で、特定の参加者グループに表示したいコンテンツを移動します。

プログラムセクション

この プログラムセクション コンポーネントを使用すると、子コンポーネントのプログラム ID を上書きできます。特定のプログラムにリンクされていないコンテンツを表示するために使用します。 プログラムセクション このコンポーネントは、ほとんどのウィジェットおよびマイクロサイトテンプレートにデフォルトで含まれています。

chevron-rightカスタムコンポーネントライブラリhashtag

独自のコンポーネントパッケージを作成して使用することで、Advocate 体験をさらにカスタマイズできます。これらのコンポーネントは任意のテンプレートに追加でき、Advocate が提供するコンポーネントと併用できます。

Advocate のウィジェットは標準の HTML と Web コンポーネントarrow-up-right を使用します。ウィジェットエディターで独自のコンポーネントを使用するには、Web コンポーネントとして記述されている必要があります。

カスタムコンポーネントでウィジェットの構築を始めるには、カスタムパッケージをインストールします。

  1. 左側のナビゲーションメニューで、 [Engage] → Content.

  2. を選択します ウィジェットを編集 をウィジェットカードで。

  3. 編集したいウィジェットの名前を選択します。

  4. 左側のサイドバーメニューで、 パッケージ.

  5. を選択します パッケージを追加.

  6. を選択します NPM から追加.

  7. パッケージの 名前, バージョン および ファイルパス.

  8. を選択します 追加.

最終更新

役に立ちましたか?