​

はじめに

OSM エディターには、画面左上にある アイコンをクリックしてアクセスできます。 OSM エディターで利用できる操作

1. Add Element - このオプションでは、次のいずれかの要素を画面に追加できます。要素を追加するには、要素をキャンバスにドラッグ＆ドロップします。
   1. Column - この要素をドラッグ＆ドロップして列を追加します。
   2. Row - この要素をドラッグ＆ドロップして行を追加します。列要素と行要素を使用して On-site メッセージのレイアウトを作成し、そこに他の要素を追加できます。
   3. Essential Elements - このセクションには、Text、Image、Button、Icon、Spacer、Map、Form、Line の各要素が含まれます。詳細については、Essential Elements を参照してください。
   4. Media Elements - このセクションには、Gallery、Video、Audio、Playlist の各要素が含まれます。詳細については、Media Elements を参照してください。
   5. Content Elements - このセクションには、Icon Box、Embed、Alert、Counter、Countdown、Progress、Calendly、Carousel、Tabs、Accordion、Switcher、Table、Timeline の各要素が含まれます。詳細については、Content Elements を参照してください。
2. Search element - Search element 検索ボックスでは、要素名を入力して要素を検索できます。
3. Edit - このオプションでは、Add Elements パネルに表示する要素を選択できます。非表示にしたい要素をクリックすると選択が解除されます（要素の左上に黒い丸が表示されます）。デフォルトでは、表示されているすべての要素が選択されており、要素の左上にチェックマークが付いています。たとえば、Row 要素が選択されている場合は のように表示され、選択されていない場合は のように表示されます。

​

要素に共通するスタイルオプション

OSM エディターのほとんどの要素では、次のスタイルオプションを利用できます。

​

Essentials

このセクションには、OSM の作成を始める際に使用できる要素が含まれています。OSM の下書きを作成するのに役立つ、いわばスターターキットです。メディア要素やエフェクトをメッセージに追加して、より魅力的にすることができます。 Essentials セクションには次の要素が含まれます。

1. Text - Text 要素では、メッセージにテキストを追加できます。テキストは画面上で直接編集でき、テキストブロック内をクリックするとテキストブロックの下にエディターツールバーが開き、フォントやスタイルのオプションを追加できます。 編集できる項目は次のとおりです：フォントファミリー、フォントサイズ、基本的な書式設定、テキストの配置、番号付きおよび番号なしの箇条書き、フォントの色、テキストの上下へのパディング（余白）の追加、HTML でのテキストのスタイルの選択（段落要素（<p> タグ）にするか見出しにするかなど）、リンクの追加、スタイルとエフェクトの選択。テキストのコピーや削除もできます。
2. Image - Image 要素では、OSM に画像を追加できます。画像要素を画面にドラッグ＆ドロップし、クリックすると編集オプションが表示されます。画像エディターでは次の操作ができます。
   • 画像をアップロードし、フィルター、タグ、マスクを追加します。
   • 画像の高さと幅を編集し、任意のアスペクト比を使用できます。画像の高さと幅を指定するには、画像をクリックし、画像エディターのツールバーで をクリックします。ポップアップで高さと幅（パーセンテージ）を指定します。画像を手動でサイズ変更することもできます。
   • 画像に背景色、本体色、枠線の色、影を追加します。
   • 画像にリンクを追加します。このセクションには URL、Block、File、Action のオプションがあります。
   • 画像の配置 - スタイルとエフェクト
   • 画像を複製します
   • 画像を削除します
3. Button - Button 要素では、OSM にボタンを追加できます。ボタンのスタイルを設定したり、アクションを追加したりすることもできます。ボタンを画面にドラッグ＆ドロップし、クリックすると編集オプションが表示されます。ボタンエディターでは次の操作ができます。
   • ボタン/アイコンのサイズ（幅と高さ）と位置、およびボタンの角の形状（鋭角、曲線など - 下図のようにスライダーをドラッグしてボタンの角の形状を決定します）
   • ボタン/アイコンのテキスト、およびテキストの書式設定とスタイルのオプション。
   • ボタン/アイコンに背景色、本体色、枠線の色、影を追加します。
   • ボタンにリンクを追加します。このセクションには URL、File、Action のオプションがあります。
   • ボタンの配置 - スタイルとエフェクト
   • ボタンをコピーします
   • 削除
4. Icon - Icon 要素では、OSM にアイコンを追加できます。アイコンのスタイルを設定したり、アクションを追加したりすることもできます。ボタンを画面にドラッグ＆ドロップし、クリックすると編集オプションが表示されます。ボタンエディターでは次の操作ができます。
   • アイコンの選択 - OSM に表示するアイコンを選択できます。デフォルトのアイコンは星 です。エディターツールバーの星アイコンをクリックすると、使用するアイコンまたはアウトラインを選択できます。
   • 色 - エディターツールバーの色オプションをクリックすると、アイコンの色を選択できます。
   • アイコンにリンクを追加します。このセクションには URL、File、Action のオプションがあります。
   • スタイルとエフェクト - OSM が表示されたときやユーザーが Web サイトをスクロールしたときに、ボタンに表示するエフェクトを選択できます。
   • アイコンをコピーします
   • 削除
5. Spacer - Spacer 要素では、要素間にスペースを追加したり、通知にスペースを追加したりできます。
6. Map - Map 要素では、OSM に地図を追加できます。住所の追加、ズームレベルの設定、地図へのカラー要素（背景色、枠線の色、影）の追加、地図の幅と高さの調整、エフェクトとスタイルの追加、コピー、削除ができます。
7. Form - Form 要素では、ユーザーから入力を収集するためのフォームを追加できます。デフォルトのフォームには次のオプションがあります。
   • Email
   • Option Selector - option 1、option 2
   • ユーザーが追加の入力を入力できるテキストボックス。
   • アイコンを使用して、これらの要素を自由に前後に移動できます。
   • たとえば、SMS メッセージの受信をオプトインするためにユーザーの許可を求めることができます。1 つ目のフィールドには、ブランドからの SMS メッセージの受信登録についてユーザーに許可を求めるメッセージを配置できます。2 つ目のフィールドは Sign-up/Not Interested、3 つ目のフィールドはユーザーの電話番号を取得する入力フィールドにできます。
8. Line - Line 要素は、OSM に線を追加します。エディターツールバーで、線のスタイル、高さ、色、配置、幅、スタイル、エフェクトを選択できます。線をコピーしたり削除したりすることもできます。

​

Media

このセクションには、ユーザーにとって魅力的な OSM にするために追加できるメディア要素が含まれています。次の要素が含まれます。 Gallery - Gallery 要素を使用して、OSM に画像をアップロードできます。下図のように、画像をアップロードし、タグ、フィルター、マスクを追加できます。次のオプションも利用できます。

• 画像のカラーオプション - 画像エディターツールバーの オプションを使用して、画像にオーバーレイ、枠線、影を追加できます。
• 画像リンク - URL リンク、アクション、外部 CSS ファイルのオプションを追加して、ユーザーが画像をクリックしたときの動作を指定できます。
• 画像の移動 - 画像エディターツールバーの オプションをクリックすると、画像を左または右に移動できます。
• アイコンをコピーします。
• 削除。

Video - Video 要素を使用して、OSM に動画を追加できます。YouTube 動画、Vimeo 動画、または直接の動画 URL を追加できます。カバー画像とプレーヤーの設定を選択し、再生オプションを追加し、動画にフィルターを追加できます。ローカルの動画ファイルのアップロードはサポートされていません。 Audio - Audio 要素を使用して、OSM に音声をアップロードできます。OSM の表示時に再生する音声、音声の外観、音声のボタン、自動再生するかどうかを選択できます。次の操作も可能です。

• カラーオプション - 音声エディターツールバーの オプションを使用して、音声にオーバーレイ、枠線、影を追加できます。
• スタイルとエフェクト - OSM が表示されたときに音声に表示するエフェクトを選択できます。
• アイコンをコピーします。
• 削除。

Playlist - OSM で再生する動画のプレイリストをアップロードできます。動画の再生順序やループ再生するかどうかなどを設定できます。ブランディングやコントロール要素を追加することもできます。次の操作も可能です。

• アイコンを使用して、これらの要素を自由に前後に移動できます。
• カラーオプション - 音声エディターツールバーの オプションを使用して、音声にオーバーレイ、枠線、影を追加できます。
• スタイルとエフェクト - OSM が表示されたときに音声に表示するエフェクトを選択できます。
• アイコンをコピーします。
• 削除。

​

Content

このセクションには、そのまま使用できるいくつかのコンテンツ要素（他のいくつかの要素を組み合わせたもの）が含まれています。ここでは次のオプションを利用できます。

1. Icon Box - Icon Box は、テキスト、ボタン、アイコンを組み合わせたものです。各要素をクリックしてカスタマイズできます。詳細については、上記の各要素のカスタマイズに関するセクションを参照してください。
2. Embed - Embed 要素では、On-site メッセージに HTML を埋め込むことができます。 アイコンをクリックして、カスタム HTML を貼り付けることができます。エディターツールバーを使用して、カラーオプション、スタイル、エフェクトの追加、要素の複製や削除もできます。
3. Alert - Alert 要素では、ポップアップにタイトルと説明テキストを追加できます。閉じるボタンの有効化/無効化や、要素へのカラー、配置、スタイルのオプションの追加ができます。
4. Counter - Counter 要素では、Web ページにカウンターを表示できます。たとえば、サイトの読み込み時にこのオプションを使用できます。 アイコンをクリックすると、カウンターをカスタマイズするオプション（カウンターのスタイル、開始時刻と終了時刻、カウンターの期間、プレフィックス、サフィックス、演算子のオプション）が表示されます。要素の色、配置、スタイルをカスタマイズし、エフェクトを追加することもできます。
5. Countdown - Countdown 要素では、Web ページにカウントダウンを表示できます。たとえば、フラッシュセール、タイムセール、期間限定オファーがある場合にこのオプションを使用できます。 アイコンをクリックすると、カウントダウンのオプション（タイマーのスタイル、日付・時刻・タイムゾーンの編集、日・時間・分・秒を表示するかどうかの指定）をカスタマイズできます。要素のテキスト、カラーオプション、スタイル、エフェクトの追加や配置もできます。
6. Progress - このオプションでは、静的なプログレスバーを追加できます。 アイコンをクリックすると、プログレスバーのオプションが表示されます。ここでは、スタイル、塗りつぶし、タイトルとパーセンテージを表示するかどうかを指定できます。要素のテキスト、カラーオプション、スタイル、エフェクトの追加や配置もできます。
7. Calendly - Calendly では、ユーザーが日時を選択できる Calendly ウィジェットを追加できます。予約やミーティングの設定に使用できます。下図のように、リンクアイコンを編集して Calendly のリンクを追加できます。
8. Carousel - ポップアップにカルーセル要素を追加できます。製品、新製品の発売、オファーなどのプロモーションに便利です。カルーセル要素には、テキスト、画像、スライドを移動するためのナビゲーションアイコンがあります。カルーセル内の各要素はクリックしてカスタマイズできます。 アイコンをクリックして、カルーセルの設定をカスタマイズします。次のオプションを利用できます：自動再生、スライド内の列数、列間のスペース、ナビゲーションアイコン、列要素からのナビゲーションアイコンの間隔など。個々の要素とは別に、カルーセル要素全体にカラーオプション、スタイル、エフェクトを追加することもできます。
9. Tabs - このオプションを使用して、ポップアップメッセージにタブを追加できます。デフォルトでは次のものが用意されています。
   • タブ要素には 2 つのタブがあります。
   • デフォルトでは、1 つ目のタブにアイコン、2 つ目のタブにボタンがあります。
   • アイコンをクリックすると、タブをカスタマイズできます。次のオプションを利用できます：タブの向き、タブのスタイル、タブの間隔、タブのアクティブ化（ホバー時またはクリック時）。各タブへのアイコンの追加、タブ名の編集、タブの前後移動もできます。個々の要素とは別に、カルーセル要素全体にカラーオプション、スタイル、エフェクトを追加することもできます。
10. Accordion - このオプションを使用して、ポップアップメッセージにアコーディオンを追加できます。デフォルトでは 2 つのアコーディオンが用意されています。 アイコンをクリックすると、アコーディオンをカスタマイズできます。次のオプションを利用できます：折りたたみ、アコーディオンアイコン、間隔、サイズ。個々の要素とは別に、カルーセル要素全体にカラーオプション、スタイル、エフェクトを追加することもできます。
11. Switcher - Switcher はタブに似ています。このオプションを使用すると、トグルと同様の方法で 2 つのタブを切り替えることができます。Switcher 要素をカスタマイズするには、 アイコンをクリックします。スタイル、オプション間の間隔、アイコンを追加するオプションが表示されます。要素にテキスト、色、スタイル、エフェクトを追加することもできます。
12. Table - このオプションを使用して、ポップアップに表を追加できます。表要素は、テキスト要素とアイコン要素を組み合わせたものです。 アイコンをクリックすると、表をカスタマイズできます。次のオプションを利用できます：ヘッダーの表示、サイドバーの表示、表の行数と列数の指定、表の幅の指定。個々の表要素のカスタマイズに加えて、表にカラーオプション、スタイル、エフェクトを追加できます。
13. Timeline - このオプションを使用して、ポップアップにタイムラインを追加できます。タイムライン要素をカスタマイズするには、 アイコンをクリックします。次のオプションを利用できます：向き、スタイル、タイトル、間隔、アイコンの追加、ボタンの枠線の編集など。タイムライン内の個々の要素をクリックしてカスタマイズすることもできます。デフォルトでは、タイムライン要素には 2 つのタブと 2 つのコールアウトがあります。各コールアウトにはアイコンとボタンが 1 つずつ含まれます。

注：最適なパフォーマンスを得るには、Google Chrome で OSM エディターを使用してください。

​

FAQ

1. OSM エディターの画像に最適なアスペクト比は何ですか？ 画像に特定の比率はありません。設定を使用して高さと幅を調整できます。
2. スクロール率はどのように計算されますか？ OSM エディターでは、全画面が 100% に相当します。ページをスクロールすると、バックエンドプロセスが上下のスクロールの割合を継続的に測定します。
3. カスタムクリックトラッキングを有効にするにはどうすればよいですか？ MoEngage がクリックをトラッキングするにはリンクが必要です。デフォルトでは、ボタンと画像（リンクがある場合）のクリック、フォームの送信、閉じるボタンがトラッキングされます。リンクのないボタンについては、‘close’ イベントが登録されます。その他の要素にクリックトラッキングを追加するには、リンクアイコンをクリックしてリンクを追加し、カスタム属性セクションに次のコードを追加します。手順は次のとおりです。
   1. Settings アイコンをクリックし、Styling オプションを選択します。
   2. Advanced タブをクリックします。
   3. カスタム属性までスクロールし、次のコードスニペットを追加します：JavaScript
      onclick:"MoeOsm.trackClick('1');MoeOsm.dismissMessage();"
      
   
4. テンプレートのデフォルトのクリックトラッキングをオフにするにはどうすればよいですか？ デフォルトのクリックトラッキングをオフにするには、テンプレートの Global Settings に移動します。Settings アイコンをクリックし、Advanced を選択します。カスタム属性セクションに次のコードを追加します。JavaScript
   data-ignore-default-tracking:"true"
   
   
5. 侵入型のテンプレートを非侵入型にするにはどうすればよいですか？ 次の画像のように、エディターオプションで Scroll Behind Page をクリックすると、侵入型のテンプレートを非侵入型にできます。
6. スクリーンに短縮 URL を使用できますか？ スクリーンでは短縮 URL はサポートされていません。
7. テストキャンペーンが正常に動作しない場合はどうすればよいですか？ テストキャンペーンが正常に動作しない場合は、次の URL をホワイトリストに登録してください。
   1. https://app-cdn.moengage.com/
   2. https://fonts.bunny.net/
8. テンプレートをレスポンシブにするにはどうすればよいですか？ 次の画像のように、エディター画面の左下にある アイコンをクリックすると、モバイルビューとタブレットビューでテンプレートを表示し、すべての要素が正しく配置されていることを確認できます。テンプレートの要素を編集して、レスポンシブ性を確保できます。