ウィジェットの追加

Add widget 機能を使用すると、画像、カスタムスクリプト、商品グリッドなどの MoEngage ウィジェットをアプリケーションに追加できます。

画像を挿入するには、以下の手順に従います。

Image タブをクリックします。
選択した要素の前と後のどちらにグリッドを追加するかを定義するため、位置を選択するよう求められます。
挿入した画像を次の 3 つのセクションでカスタマイズします。

Appearance
- 画像の URL を埋め込むか、ローカルストレージから画像を Upload します。
- Dimensions - 画像の高さ、幅、角の丸み（Border radius）をピクセルまたはパーセンテージでカスタマイズします。
- Margin - 画像の上、下、左、右のマージンをピクセルまたはパーセンテージでカスタマイズします。
- Padding - 上、下、左、右のパディングをカスタマイズして、画像の周囲および選択した要素の境界線の内側にスペースを作成します\

別のデバイス解像度用の画像を追加する（オプション）

同じ画像をアップロードし、別のデバイスの解像度に合う幅またはピクセル密度を定義できます。別の解像度用の画像ウィジェット.gif

画像の有効な入力形式は 1024（幅）または 2（ピクセル）です。

Redirection
- Enter webpage URL - ユーザーが画像をクリックしたときに関連ページへリダイレクトする URL を入力します。
Advanced
- カスタムスクリプトを使用して、挿入した画像をカスタマイズすることもできます。
  - CSS Classes - 画像にカスタムスタイルを適用するためのクラス名を入力します。
  - Z index - 画像が他の要素と重なったときの表示方法を変更するための Z index 値を入力します。

Save をクリックします。

HTML/JavaScript コードを挿入するには、以下の手順に従います。

Insert HTML/Javascript タブをクリックします。
選択した要素の前と後のどちらにグリッドを追加するかを定義するため、位置を選択するよう求められます。
Element Type を選択し、Next をクリックします。
エディターに該当するコードを入力し、Save をクリックします。

HTML 要素タイプはマークアップのみをレンダリングし、内部に配置された <script> タグは実行しません。インラインスクリプトに依存するインタラクティブなコンポーネント（カルーセルの矢印やスライダーなど）は表示されますが、操作には反応しません。JavaScript を実行するには、HTML 内にスクリプトを埋め込むのではなく、Element Type ステップで JavaScript 要素タイプを選択し、そこにスクリプトを追加してください。カルーセルの場合は、このページの Standard Widgets タブにある組み込みの Carousel ウィジェットを使用することもできます。このウィジェットは、カスタムコードなしでスライド、ドット、矢印を処理します。

MoEngage の商品グリッドを挿入するには、以下の手順に従います。

Product grid タブをクリックします。このタブにはおすすめアイテムが表示されます。
選択した要素の前と後のどちらにグリッドを追加するかを定義するため、位置を選択するよう求められます。
Next をクリックします。
Edit Item Grid ポップアップウィンドウが表示され、次の項目を定義できます。

グリッドの表示方法（デザイン要素、位置、レイアウト）。
グリッドに表示するすべてのプレースホルダー。
該当するプレースホルダーへのマッピング情報。

Grid Appearance ステップで、グリッド内のカードレイアウトを選択し、該当するドロップダウンオプションをカスタマイズして、グリッドのタイトル、サブタイトル、CTA を定義します。
Edit card ステップで、次の項目をカスタマイズして、グリッド内の各カードの見た目を定義します。

Title - カードのヘッダーまたは名前。
Sub title - カードの簡単な説明。
Image - カードに表示される商品の画像。
Label - カードには最大 2 つのラベルを追加でき、プロモーション、説明、警告、ブランディング要素などの重要な情報をユーザーに伝えます。ラベルのルック＆フィールは、手動またはカスタムスクリプトを使用してカスタマイズできます。
Price - 選択した商品に対して、2 つの価格と割引額を指定できます。
Rating - 選択した商品の品質を示す評価を追加し、そのルック＆フィールを手動またはカスタムスクリプトを使用してカスタマイズできます。
Review - 商品やサービスに関するレビュアーの体験を反映したレビューの詳細を追加できます。
CTA - カードには最大 2 つの CTA ボタンを追加でき、そのルック＆フィールを手動またはカスタムスクリプトを使用してカスタマイズできます。

Choose Recommendation ステップで、次の詳細を入力します。
- 必要に応じて、グリッド名/タイトルを編集します。
  Grid Name は MoEngage ダッシュボードの Experience Analytics ページに表示され、ユーザーのインタラクション統計を示します。
  Grid Title は、対象となるすべての訪問者に対して Web サイト上に表示されます。
- ドロップダウンからレコメンデーションを選択します。
  グリッドに含めるには、事前にレコメンデーションを作成しておく必要があります。詳細については、Create User Action Recommendations を参照してください。
- Edit card ステップで有効にしたオプションについて、必要なカードの詳細をすべて入力します。
Save をクリックします。
ユースケース:

商品グリッドを使用してパーソナライズされた商品をおすすめする方法

カルーセルを挿入するには、次の手順を実行します。

Standard Widgets タブで Carousel を選択します。
選択した要素の Before と After のどちらにカルーセルを追加するかを選択します。
Next をクリックします。
Add Carousel ページでは、次のタブが表示されます。
Upload: このオプションでは、カルーセル用の画像をアップロードできます。

Number of Slides フィールドで、カルーセルに含めるスライドの数を選択します。カルーセルには最大 10 枚のスライドを追加できます。スライドは選択した枚数に基づいて一覧表示されます。
任意のスライドをクリックして、以下で説明する入力を追加します。
Input type: カルーセルに追加する画像の入力タイプを選択します。デフォルトの入力タイプは Images です。
Input Source: 画像の入力ソースを選択します。URL またはデバイスからのアップロードのオプションを使用して画像を挿入できます。
+ Add an image for another Device Resolution をクリックして、他のデバイス向けに追加する画像の Input source と Device Resolution を設定します。同じ手順を繰り返して、複数のデバイス向けの解像度を追加できます。
Redirect URL を入力して、ユーザーがカルーセル内の各画像をクリックしたときにリダイレクトする URL を追加します。
追加した各スライドについて、上記の手順を実行します。\

Appearance: このオプションでは、カルーセルの外観を設定できます。

Carousel Settings: このオプションでは、カルーセルのサイズ、境界線、パディング、マージンを設定できます。表示されたオプションを選択して、手動で編集するか、CSS を使用するか、またはその両方を選択できます。
- Dimension: 画像の Height、Width、Border をピクセルまたはパーセンテージでカスタマイズします。
- Border: 境界線の Style、Width、Colour をカスタマイズします。
- Margin: 画像の Top、Bottom、Left、Right のマージンをピクセルまたはパーセンテージでカスタマイズします。
- Padding: Top、Bottom、Left、Right のパディングをカスタマイズして、画像の周囲および選択した要素の境界線の内側にスペースを作成します。
Image Settings: このオプションでは、カルーセル画像の Image type、Border、Padding などの Image Layouts を設定できます。
Carousel Dots: Carousel Dots トグルをオンにしてカルーセルドットを有効にし、カルーセルドットの Dimensions、Padding、Colour を設定します。
Carousel Arrows: Enable Carousal Arrows トグルをオンにしてカルーセルを操作するための矢印を追加し、矢印の Dimensions、Padding、Colour、Icon Style を設定します。

Advanced: このオプションでは、Autoscroll、Time on slide、Autoplay behaviour など、カルーセルの詳細設定を行えます。

カルーセルを自動的にスクロールさせたい場合は、トグルをオンにして Autoscroll を有効にします。
Time on each slide フィールドでは、各スライドの表示時間（秒）を設定できます。
カルーセルを自動再生させたい場合は、次のいずれかのオプションを選択して Autoplay behaviour を設定できます。
- Restart from slide 1: このオプションでは、自動再生を最初のスライドから再開します。
- Stop at the last slide: このオプションでは、自動再生を最後のスライドで停止します。
- 後でウィジェットライブラリからこのウィジェットを再利用するには、Add to widget library チェックボックスを選択します。詳細については、こちらを参照してください。

タブ付きレコメンデーションを挿入するには、次の手順を実行します。

Standard Widgets タブで、Tabbed Recommendations ウィジェットを選択します。
Location リストで、タブ付きレコメンデーションウィジェットを選択した要素の Before と After のどちらに配置するかを選択します。
Next をクリックします。
Edit Item Grid ダイアログボックスでは、次の操作を行えます。
1. グリッドの外観（デザイン要素、位置、レイアウト）を設定する。
2. カードを編集する。
3. レコメンデーションを選択する。
Grid Appearance ステップで、次のコンポーネントを設定します。
- Grid Layout: 提供されているツールを使用して、グリッドレイアウトの外観をカスタマイズします。
- Grid Title: グリッドのタイトルを入力し、提供されているツールで設定します。
- Grid Sub Title: 必要に応じてグリッドのサブタイトルを入力し、その外観を設定します。
- Tab Settings: タブ設定で + Add tabs をクリックして、複数のタブを追加します。ユーザーの興味に基づいて、各タブの下のグリッドにさまざまな商品を表示できます。次の設定から、各タブの状態ごとの外観を設定できます。
- Default state font settings: この設定では、デフォルトで表示されるタブ名のフォントと外観を設定できます。
- Hover state font settings: この設定では、ユーザーがタブ名にカーソルを合わせたときに表示されるタブ名のフォントと外観を設定できます。
- Selected state font settings: この設定では、ユーザーがタブを選択したときに表示されるタブ名のフォントと外観を設定できます。
- 1 つのグリッドには最大 5 つのタブを追加できます。
- 1 つのバリエーションに含めることができるタブ付きレコメンデーションは 1 つのみです。
- Next をクリックします。
Edit card ステップで、次の項目をカスタマイズしてカードの外観を定義します。
- Title: カードのヘッダーまたは名前を入力します。
- Subtitle: カードの簡単な説明を入力します。
- Image: カードに表示する商品画像を追加します。
- Label: カードには最大 2 つのラベルを追加できます。これらのラベルは、プロモーション、説明、警告、ブランディング要素などの重要な情報を提供します。ラベルの外観は、手動またはカスタムスクリプトを使用してカスタマイズできます。
- Price: 選択した商品に対して、2 つの価格と割引額を指定できます。
- Rating: 選択した商品の品質を示す評価を追加し、その外観を手動またはカスタムスクリプトを使用してカスタマイズできます。
- Review: 商品やサービスに関するレビュアーの体験を反映したレビューの詳細を追加できます。
- CTA: カードには最大 2 つの CTA ボタンを追加でき、その外観を手動またはカスタムスクリプトを使用してカスタマイズできます。
- Next をクリックします。
Choose Recommendation ステップで、次の手順を実行します。
- 必要に応じて、グリッドの名前を編集します。
- 作成した各タブを選択し、名前を追加します。このタイトルは、対象となるすべての訪問者に対して Web サイト上に表示されます。ユーザーは作成されたさまざまなタブを選択して、興味に合わせておすすめされたさまざまな商品を表示できます。
- ドロップダウンから Choose your recommendation を選択します。グリッドに含めるには、事前にレコメンデーションを作成しておく必要があります。詳細については、こちらを参照してください。
- Edit card ステップで有効にしたオプションについて、必要なカードの詳細をすべて入力します。
このウィジェットを再利用するには、Add to widget library チェックボックスを選択します。詳細については、こちらを参照してください。
Save をクリックします。