1. ユーザーガイド
  2. キャンペーンとチャネル
  3. アプリ内メッセージ
  4. テンプレート
  5. ドラッグ＆ドロップエディター

ドラッグ＆ドロップエディタ

新しい ドラッグアンドドロップエディタ を使用すると、インアプリキャンペーンのすべてをカスタマイズできます。MoEngageでは、事前に作成されたテンプレートをカスタマイズして使用することも、新しいキャンペーンをゼロから作成することもできます。

アプリ内キャンペーンのコンテンツセクションでドラッグ＆ドロップエディタにアクセスできます。ここで、あなたは2つのオプションを得ます。

ビデオチュートリアル

真っ白なキャンバスから始める

空白のキャンバスから始める をクリックすると、ドラッグ＆ドロップエディターにリダイレクトされます。

コンテンツ

コンテンツセクションには、アプリ内キャンペーンに追加できるすべてのブロックが含まれています。キャンペーンを開始するには、コンテンツブロックを追加する必要がある行が自動的に追加されます。

  1. タイトル : タイトルブロックを使用すると、キャンペーンにタイトルテキストを追加できます。 タイトルブロック をクリックすることで、タイトルのスタイルやフォントを変更できます。これにより、右側に コンテンツプロパティ セクションが開き、さらに修正を加えることができます。



    • ブロックの下にある 削除 および 複製 アイコンをクリックすることで、ブロックを削除または複製することもできます。

  2. 段落 : 段落ブロックを使用すると、キャンペーンにテキストを追加できます。ここでは、タイトルブロックと同様の変更をテキストに加えることができます。

  3. リスト : リストブロックを使用すると、キャンペーンに順不同リストを追加できます。ここでのテキストは、タイトルブロックと同様の変更を加えることができます。

  4. 画像 : 画像ブロックを使用すると、キャンペーンに画像を追加できます。ブロックに画像をドラッグ＆ドロップするか、 参照 をクリックして新しい画像をアップロードできます。



    • 画像を追加した後、右側のエディタからその幅と配置を変更できます。また、 効果を適用 をクリックして、画像にフィルタをかけたり、サイズを変更したり、トリミングしたり、他の操作を行うこともできます。
    • 画像にリンクを追加し、属性を使用してクリックトラッキングを有効にすることができます。

  5. ボタン : ボタンブロックを使用すると、キャンペーンにボタンを追加できます。ボタンのスタイルを設定したり、アクションを追加することも可能です。ボタンを画面にドラッグ＆ドロップし、クリックして編集オプションを表示します。

  6. 区切り線 : 区切り線ブロックは、他の2つのコンテンツブロックまたは行の間に区切り線を追加するために使用できます。コンテンツプロパティセクションで区切り線の幅とスタイルを変更できます。

  7. スペーサー : スペーサーブロックは、2つのコンテンツブロックまたは行の間に配置して、2つの間に少しの間隔を追加できます。

  8. ソーシャル : ソーシャルブロックでは、キャンペーンにソーシャルメディアリンクを追加できます。エディタの右側のコンテンツプロパティセクションに関連するURLを追加できます。



    • キャンペーンに含めたい他のソーシャルメディアリンクを追加するには、コンテンツプロパティセクションの N ew Element をクリックすることもできます。

  9. HTML : HTMLブロックを使用すると、キャンペーンにカスタムHTMLを追加できます。

  10. ビデオ : ビデオブロックを使用すると、キャンペーンにビデオを追加できます。YouTubeのビデオ、Vimeoのビデオ、またはビデオのURLをアップロードできます。

  11. アイコン : アイコンブロックを使用すると、キャンペーンにアイコンを追加できます。コンテンツプロパティセクションで 効果を適用 をクリックすると、アイコンのフィルタリング、サイズ変更、トリミング、またはその他の操作を行うことができます。



    • アイコン画像自体を変更する以外にも、 詳細オプション ボタンを有効にすることで、アイコンのURLやアイコンにいくつかのテキストを変更することもできます。

  12. メニュー : メニューブロックを使用すると、キャンペーンにメニューを作成できます。ここに複数のアイテムを追加し、コンテンツプロパティセクションでそれらを変更できます。

  13. テキスト : テキストブロックを使用すると、キャンペーンにテキストを追加できます。テキストブロック内で直接テキストを編集でき、テキストブロックをクリックしてその上にあるエディタにアクセスすることで、フォントやスタイルオプションを追加できます。

  14. GIFs : GIF ブロックを使用すると、キャンペーンに動画を追加できます。Giphy で GIF を検索し、追加したい GIF を選択できます。

  15. フォーム : フォームボックスを使用すると、アプリ内でユーザー情報を収集するためにキャンペーンにフォームを追加できます。詳細については、 アプリ内キャンペーンにフォームを追加する をご覧ください。
info

Note

コンテンツブロックのCSSを上書きしたい場合は、 ブロック識別子 を コンテンツプロパティ セクションで切り替え、コンテンツブロックのIDを取得できます。このIDを使用して、HTML要素内でコンテンツブロックのCSSを変更できます。テンプレート内のフォントを変更する方法については、FAQをご覧ください。

ポートレート vs.横向きモード

アプリ内キャンペーンの表示は、縦向きモードと横向きモードで大きく異なります。キャンペーンが場違いに見えないように、使用するコンテンツブロックを変更および編集できます。

  1. コンテンツブロックをポートレートモードまたはランドスケープモードのいずれかで非表示にすることができます。
    • コンテンツプロパティ セクションの ブロックオプション に移動します。
    • 詳細オプション ボタンが有効になっていることを確認します。
    • ポートレートモードでコンテンツブロックを非表示にしたい場合は モバイル アイコンをクリックします。
    • ランドスケープモードでコンテンツブロックを非表示にしたい場合は デスクトップ アイコンをクリックします。



  2. インアプリキャンペーンを横向きモード用に変更するには、 コンテンツプロパティ の 自動幅 セクションを使用することもできます。
    • ポートレートモードで画面の幅をカバーする要素を希望する場合は、 モバイルで全幅 チェックボックスを選択します。
    • 次に、スライダーを使用して横向きモードでコンテンツブロックの幅を変更できます。
    • また、コンテンツブロックの幅を自動的に固定する 自動幅 オプションを選択することもできます。

属性

画像、動画、ボタン、GIFに 属性 を追加できます。そのためには、エディタの右側にある コンテンツプロパティ セクションを下にスクロールし、 + 新しい属性を追加 をクリックします。提供されている属性から検索するか、自分のカスタム属性を追加できます。

MoEngageによって提供される属性のリストは次のとおりです:

  1. ナビゲーション : このアクションは、ユーザーがこの属性を割り当てたコンテンツブロックをクリックしたときに、アプリ内でウェブビューにウェブページを開くことを可能にします。



  2. イベントを追跡 : このアクションにより、アプリ内メッセージのクリック時にイベントを追跡し、これに加えてイベント属性も追跡できます。



  3. ユーザー属性の設定 : このアクションは、変更したい任意のユーザー属性に任意の値を割り当てます。ユーザーがこの属性を持つコンテンツブロックをクリックすると、選択したユーザー属性が入力した値として設定されます。



  4. クーポンコードをコピー : このアクションを使用すると、コンテンツブロックにクーポンコードを追加できます。ユーザーがコンテンツブロックをクリックすると、クーポンコードがキーボードにコピーされます。この属性にパーソナライズを追加することもできます。



  5. コール : ユーザーがこの属性を割り当てたコンテンツブロックをクリックするとすぐに、そのユーザーに電話をかけることができます。 携帯番号 を入力してください。



  6. SMS : ユーザーがあなたのメッセージをクリックするとすぐにメッセージを送信できます。 携帯番号 と メッセージ の内容を入力してSMSを送信してください。



  7. カスタムアクション : モバイルアプリ内でカスタムアクションを定義することもでき、ユーザーがアプリ内キャンペーンをクリックしたときに実行されます。



  8. 通知設定に移動 : ユーザーがこの属性を持つコンテンツブロックをクリックすると、アプリの通知設定にリダイレクトされます。
info

Note

  • アクションが追加されたすべてのコンテンツブロックに対して、クリックトラッキングは自動的に有効になります。
  • 1つのコンテンツブロックに複数のアクションを追加すると、各アクションは1回のトラッキングクリックとしてカウントされます。

行

画面に行をドラッグアンドドロップして、アプリ内キャンペーンのレイアウトを作成できます。すべてのコンテンツブロックは、位置と配置を変更できる行に追加されます。

行のプロパティ

エディタで行をクリックすると、画面の右側にある 行プロパティ セクションにアクセスできます。このセクションでは、行の背景、行のレイアウト、列の構造などを変更できます。

行の背景色を変更したり、必要に応じて画像や動画を追加することもできます。

info

Note

この コンテンツエリアの背景色 オプションは、行のテキストに背景色を提供します。行の背景色 Row background color オプションを使用することを選択した場合、行の背景全体が塗りつぶされます。

設定

エディタの設定を使用して、すべてのリンクのデフォルトフォントとリンクカラーを標準化できます。

事前に作成されたテンプレートを探索する

プレビルドされた d rag and drop editor のテンプレートを見つけるには、 Explore pre-built templates をクリックするか、フィルターを通じて見つけることができます。

  • 検索: ドラッグアンドドロップ を 検索テンプレート セクションで検索します。



  • エディターでフィルター : ドラッグアンドドロップ チェックボックスを選択し、利用可能なテンプレートを表示します。

プリビルドテンプレートのすべてのブロックをカスタマイズし、アプリ内キャンペーンを作成できます。

テンプレート

テンプレートは、エディタの右上にある メニュー アイコンをクリックすることで保存、変更、またはリセットできます。 テンプレートを変更 をクリックすると、空白のキャンバスで作業するか、MoEngageの事前構築されたテンプレートのいずれかを使用するかを選択できるテンプレート選択メニューにリダイレクトされます。

info

Note

ミラープラットフォーム オプションは、 ドラッグアンドドロップエディタ の上部にあり、iOSおよびAndroidプラットフォームの両方で同時に同じ変更を行うことができます。

テンプレート設定

許可されたデバイスの向き を選択するには、エディタの下部にある テンプレート設定 に移動します。また、アプリ内キャンペーンを表示させたいデバイスタイプを選択することもできます。

よくある質問

アプリ内のドラッグ＆ドロップエディタでカスタムフォントを使用する方法は？

MoEngageのアプリ内ドラッグ＆ドロップエディタを使用して、テンプレートにカスタムフォントを組み込むには、以下の詳細な手順に従ってください：

1. フォントファイルをホストする

まず、カスタムフォントファイルが安全なドメインまたは一般にアクセス可能なURLにホストされていることを確認してください。例えば、次のようなURLを使用できます https://yourdomain.com/fonts/yourfont.ttf 。

デモンストレーションの目的で、Robotoフォントへのサンプルリンクを以下に示します: https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKKTU1Kvnz.woff2

アップロードが成功したことを確認するには、URLをクリックするとフォントファイルのダウンロードが開始されるはずです。

2. テンプレートを選択

編集者内で変更したいテンプレートを選択してください。このテンプレートはドラッグアンドドロップ機能と互換性がある必要があります。

inapp select template.png

要素識別子を変更する

カスタムフォントを適用したい要素（テキストや見出しなど）を特定してください。テンプレート内の要素をクリックして、そのプロパティを開きます。

  • 見出し要素の場合： ブロック識別子機能を有効にし、 heading_id のような一意の識別子を割り当てます。
  • テキスト要素の場合: 同様に、 text_id のような一意の識別子を割り当てます。

この場合、両方の要素に同じフォントを適用したいので、両方の要素に text_id 識別子を使用します。

inapp add block id value.png

4. HTMLコンテンツブロックを追加

テンプレートの希望する位置にHTMLコンテンツブロックをドラッグ＆ドロップしてください。 このHTML要素はユーザーには表示されず、テンプレート内のフォントスタイルを変更するためだけに使用されます。

inapp add html block.png

カスタムフォントコードを挿入します

以下のCSSを使用して、カスタムフォントを定義し、適用するために、HTMLコンテンツブロック内の既存のコードを置き換えてください: 

<style>
 @font-face {
  font-family: 'customfont',
  src: url('https://yourdomain.com/fonts/yourfont.ttf'); /* Use your hosted font URL */
 }

 div[class$="text_id"],
 #text_id {
  p, h1 {
   font-family: customfont !important;
  }
 }
</style>

このCSSスニペットは @font-face 'customfont' を定義するルールは、提供された URL にホストされているフォントを使用します。それは次に、任意の段落 ( p ) または見出し ( h1 ) 要素内の ID text_id カスタムフォントを使用します。

inapp add css code.png

6. プレビューと公開

エディタで変更をプレビューして、カスタムフォントが正しく適用されていることを確認してください。満足したら、キャンペーンを公開できます。

テンプレートにクロスボタンを追加する方法は？

テンプレートにクロスボタンを追加するには、以下の手順に従ってください：

  1. クロスボタンの画像をURLとして利用可能です。
  2. 新しい行要素を追加し、以下に示すように画像要素をドラッグ＆ドロップします。
    2025-03-25_17-38-51 (1).gif
  3. 画像要素をクリックし、以下に示すように URL フィールドに画像のURLを入力してください。
    2025-03-25_17-43-41 (1).gif
  4. 画像をニーズに合わせて調整してください。
    2025-03-25_17-46-39 (1).gif
  5. 「 ATTRIBUTES 」セクションで、「 Add new attribute 」をクリックします。
  6. クラスを選択し、 close-btn として設定します。
    2025-03-25_18-03-32 (1).gif

この記事は役に立ちましたか？
0人中0人がこの記事が役に立ったと言っています

How can we improve this article?