ウィジェットの追加

以下の手順に従って、HTML/Javascript コードを挿入します：

1. HTML/Javascriptタブをクリックします。
   
2. 位置を選択して、グリッドを選択した要素の前または後に追加するかを定義するように促されています。
   
3. 選択してください 要素タイプ を選択し、次に 次へ をクリックします。
   
4. エディタに関連するコードを入力し、次に 保存 をクリックします。
   

以下の手順に従って、MoEngageの製品グリッドを挿入します：

1. 製品グリッドタブをクリックすると、おすすめの商品が表示されます。
   
2. 場所を選択して、グリッドを選択した要素の前または後に追加するかを定義するように促されています。
   
3. クリックして 次へ 。
   アイテムグリッドの編集ポップアップウィンドウが表示され、以下を定義できます：
   • グリッドの外観（デザイン要素、位置、レイアウトの観点から）。
   • グリッドに表示されるすべてのプレースホルダー。
   • 関連するプレースホルダーへのマッピング情報。
     
4. 「 グリッド外観 」ステップでは、グリッド内のカードレイアウトを選択し、関連するドロップダウンオプションをカスタマイズして、グリッド上のタイトル、サブタイトル、およびCTAを定義します。
   
5. 「 カードを編集 」ステップでは、以下の内容をカスタマイズすることによって、グリッド内の各カードの見た目を定義します：
   
   • タイトル - カードのヘッダーまたは名前。
   • サブタイトル - カードの簡単な説明。
   • 画像 - カードに表示される商品の画像。
   • ラベル - ユーザーにプロモーション、指示、警告、ブランド要素などの重要な詳細を提供するために、最大2つのラベルをカードに追加できます。ラベルの外観と感触は、手動でまたはカスタムスクリプトを使用してカスタマイズできます。
   • 価格 - 選択した商品の価格値を2つと割引値を指定できます。
   • 評価 - 選択した商品の評価を追加でき、品質を指定し、その外観と感触を手動でまたはカスタムスクリプトを使用してカスタマイズできます。
   • レビュー - 商品やサービスに対するレビュアーの体験を反映したレビューの詳細を追加できます。
   • CTA - カードに最大2つのCTAボタンを追加し、その外観と感触を手動でまたはカスタムスクリプトを使用してカスタマイズできます。
     
6. 「 推奨を選択 」ステップで、次の詳細を入力してください：
   • 必要に応じてグリッド名/タイトルを編集します。
     グリッド名は、MoEngageダッシュボードのエクスペリエンス分析ページに表示され、ユーザーのインタラクション統計を示します。
     グリッドタイトルは、すべての適格な訪問者にあなたのウェブサイトに表示されます。
   • ドロップダウンから推奨を選択します。
     グリッドに含めるために、事前に推奨を作成しておくことを確認してください。詳細については、 ユーザーアクション推奨を作成する を参照してください。
   • カードを編集 ステップで有効にしたオプションのために、必要なすべてのカード詳細を入力します。
     
7. クリックして 保存 します。
   
   ユースケース :
   • 製品グリッドを使用してパーソナライズされた製品を推奨する方法

以下の手順に従ってカウントダウンタイマーを挿入します：

1. 標準ウィジェットのリストから タイマー ウィジェットを選択します
   
2. 選択した要素の前または後にグリッドを追加するかどうかを定義するために、 場所 を選択するように促されています。
   
3. 次へ Next をクリックします。
   タイマー設定が表示され、次のことができます:
   • タイマーのレイアウトを選択する（デザイン要素、位置、レイアウトの観点から）。
   • タイマーの外観と内容をカスタマイズする。
   • タイマーの終了日を設定する。
     
4. レイアウトを選択し、タイトル、サブタイトル、タイマーの背景画像/色を関連するオプションをカスタマイズして定義します。
   
5. 設定の下で、次のことを設定できます:
   
   1. 有効期限 - タイマーの有効期限の日付と時間を設定します。有効期限が切れると、タイマーはウェブページに表示されなくなります
      • 異なる地理的場所にいるユーザーの体験をパーソナライズする場合は、異なるタイムゾーンを選択できます
   2. 区切り文字 - カウントダウンタイマーの間に表示される異なる区切り文字オプションの中から選択します。
   3. リダイレクトURL - オプションで、ユーザーがタイマーをクリックした場合に特定のウェブページにリダイレクトするよう選択できます。
6. クリックして 保存 します。

カルーセルを挿入するために、次の手順を実行します：

1. In the Standard Widgets tab, select Carousel.
   
2. 選択した要素の 前 または 後 にカルーセルを追加するかを選択してください。
   
3. 次に 進む をクリックしてください。
4. 「 カルーセルを追加 」ページでは、以下のタブを表示できます：

1. アップロード: このオプションでは、カルーセル用の画像をアップロードできます。
   • カルーセル用のスライド数を スライド数 フィールドで選択します。カルーセルには最大10枚のスライドを追加できます。スライドは、選択したスライド数に基づいてリストされます。
   • スライドをクリックして、以下に説明する入力を追加します。
   • 入力タイプ: カルーセルに追加する画像の入力タイプを選択します。デフォルトの入力タイプは 画像 です。
   • 入力 ソース : 画像の入力ソースを選択します。画像を挿入するには、URLを使用するか、デバイスからアップロードするオプションを使用できます。
   • 別のデバイス解像度の画像を追加するには + 画像を追加 をクリックして、追加する 入力ソース 画像と デバイス 解像度 を設定します。同じプロセスを繰り返して、複数のデバイスの解像度を追加できます。
   • リダイレクトURL を入力して、カルーセル内のそれぞれの画像をクリックしたときにユーザーをリダイレクトしたいURLを追加します。
   • 追加した各スライドについて前述の手順を実行します。
     2. 外観: このオプションでは、カルーセルの外観を設定できます。
     • • カルーセル設定: このオプションでは、カルーセルの寸法、ボーダー、パディング、およびマージンを設定できます。手動で編集するか、CSSを使用するか、または提供されたオプションを選択して両方を選択できます。
         • • 寸法 : 画像の 高さ、幅 、および ボーダー をピクセルまたはパーセンテージでカスタマイズします。
           • ボーダー: ボーダーの スタイル 、 幅 、および 色 をカスタマイズします。
           • マージン: 画像の 上、下、左、 および 右 のマージンをピクセルまたはパーセンテージでカスタマイズします。
           • パディング: 選択した要素のボーダー内に画像の周りにスペースを生成するために、 上、下、左、 および 右 のパディングをカスタマイズします。

• • • • 画像設定： このオプションを使用すると、 画像レイアウト （ 画像タイプ、ボーダー、パディング など）を構成できます。
      • カルーセルドット: カルーセルドット トグルをオンにしてカルーセルドットを有効にし、 サイズ、パディング、色 を設定します。
      • カルーセル矢印： カルーセル矢印を有効にする トグルをオンにして、カルーセルのナビゲート用の矢印を追加し、矢印の 寸法、パディング、色、アイコンスタイル を設定します。

3. 高度な設定: このオプションでは、 オートスクロール、スライドの時間、オートプレイの動作 など、カルーセルの高度な設定を構成できます。

• カルーセルを自動でスクロールさせたい場合は、 自動スクロール を有効にするためにトグルをオンにしてください。
• 各スライドの スライドごとの時間 フィールドでは、カルーセルの各スライドの持続時間（秒単位）を設定できます。
• 自動再生を行うには、 自動再生の動作 を設定するために、次のオプションのいずれかを選択できます：
  • スライド1から再開 ：このオプションを選択すると、自動再生を最初のスライドから再開できます。
  • 最後のスライドで停止： このオプションを選択すると、自動再生を最後のスライドで停止できます。
  • ウィジェットライブラリに追加 チェックボックスを選択すると、後でウィジェットライブラリからこのウィジェットを再利用できます。詳細については、 こちら をご覧ください。

タブ付きの推奨を挿入するには、次の手順を実行します：

1. 「 標準ウィジェット 」タブで、 タブ付き推奨 ウィジェットを選択します。
2. 場所 リストで、タブ付き推奨ウィジェットを選択した要素の 前 または 後 に配置するかを選択してください。
   
   
3. 次へ Next をクリックしてください。
4. アイテムグリッドの編集 ダイアログボックスでは、次のことができます：
   1. 1. グリッドの外観を設定する（デザイン要素、位置、レイアウト）。
      2. カードを編集する。
      3. 推奨事項を選択する。
5. 「 グリッド外観 」ステップで、次のコンポーネントを設定します：
   • グリッドレイアウト ：提供されたツールを使用してグリッドレイアウトの外観をカスタマイズします。
   • グリッドタイトル ：グリッドのタイトルを入力し、提供されたツールを使用して設定します。
   • グリッドサブタイトル ：必要に応じてグリッドのサブタイトルを入力し、その外観を設定します。
   • タブ設定 ：タブ設定から、+ タブを追加をクリックして複数のタブを追加します。ユーザーの興味に基づいて、各タブの下に異なる製品をグリッドで表示できます。次の設定から、各タブの異なる状態の外観を設定できます：
     
     • • デフォルト状態フォント設定 ：この設定では、デフォルトで表示されるタブ名のフォントと外観を設定できます。
       • ホバー状態フォント設定 ：この設定では、ユーザーが名前の上にカーソルを置いたときに表示されるタブ名のフォントと外観を設定できます。
       • 選択状態フォント設定 ：この設定では、ユーザーがタブを選択したときに表示されるタブ名のフォントと外観を設定できます。
         

         info	情報 グリッドには最大で5つのタブを追加できます。 バリエーションには1つのタブ付き推奨のみを持つことができます。

         

     • クリックして 次へ 。
6. 「 カードを編集 」ステップでは、以下をカスタマイズすることによってカードの外観を定義します：
   • タイトル ：カードのヘッダーまたは名前を入力します。
   • サブタイトル ：カードの簡単な説明を入力します。
   • 画像 ：カードに表示される製品画像を追加します。
   • ラベル ：カードに最大2つのラベルを追加できます。これらのラベルは、プロモーション、指示、警告、ブランド要素などの重要な詳細を提供します。ラベルの外観は手動またはカスタムスクリプトを使用してカスタマイズできます。
   • 価格 ：選択した製品のために2つの価格値と割引値を指定できます。
   • 評価 ：選択した製品の評価を追加でき、品質を指定し、その外観を手動またはカスタムスクリプトを使用してカスタマイズできます。
   • レビュー ：製品またはサービスに対するレビューの詳細を追加できます。
   • CTA ：カードに最大2つのCTAボタンを追加し、その外観を手動またはカスタムスクリプトを使用してカスタマイズできます。
     
   • 次へ をクリックします。
7. 「 推薦の選択 」ステップで、以下の手順を実行します：
   • 必要に応じてグリッドの名前を編集します。
   • 作成した各タブを選択し、名前を追加します。このタイトルは、すべての適格な訪問者に対してあなたのウェブサイトに表示されます。 ユーザーは、興味に応じて推奨される異なる製品を表示するために、作成した異なるタブを選択できます。
   • ドロップダウンから推薦を選択 します。グリッドに含めるためには、事前に推薦を作成する必要があります。詳細については、 こちら を参照してください。
   • カードの編集 ステップで有効にしたオプションのすべての必要なカードの詳細を入力します。
     
8. このウィジェットを再利用するには、 ウィジェットライブラリに追加 チェックボックスを選択してください。詳細については、 こちら を参照してください。
9. クリックして 保存 します。