テンプレートの種類
MoEngage の OSM エディターには、さまざまなユースケースに対応する幅広いテンプレートが用意されています。Popup Templates
ポップアップテンプレートを使用して OSM キャンペーンを作成するには、次の手順を実行します。- テンプレートの検索ボックスに Popup と入力するか、Popup Templates セクションまでスクロールしてテンプレートを選択します。
- テンプレートを選択すると、OSM エディターにテンプレートが読み込まれます。
- テンプレートはそのまま使用することも、必要に応じてカスタマイズすることもできます。詳細については、OSM エディターによるテンプレートのカスタマイズを参照してください。
- ユーザーがポップアップの背後にあるページをスクロールできるようにするには、
アイコンをクリックし、
アイコンをクリックします。Scroll Page Behind トグルをオンにします。
- テンプレートをカスタマイズしたら、キャンペーン作成のステップ 3 でスケジュールと配信制御のオプションを入力し、キャンペーンを公開します。
Nudge Templates
ナッジテンプレートを使用して OSM キャンペーンを作成するには、次の手順を実行します。- テンプレートの検索ボックスに Nudge と入力するか、Nudge Templates セクションまでスクロールしてテンプレートを選択します。
- テンプレートを選択すると、OSM エディターにテンプレートが読み込まれます。
- テンプレートはそのまま使用することも、必要に応じてカスタマイズすることもできます。詳細については、OSM エディターによるテンプレートのカスタマイズを参照してください。
- カウントダウンタイマーテンプレートを選択した場合は、タイマーの日時（セールの開始時刻など）を選択し、行動喚起をカスタマイズし、ボタンにリンクを追加してユーザーを対象の Web ページにリダイレクトできます。
- ユーザーのメールアドレスや携帯電話番号を収集するために Subscribe または CTA テンプレートを選択した場合は、リード獲得テンプレートの例を参照して、MoEngage で情報を取得し、それを使用してキャンペーンを実行してください。
- テンプレートをカスタマイズしたら、キャンペーン作成のステップ 3 でスケジュールと配信制御のオプションを入力し、キャンペーンを公開します。
Banner Templates
バナーテンプレートを使用して OSM キャンペーンを作成するには、次の手順を実行します。- テンプレートの検索ボックスに Banner と入力するか、Banner Templates セクションまでスクロールしてテンプレートを選択します。
- テンプレートを選択すると、OSM エディターにテンプレートが読み込まれます。
- テンプレートはそのまま使用することも、必要に応じてカスタマイズすることもできます。詳細については、OSM エディターによるテンプレートのカスタマイズを参照してください。
- GDPR の Cookie 同意情報を表示するために下部のバナーを選択した場合は、次のように、ユーザーの同意用のリンクを追加し、この情報を保存する属性をマッピングできます。
- オファー関連の通知を表示するために下部のバナーを選択した場合は、次のように、タイマー要素のカスタマイズやリンクの追加などができます。
- 上部のバナーは、表示設定がオンで Web サイトのヘッダーがスティッキーでない場合、ページコンテンツを下に押し下げ、コンテンツと重なりません。
- 下部のバナーはページコンテンツと重なり、邪魔にならない形で画面幅全体に表示されます。
OSM のアクセシビリティの設定
MoEngage では、すべてのユーザーにとってインクルーシブになるよう、On-site メッセージのアクセシビリティ機能を設定できます。アクセシビリティの原則の詳細については、MoEngage のアクセシブルなキャンペーンを参照してください。ビジュアルへの Accessible Rich Internet Applications（ARIA）ラベルの追加
ARIA ラベルを追加すると、スクリーンリーダーを使用するユーザーが画像を理解できるようになります。- ドラッグ＆ドロップエディターを使用する場合: OSM キャンペーン（ポップアップ、バナーなど）に Image 要素または GIF 要素を追加する場合は、アクセシビリティを確保するために ARIA ラベルを追加します。
ARIA ラベルを追加するには、次の手順を実行します。- OSM テンプレートを選択したら、目的の要素をクリックします。
- Settings > Styling をクリックします。
- Advanced タブの Custom Attributes ボックスに、次のように ARIA ラベルを入力します。
- カスタム HTML の OSM の場合: カスタム HTML で OSM メッセージを作成する場合は、コード内のすべての
<img>タグに、意味のある説明を含むalt属性を直接追加する必要があります。
例：<img src="image_url.png" alt="Description of the image">
キーボードアクセシビリティの確保
ユーザーがキーボードのみを使用して OSM キャンペーンを操作し、閉じることができる必要があります。- OSM ポップアップを閉じる（Escape キー）: MoEngage で作成された OSM ポップアップは、通常、キーボードの Escape キーを押して閉じられるように設定されています。これは標準的なアクセシビリティ機能です。
- Space キーによる操作: 要素にフォーカスがある場合、ユーザーは Space キーを使用してその要素を操作できます。
- フォーカス管理:
- 初期フォーカス: OSM キャンペーンが表示されると、MoEngage SDK は通常フォーカスをキャンペーンに移し、キーボード操作のアクティブな要素にします。
- フォーカストラップ（全画面ポップアップ）: 全画面の OSM ポップアップでは、ポップアップがアクティブな間にユーザーが誤って背後の Web ページに移動しないよう、通常フォーカスはポップアップ内に「トラップ」されます。
- フォーカスの復帰: OSM キャンペーンが閉じられると、OSM が表示される前にフォーカスがあった Web ページ上の要素にフォーカスが戻る必要があります。
- カスタム HTML: OSM にカスタム HTML を使用する場合は、すべてのインタラクティブな要素がキーボードで操作可能であり、フォーカスが正しく管理されていることを確認してください。
動的コンテンツの読み上げの設定
OSM キャンペーンに動的に更新されるコンテンツ（パーソナライズされた挨拶や在庫の更新など）が含まれる場合：- プラットフォームによる処理: MoEngage のパーソナライズによる標準的な動的コンテンツの更新については、プラットフォームがこれらの更新を支援技術で認識できるようにします。
- カスタム実装: HTML ベースの OSM 内で高度にカスタマイズされた動的コンテンツを実装する場合は、これらの更新をアクセシブルにするために、カスタムコードで適切な ARIA 属性（
aria-liveなど）を使用する必要がある場合があります。
TV コンテンツの説明への対応
On-site メッセージを TV プラットフォームや同様のデバイスに表示する場合：- プラットフォーム固有の要件: 対象の TV プラットフォーム（Tizen、Roku など）でアクセシビリティがどのように処理されるかを考慮してください。特定のアクセシビリティ要件とナビゲーションパターン（リモコン操作など）を考慮してください。
- 明確なコンテンツの提供: アクセシビリティの設定が明確で、TV インターフェースでの読み上げや表示に適していることを確認してください。コンテンツの説明の実際のレンダリングは、Web サイトを表示する特定の TV ブラウザーまたはプログラムによって処理される場合があります。
タッチターゲットのサイズ
- テンプレート: MoEngage の OSM テンプレートは、タッチターゲットサイズに関するアクセシビリティガイドラインを満たしています。
- カスタム HTML: カスタム HTML で OSM キャンペーンを作成する場合は、インタラクティブな要素（ボタン、リンク）がタッチデバイスで簡単にタップできる十分な大きさであることを確認してください。
ユースケース
このセクションでは、上記のテンプレートの種類の一般的なユースケースを示します。Offers/Announcements
オファー/お知らせテンプレートを使用して OSM キャンペーンを作成するには、次の手順を実行します。- テンプレートの検索ボックスに Offer または Announcement と入力し、利用可能なテンプレートのいずれかを選択します。
- テンプレートを選択すると、OSM エディターにテンプレートが読み込まれます。
- テンプレートはそのまま使用することも、必要に応じてカスタマイズすることもできます。詳細については、OSM エディターによるテンプレートのカスタマイズを参照してください。
- テンプレートのボタンにリンクを追加するには、Button をクリックし、ユーザーがボタンをクリックしたときのリダイレクト先のリンクを追加します。ボタンにリンクを追加すると、MoEngage はそれをクリックイベントとしてトラッキングします。リンクが追加されていない場合、MoEngage はデフォルトでそれを閉じるイベントとしてトラッキングします。
- 注: リンクのクリックトラッキングはデフォルトでオンになっています。テンプレートに追加したリンクについては、クリックトラッキングの情報が Campaign Analytics に表示されます。詳細については、OSM キャンペーン分析を参照してください。
- メッセージのパーソナライズ: テキストまたは画像 URL をパーソナライズするには、テキストボックスまたは画像 URL ボックスに
@（アットマーク）を入力します。次のように、表示されるパーソナライズのポップアップウィンドウで、メッセージに使用するパーソナライズ属性を追加します。
詳細については、OSM メッセージのパーソナライズを参照してください。
Lead Generation
リード獲得テンプレートを使用して OSM キャンペーンを作成するには、次の手順を実行します。- テンプレートの検索ボックスに Lead Gen と入力し、利用可能なテンプレートのいずれかを選択します。
- テンプレートを選択すると、OSM エディターにテンプレートが読み込まれます。
- テンプレートはそのまま使用することも、必要に応じてカスタマイズすることもできます。詳細については、OSM エディターによるテンプレートのカスタマイズを参照してください。
- リードを取得するには、ユーザーが送信した回答を保存するユーザー属性をマッピングします。たとえば、ユーザーのメールアドレスや携帯電話番号を収集する場合は、MoEngage でユーザーの入力を保存する属性を指定します。属性をマッピングするには、テンプレート内の入力フィールドのエディターツールバーで
アイコンをクリックします。次のオプションが表示されます。
- Field - 入力フィールドの種類と、必須フィールドかどうかを指定します。次のフィールドの種類を利用できます。
- Required - このトグルはデフォルトでオンになっています。フィールドが必須でない場合は、Required トグルをオフにします。
- Spacing - このフィールドは、入力フィールドとその下の要素との間隔を制御します。
- Field - 入力フィールドの種類と、必須フィールドかどうかを指定します。次のフィールドの種類を利用できます。
- Advanced - このタブは、入力フィールドのユーザー属性のマッピングを制御します。次のオプションを利用できます。
- Label - 入力フィールドにラベルが必要かどうかを指定します。
- Placeholder - 入力フィールドにプレースホルダーが必要かどうかを指定します。
- User Attribute - 入力フィールドにユーザー属性をマッピングします。
- Background - このタブは入力フィールドのサイズを制御します。S、M、L のオプションから選択できます。
- テンプレートをカスタマイズしたら、Test campaign オプションを使用してテストし、キャンペーンを公開します。詳細については、OSM キャンペーンの作成を参照してください。
リード獲得テンプレートの例
ニュースレター購読のリード獲得テンプレートを例に考えます。ニュースレター購読テンプレートを使用して OSM キャンペーンを作成するには、次の手順を実行します。- ステップ 1 で、必要に応じてターゲットオーディエンスを選択します。
- Newsletter Subscription Lead Gen Template を選択します。
- メールの入力フィールドをクリックします。
- エディターツールバーで アイコンをクリックします。
- ユーザーのメールアドレス（テンプレート内の入力フィールドのデフォルト設定）を収集する場合は、次のステップに進みます。ユーザーから他の情報を収集する場合は、Type オプションで情報の種類を選択します。たとえば、ユーザーの携帯電話番号を収集する場合は、Type で Tel を選択します。
- 入力フィールドはデフォルトで必須です。Required トグルをオフにすると、フィールドを任意にできます。
- ユーザー入力をマッピングするには、次のように Advanced タブを選択し、ユーザーの入力を保存するユーザー属性を選択します。
- カスタム属性をマッピングするには、次の手順を実行します。
- Subscribe ボタンをクリックして、エディターツールバーを表示します。
- Styling をクリックします。
- Custom Attributes セクションに、カスタム属性とそのマッピングを入力します。このステップで説明したように、属性は UI で、または手動でマッピングできます。
- テンプレートをカスタマイズしたら、キャンペーン作成のステップ 3 でスケジュールと配信制御のオプションを入力し、キャンペーンを公開します。
MOE_RESPONSE_SUBMITTEDイベントが発生します。- MoEngage は、マッピングされたユーザー属性にユーザー入力を保存します。たとえば、ユーザーがメールアドレスを入力して Subscribe をクリックすると、MoEngage はメールアドレスを Email ユーザー属性に保存し、次のようにユーザーのプロファイルの
MOE_RESPONSE_SUBMITTEDイベントに表示されます。
回答を送信したユーザーの特定
MOE_RESPONSE_SUBMITTED イベントを実行したユーザーを特定し、その回答でフィルタリングしてセグメントを作成し、データを分析できます。次の手順を実行します。
- MoEngage Dashboard で、Segment Create Segment に移動します。
- Filter Users by タブで User Property を選択し、
MOE_RESPONSE_SUBMITTEDイベントを追加します。 - 次のように、イベントの期間を指定し、OSM キャンペーン ID を追加して、キャンペーンに回答を送信したユーザー数を表示します。
- このセグメントをターゲットとするキャンペーンを作成したり、分析したり、セグメントの詳細をエクスポートしてセグメントデータを独自に分析したりできます。
Typeform Survey
Typeform アンケートテンプレートを使用して OSM キャンペーンを作成するには、次の手順を実行します。- テンプレートの検索ボックスに Typeform survey と入力し、Typeform テンプレートを選択します。
- テンプレートを選択すると、OSM エディターにテンプレートが読み込まれます。
- テンプレートはそのまま使用することも、必要に応じてカスタマイズすることもできます。詳細については、OSM エディターによるテンプレートのカスタマイズを参照してください。
- テンプレート内の空の Typeform 要素をクリックして、エディターツールバーを表示します。
- 次のように、
アイコンをクリックし、表示される HTML エディターに Typeform の URL を追加します。 - HTML が表示されたら、
data-url変数とsrc変数を見つけます。クエリパラメーターを含む Typeform の URL を両方のフィールドに追加します。例に示すように、一重引用符（'）ではなく二重引用符（"）を使用してください。 - ユーザー属性でアンケート URL をパーソナライズし、分析用の追加パラメーターを渡すには、URL を更新します。たとえば、アンケート URL が
https://typeformsales7.typeform.com/to/OLMOfS?user_id=xxxxxの場合は、URL をahttps://typeformsales7.typeform.com/to/OLUWfS?customer_id={{UserAttribute['uid']}}に更新します。これを有効にするには、Typeform で非表示フィールドを設定します。Typeform の非表示フィールドを使用すると、アンケートとともに追加のパラメーターを渡すことができます。 - テンプレートをカスタマイズしたら、キャンペーン作成のステップ 3 でスケジュールと配信制御のオプションを入力し、キャンペーンを公開します。
