始める
OSMエディタには、画面の左上隅にある
アイコンをクリックすることでアクセスできます。
OSMエディターで利用可能なアクション
-
要素を追加
- このオプションを使用すると、次の要素を画面に追加できます。要素を追加するには、要素をドラッグアンドドロップしてキャンバスに配置します。
- 列 - この要素をドラッグアンドドロップして列を追加します。
-
行
- この要素をドラッグアンドドロップして行を追加します。列と行の要素を使用して、オンサイトメッセージのレイアウトを作成し、その後に他の要素を追加できます。
- 基本 要素 - このセクションには次の要素が含まれています：テキスト、画像、ボタン、アイコン、スペーサー、地図、フォーム、ライン。詳細については、基本要素を参照してください。
- メディア 要素 - このセクションには次の要素が含まれています：ギャラリー、ビデオ、オーディオ、プレイリスト。詳細については、メディア要素を参照してください。
- コンテンツ 要素 - このセクションには次の要素が含まれています：アイコンボックス、埋め込み、アラート、カウンター、カウントダウン、進捗、Calendly、カルーセル、タブ、アコーディオン、スイッチャー、テーブル、タイムライン。詳細については、コンテンツ要素を参照してください。
-
検索要素
-
検索要素
検索ボックスは、名前を入力することで要素を検索するのに役立ちます'
-
編集
- このオプションでは、要素の中で「要素を追加」パネルに必要なものを選択できます。非表示にしたい要素をクリックすると、その要素が選択解除されます（要素の左上隅に暗い円が表示されます）。デフォルトでは、表示されているすべての要素が選択されており、要素の左上隅にチェックマークが付いています。たとえば、行要素が選択されている場合、
のように表示され、選択されていない場合は、
のように表示されます。
要素の一般的なスタイリングオプション
OSMエディタのほとんどの要素に利用できるスタイリングオプションは次のとおりです。
要素にタイポグラフィオプションを追加するには、
アイコンをクリックします。ここで利用可能なオプションは次のとおりです：
- 利用可能なオプションからフォントを選択して変更します
- 新しいフォントを追加するには、 + 新しいフォントを追加 をクリックし、Google Fontsから新しいフォントを追加するか、 フォント タブにあるフォントの中から選択します。
- テキストのスタイルをドロップダウンから利用可能なオプションのいずれかから選択できます - カスタム、段落、サブタイトル、タイトルの上、見出し 1、見出し 2、見出し 3、見出し 4、見出し 5、見出し 6、ボタン。
- タイポグラフィセクションでフォントサイズ、ウェイト、行間、文字間を選択できます。
-
パーソナライズを追加するには、
アイコンをクリックし、 その他 を選択します。希望するパーソナライズ属性とフォールバックを選択してください。詳細については、 サイト内メッセージのパーソナライズ を参照してください。
要素に色のオプションを追加するには、
アイコンをクリックします。ここで利用できるオプションは次のとおりです：
| Field | オプション |
| 背景 | このタブで要素の背景色を選択できます。単色またはグラデーションを選択できます。 |
| 影 | このタブで影の色を選択することで、要素に影を追加できます。 |
| マスク |
要素を画像でマスクすることができます。画像を追加するには、
|
要素にリンクを追加するには、
アイコンをクリックします。ここで利用可能なオプションは次のとおりです：
| Field | Description |
| Link to |
要素がクリックされたときに開くURL/リンクをURLタブの「リンク先」オプションを使用して追加できます。このURLは、
|
| 新しいタブで開く | URL タブでこのオプションを切り替えて、リンクを新しいタブで開きます。デフォルトでは、これが無効になっています。 |
| Nofollowにしてください | URLタブでこのオプションを切り替えて、リンクをNofollowリンクにします。デフォルトでは、これは無効になっています。ノーフォローリンクは、 rel="nofollow" HTMLタグが適用されたリンクであり、検索エンジンはそのようなリンクを無視します。ウィジェットリンクまたは要素に追加されたリンクは、ノーフォローレリンクとしてマークする必要があります。詳細については、 Googleのウィジェットリンクに関するガイドライン を参照してください。 |
| ブロック | このタブオプションは画像のみに利用可能です。 |
| アクション | このタブオプションは、画像とアイコンにのみ利用可能です。トグルが有効になると、サイト上のメッセージポップアップが閉じられます。 |
| ファイル | このタブオプションを使用してファイルにリンクできます。 |
要素にスタイルや効果を追加するには、
アイコンをクリックします。ここでは次のオプションが利用可能です：
| Field | Description |
| スタイリング タブ |
スタイリングタブには次のオプションがあります： 基本 - パディング、マージンを追加し、要素の位置を固定（固定、絶対、なし）し、水平方向および垂直方向のオフセットを追加できます。 高度な - このタブを使用してカスタムCSSオプションを追加できます。 |
| エフェクトタブ | エフェクトタブでは、ポップアップがウェブページにロードされるときや、ユーザーがウェブページをスクロールするときにエフェクトを追加できます。 |
その他のオプション
| Field | Description |
| 要素を整列 |
テキストを左、中央、または右に配置するには、
|
| 重複要素 |
要素を複製するには、
|
| 要素を削除 |
要素は、
|
エッセンシャル
このセクションには、OSMを作成するために始めることができる要素が含まれています。これは、OSMの草案を作成するのに役立つ、いわば組み立てられたスターターキットです。メッセージにメディア要素や効果を追加して、より魅力的にすることができます。
必須項目セクションには、以下の要素が含まれています：
-
テキスト
- テキスト要素を使用すると、メッセージにテキストを追加できます。画面上で直接テキストを編集でき、テキストブロック内をクリックすることでフォントやスタイリングオプションを追加でき、テキストブロックの下にエディターツールバーが表示されます。
次の内容を編集できます：フォントファミリー、フォントサイズ、基本的なフォーマット、テキストの整列、番号付きおよび番号なしの箇条書き、フォントカラー、テキストの上部と下部にパディング（隙間）を追加、HTMLでのテキストのスタイルを選択（段落要素（
タグ）または見出しなど）、リンクを追加し、スタイリングや効果を選択できます。また、テキストをコピーしたり削除したりすることもできます。
-
画像
- 画像要素を使用すると、OSMに画像を追加できます。画像要素を画面にドラッグ＆ドロップし、クリックして編集オプションを表示します。画像エディタで次のことができます：
- 画像をアップロードし、フィルタ、タグ、マスクを追加します。
-
画像の高さと幅を編集し、お好みのアスペクト比を使用できます。画像の高さと幅を指定するには、画像をクリックし、画像エディタツールバーで
をクリックします。ポップアップで高さと幅（パーセンテージ）を指定します。画像を手動でサイズ変更することもできます。
- 画像に背景色、ボディ色、境界線の色、影を追加します。
- 画像にリンクを追加します。このセクションには、次のオプションがあります：URL、ブロック、ファイル、アクション。
- 画像の配置 - スタイルと効果
- 画像を複製します。
- 画像を削除します。
-
ボタン
- ボタン要素を使用すると、OSMにボタンを追加できます。ボタンのスタイルを設定したり、アクションを追加することもできます。ボタンを画面にドラッグ＆ドロップし、クリックして編集オプションを取得します。ボタンエディタでは以下のことができます:
- ボタン/アイコンのサイズ（幅と高さ）と位置、ボタンの角の形状（鋭いエッジ、曲線、など - スライダーをドラッグしてボタンの角の形状を決定します。以下に示します）
- ボタン/アイコンのテキスト、およびテキストのフォーマットとスタイルオプション。
- ボタン/アイコンに背景色、ボディカラー、境界線の色、影を追加します。
- ボタンにリンクを追加します。このセクションには次のオプションがあります: URL、ファイル、アクション。
- ボタンの配置 - スタイルと効果
- ボタンをコピー
- 削除
-
アイコン
- アイコン要素を使用すると、OSMにアイコンを追加できます。アイコンのスタイルを設定したり、アクションを追加したりすることもできます。ボタンを画面にドラッグ＆ドロップし、クリックして編集オプションを取得します。ボタンエディタでは、以下のことができます：
-
アイコンの選択 - OSMに表示するアイコンを選択できます。デフォルトのアイコンは星です
。エディタツールバーの星アイコンをクリックすることで、使用するアイコンまたはアウトラインを選択できます。
- 色 - エディタツールバーの色オプションをクリックすることで、アイコンの色を選択できます。
- アイコンへのリンクの追加。このセクションには以下のオプションがあります：URL、ファイル、アクション。
- スタイリングとエフェクト - OSMが表示されるときや、ユーザーがウェブサイトをスクロールするときにボタンに表示されるエフェクトを選択できます。
- アイコンのコピー
- 削除
-
アイコンの選択 - OSMに表示するアイコンを選択できます。デフォルトのアイコンは星です
- スペーサー - スペーサー要素を使用すると、要素間にスペースを追加したり、通知に単にスペースを追加したりできます。
- マップ - マップ要素を使用すると、OSMにマップを追加できます。住所を追加したり、ズームレベルを決定したり、マップに色要素（背景色、境界色、影）を追加したり、マップの幅と高さを調整したり、効果やスタイリングを追加したり、コピーしたり、削除したりできます。
-
フォーム
- フォーム要素を使用すると、ユーザーから入力を収集するためのフォームを追加できます。デフォルトのフォームには、以下のオプションが含まれています：
- メール
- オプションセレクタ - オプション1、オプション2
- ユーザーが追加の入力をタイプできるテキストボックス。
-
アイコンを使用して、これらの要素を自由に前後に移動できます。
- たとえば、ユーザーにSMSメッセージを受信するためのオプトインの許可を求めることができます。最初のフィールドは、ユーザーにブランドからSMSメッセージを受信するためのサインアップの許可を求めるメッセージです。2番目のフィールドは、サインアップ/興味なしで、3番目のフィールドは、ユーザーの電話番号をキャプチャする入力フィールドです。
- ライン - ライン要素はOSMにラインを追加します。ラインのスタイル、高さ、色、配置、幅、スタイリング、エディターツールバーでの効果を選択できます。また、ラインをコピーしたり削除したりすることもできます。
メディア
このセクションには、ユーザーに魅力的にするためにあなたのOSMに追加できるメディア要素が含まれています。以下の要素が含まれています：
ギャラリー - OSMに画像をアップロードするには、ギャラリー要素を使用します。これにより、画像をアップロードし、タグ、フィルター、およびマスクを追加できます。以下に示すように、次のオプションも利用可能です：
-
画像のカラオプション - オーバーレイ、ボーダー、シャドウを使用して画像に追加できます。
画像編集ツールバーのオプション。
- 画像リンク - 画像をクリックしたときに何が起こるべきかを指定するために、URLリンク、アクション、および外部CSSファイルオプションを追加できます。
-
画像を移動 - 画像エディタツールバーの
オプションをクリックすることで、画像を左または右に移動できます。
- アイコンをコピーします。
- 削除。
ビデオ - Video要素を使用して、OSMにビデオをアップロードできます。YouTubeビデオ、Vimeoビデオ、またはビデオのURLをアップロードできます。カバー画像やプレーヤーの設定を選択し、再生オプションを追加し、ビデオにフィルターを追加できます。カスタムビデオ（ローカルファイルのアップロード）はサポートされていません。現在、すべてのYouTubeリンクはサポートされていません。
オーディオ - OSMにオーディオ要素を使用してオーディオをアップロードできます。OSMが表示されるときに再生されるオーディオ、オーディオの外観、オーディオのボタン、およびオーディオを自動再生するかどうかを選択できます。また、次のこともできます：
-
カラーオプション - オーバーレイ、ボーダー、シャドウをオーディオに追加できます。
- スタイリングとエフェクト - OSMが表示されるときにオーディオにどのエフェクトを表示するかを選択できます。
- アイコンをコピーします。
- 削除。
プレイリスト - OSMで再生される動画のプレイリストをアップロードできます。動画が再生される順序、ループ再生の有無などを設定できます。また、ブランドやコントロール要素を追加することもできます。次のこともできます：
-
これらの要素は、
-
カラーオプション - オーバーレイ、ボーダー、影を音声に追加できます。
- スタイリングとエフェクト - OSMが表示される際に、オーディオにどのエフェクトを表示するかを選択できます。
- アイコンをコピーします。
- 削除。
コンテンツ
このセクションには、そのまま使用できるいくつかのコンテンツ要素（いくつかの他の要素の組み合わせ）が含まれています。ここで利用可能なオプションは次のとおりです:
-
アイコンボックス
- アイコンボックスは、テキスト、ボタン、アイコンの組み合わせです。これらの要素のそれぞれをクリックすることでカスタマイズできます。詳細については、上記のこれらの要素のカスタマイズに関するセクションを参照してください。
-
埋め込み
- 埋め込み要素を使用すると、サイト内メッセージにHTMLを埋め込むことができます。
アイコンをクリックして、カスタムHTMLを貼り付けることができます。また、エディターツールバーを使用して、色のオプション、スタイル、エフェクトを追加したり、要素を複製したり、削除したりすることもできます。
-
アラート
- アラート要素を使用すると、ポップアップにタイトルと説明文を追加できます。閉じるボタンを有効または無効にし、要素に色、配置、スタイルオプションを追加できます。
-
カウンター
- カウンター要素を使用すると、ウェブページにカウンターを表示できます。たとえば、サイトが読み込まれたときにこのオプションを使用できます。
アイコンをクリックして、カウンターのカスタマイズオプション - カウンタースタイル、開始および終了時間、カウンターの期間、プレフィックス、サフィックス、およびカウンターのオペレーターオプションを取得します。また、要素の色、配置、スタイルをカスタマイズし、効果を追加することもできます。
-
カウントダウン
- カウントダウン要素を使用すると、ウェブページにカウントダウンを表示できます。たとえば、フラッシュセール、またはライトニングディール、または期間限定オファーがある場合にこのオプションを使用できます。
アイコンをクリックして、カウントダウンオプション - タイマースタイル、日付、時間、タイムゾーンの編集、日、時間、分、秒を表示するかどうかを指定します。また、要素のテキスト、色オプション、スタイリング、効果を追加し、整列させることもできます。
-
進捗
- このオプションでは、静的な進捗バーを追加できます。
アイコンをクリックして、進捗バーのオプションを取得します。スタイル、塗りつぶし、およびタイトルとパーセンテージをここに表示するかどうかを指定できます。また、要素のテキスト、色のオプション、スタイリング、および効果を追加し、配置することもできます。
-
Calendly
- Calendlyは、ユーザーが日付と時間を選択できるCalendlyウィジェットを追加することができます。これは、アポイントメントやミーティングの設定に使用できます。以下に示すように、リンクアイコンを編集することでCalendlyリンクを追加できます。
-
カルーセル
- ポップアップにカルーセル要素を追加できます。これは、製品、新しい発売、オファーなどを宣伝する際に便利です。カルーセル要素には、テキスト、画像、スライドを移動するためのナビゲーションアイコンがあります。カルーセル内の各要素は、クリックすることでカスタマイズできます。
アイコンをクリックしてカルーセル設定をカスタマイズします。以下のオプションが利用可能です: 自動再生、スライド内の列数、列間のスペーシング、ナビゲーションアイコン、列要素からナビゲーションアイコンまでのスペーシングなど。個々の要素とは別に、カルーセル要素全体に色オプションやスタイリング、エフェクトを追加することもできます。
-
タブ
- このオプションを使用してポップアップメッセージにタブを追加できます。デフォルトでは、次のものが利用可能です：
- タブ要素には2つのタブがあります。
- デフォルトでは、最初のタブにアイコンがあり、2番目のタブにボタンがあります。
-
タブのカスタマイズは、
アイコンをクリックすることで行えます。利用可能なオプションは次のとおりです：タブの向き、タブのスタイル、タブの間隔、およびタブのアクティベーション（ホバー時またはクリック時）。各タブにアイコンを追加したり、タブの名前を編集したり、タブを前後に移動したりすることもできます。また、個々の要素とは別に、カルーセル要素全体に色のオプションやスタイリング、効果を追加することもできます。
-
アコーディオン
- このオプションを使用してポップアップメッセージにアコーディオンを追加できます。デフォルトでは、2つのアコーディオンが利用可能です。
アイコンをクリックすることでアコーディオンをカスタマイズできます。利用可能なオプションは、折りたたみ可能、アコーディオンアイコン、間隔、サイズです。また、個々の要素とは別に、全体のカルーセル要素に色オプションやスタイリング、エフェクトを追加することもできます。
-
スイッチャー
- スイッチャーはタブに似ています。このオプションを使用して、トグルのように2つのタブ間を切り替えることができます。スイッチャー要素をカスタマイズするには、
アイコンをクリックします。次のオプションが表示されます: スタイル、オプション間の間隔、およびアイコンを追加するオプション。要素にテキスト、色、スタイリング、エフェクトを追加することもできます。
-
テーブル
- このオプションを使用してポップアップにテーブルを追加できます。テーブル要素は、テキストとアイコン要素の組み合わせです。
アイコンをクリックすることでテーブルをカスタマイズできます。利用可能なオプションは次のとおりです: ヘッダーの表示、サイドバーの表示、テーブルの行数と列数の指定、テーブルの幅の指定です。テーブルの色オプション、スタイリング、および効果を追加でき、個々のテーブル要素をカスタマイズできます。
-
タイムライン
- このオプションを使用してポップアップにタイムラインを追加できます。タイムライン要素をカスタマイズするには、
アイコンをクリックします。以下のオプションが利用可能です: 向き、スタイル、タイトル、間隔、アイコンの追加、ボタンの境界の編集など。タイムライン内の個々の要素もクリックすることでカスタマイズできます。デフォルトでは、タイムライン要素には2つのタブと2つのコールアウトがあります。コールアウトにはそれぞれアイコンとボタンが含まれています。
注意 : 最適なパフォーマンスのために、Google ChromeでOSMエディタを使用してください。
FAQs
-
OSM エディタにおける画像の最適なアスペクト比は何ですか?
画像に対する特定の比率はありません。設定を使用して高さと幅を調整できます。
-
パーセンテージスクロールはどのように計算されますか？
OSMエディタでは、全画面表示が100%を占めます。ページをスクロールすると、バックエンドプロセスが常にスクロールの上または下の割合を測定します。
-
カスタムクリックトラッキングを有効にするにはどうすればよいですか？
MoEngageはクリックを追跡するためのリンクを必要とします。デフォルトでは、リンクを持つボタンや画像（それらにリンクがある場合）、フォームの送信、および閉じるボタンのクリックが追跡されます。リンクのないボタンには「閉じる」イベントを登録します。他の要素にクリックトラッキングを追加するには、リンクアイコンをクリックしてリンクを追加し、カスタム属性セクションに以下のコードを追加します。それを行うには：
- 設定アイコンをクリックし、スタイリングオプションを選択します。
- 詳細タブをクリックします。
-
カスタム属性までスクロールし、次のコードスニペットを追加します：
3522708
-
テンプレートのデフォルトのクリックトラッキングをオフにする方法は？
デフォルトのクリックトラッキングをオフにするには、テンプレートのグローバル設定に移動します。設定アイコンをクリックし、[詳細]を選択します。次のコードをカスタム属性セクションに追加してください。
data-ignore-default-tracking:"true" -
侵入型テンプレートを非侵入型にするにはどうすればよいでしょうか?
エディターオプションで「ページの背後にスクロール」をクリックすることで、侵入型テンプレートを非侵入型にすることができます。以下の画像に示されています。
-
スクリーン用に短縮URLを使用できますか？
短縮URLは画面ではサポートされていません。
-
テストキャンペーンが正常に機能していない場合は、どうすればよいですか？
テストキャンペーンが正しく機能していない場合は、次のURLをホワイトリストに追加してください:
- https://app-cdn.moengage.com/
- https://fonts.bunny.net/
-
テンプレートをレスポンシブにするにはどうすればよいですか？
モバイルとタブレットのビューでテンプレートを表示し、すべての要素が整っていることを確認するには、エディタ画面の左下にある
アイコンをクリックします。以下の画像に示すように、テンプレート要素を編集してレスポンシブ性を確保できます。