OSM テンプレート

OSMテンプレートは、エンゲージメントとコンバージョンを促進する強力で魅力的なメッセージを作成するのに役立ちます。OSMテンプレートを使用すると、短い調査を作成したり、リードを生成したり、バナーメッセージを表示したりできます。さまざまなOSMテンプレートタイプについて以下に説明します。

テンプレートの種類

MoEngageのOSMエディタを使用すると、使用ケースに応じて選択できる幅広いテンプレートが得られます。

テンプレートタイプ	Description
ポップアップテンプレート	訪問者に対して侵入的な方法で情報を伝えるために、このテンプレートを使用してください。たとえば、ポップアップを以下の目的で使用できます：オファーとアナウンスリードジェネレーションサブスクリプションの取得 Typeform アンケートを使用して訪問者/顧客から情報を取得する詳細については、ポップアップテンプレートを参照してください。
ナッジテンプレート	ウェブサイトの訪問者と非侵襲的にコミュニケーションを取るために、このテンプレートを使用してください。例えば、次のようにナッジテンプレートを使用できます：購入を完了したユーザーのサブスクリプションを取得する顧客に営業チームに連絡するよう促す - リード生成関連するコンテンツまたは推奨コンテンツを表示詳細については、 Nudge Templates を参照してください。
バナーテンプレート	このテンプレートを使用して、ウェブサイト全体に情報を表示します。バナーは通常、ページの上部または下部に追加され、以下の目的で使用されます：カウントダウンタイマーを表示 GDPR準拠のクッキー情報を表示詳細については、バナーテンプレートを参照してください。
空白テンプレート	このテンプレートタイプを使用して、テンプレートをゼロから作成します。詳細については、 OSMエディタを参照してください。

ポップアップテンプレート

ポップアップテンプレートを使用してOSMキャンペーンを作成するには、次の手順を実行します：

1. 1. 1. ポップアップ をテンプレート検索ボックスに入力するか、ポップアップテンプレートセクションまでスクロールしてテンプレートを選択してください。
    2. テンプレートを選択すると、テンプレートがOSMエディターに読み込まれます。
    3. そのテンプレートをそのまま使用することも、必要に応じてカスタマイズすることもできます。詳細については、 OSMエディタを使用してテンプレートをカスタマイズするを参照してください。
    4. ポップアップの背後でページをスクロールできるようにするには、をクリックし、をクリックします。 ページの背後をスクロール トグルを有効にします。
    5. テンプレートをカスタマイズしたら、キャンペーン作成のステップ3でスケジューリングと配信制御オプションを入力し、キャンペーンを公開します。

Nudge Template

OSMキャンペーンを作成するには、次の手順を実行してください：

1. 1. 1. Nudge をテンプレート検索ボックスに入力するか、Nudgeテンプレートセクションまでスクロールしてテンプレートを選択してください。
    2. テンプレートが選択されると、テンプレートがOSMエディタに読み込まれます。
    3. テンプレートをそのまま使用するか、要件に応じてカスタマイズできます。詳細については、 OSMエディタを使用してテンプレートをカスタマイズするを参照してください。
    4. カウントダウンタイマーのテンプレートを選択した場合、タイマーの日時を選択できます（たとえば、セールが開始されるとき）、コールトゥアクションをカスタマイズし、ユーザーを目的のウェブページにリダイレクトするためのボタンにリンクを追加できます。
    5. SubscribeまたはCTAテンプレートを選択すると、ユーザーのメールIDまたは携帯番号を取得できます。リード生成テンプレートに記載されている手順に従って、MoEngageで情報を取得し、それを使用してキャンペーンを実行します。
    6. テンプレートをカスタマイズしたら、キャンペーン作成のステップ3でスケジュールと配信管理オプションを入力し、キャンペーンを公開します。

バナーテンプレート

バナーテンプレートを使用して OSM キャンペーンを作成するには、次の手順を実行します:

バナー をテンプレート検索ボックスに入力するか、 バナーテンプレート セクションまでスクロールしてテンプレートを選択してください。
テンプレートを選択すると、テンプレートがOSMエディタに読み込まれます。
テンプレートをそのまま使用することも、要件に応じてカスタマイズすることもできます。詳細については、 OSMエディタを使用してテンプレートをカスタマイズするを参照してください。
GDPRポリシーの遵守のためにGDPRクッキー収集および保存情報を表示するために下部のバナーを選択した場合、ユーザーが同意したときに使用されるリンクと、この情報を保存するために使用される属性を以下のように追加できます。

下部にバナーを選択してオファー関連の通知を表示する場合、タイマー要素をカスタマイズしたり、リンクを追加したりすることができます。以下に示すように。

info	注意トップバナーはページの内容を下に押し下げ、同じ設定がオンになっていて、ウェブサイトのヘッダーが固定されていない場合は、コンテンツと重なりません。下部のバナーはページの内容と重なり、侵入的ではなく、画面の幅全体を占めます。

OSMのアクセシビリティを設定する

MoEngage内で、すべてのユーザーのためのインクルーシブ性を確保するために、オンサイトメッセージのアクセシビリティ機能を設定できます。アクセシビリティ原則を包括的に理解するには、 MoEngageにおけるアクセシブルキャンペーンを参照してください。

視覚用のアクセシブルなリッチインターネットアプリケーション（ARIA）ラベルを追加

ARIAラベルを追加することで、スクリーンリーダーに依存するユーザーにとって画像が理解できるようになります。

ドラッグアンドドロップエディタの使用： OSMキャンペーンに画像またはGIF要素を追加する際（ポップアップウィンドウやバナーなど）、アクセシビリティを確保するためにARIAラベルを追加する必要があります。
ARIAラベルを追加するには、以下の手順を実行します：
1. OSMテンプレートを選択した後、目的の要素をクリックします。
2. 設定 > スタイリング をクリックします。
3. 詳細設定 タブで、 カスタム属性 ボックスに、以下のようにARIAラベルを入力します：
カスタム HTML OSM の場合: カスタム HTML で OSM メッセージを構築している場合は、すべての <img> タグに意味のある説明を持つ alt 属性をコード内に直接追加する責任があります。
例: <img src="image_url.png" alt="画像の説明">

キーボードアクセシビリティを確保する

ユーザーはキーボードのみを使用して、あなたのOSMキャンペーンと対話し、キャンペーンを閉じることができる必要があります。

OSMポップアップウィンドウを閉じる（Escapeキー）： MoEngageを通じて作成されたOSMポップアップウィンドウは、通常、キーボードのEscapeキーを押すことで閉じることができるように設定されています。これは標準的なアクセシビリティ機能です。
スペースキーを使ったインタラクション : 要素にフォーカスがあるとき、ユーザーはスペースキーを使ってその要素とインタラクションできます。
フォーカスマネジメント:
- 初期の焦点: OSMキャンペーンが表示されると、焦点は通常MoEngage SDKによって管理され、キャンペーンに移動し、キーボード操作のためのアクティブな要素になります。
- フォーカスのトラッピング（全画面ポップアップウィンドウ）: 全画面のOSMポップアップウィンドウでは、ポップアップウィンドウがアクティブな間、ユーザーが誤って基盤のウェブページに移動するのを防ぐために、フォーカスが通常「トラップ」されます。
- フォーカスの復帰: OSMキャンペーンが終了したとき、フォーカスはOSMが表示される前にウェブページ上でフォーカスを持っていた要素に戻るべきです。
カスタムHTML: OSMにカスタムHTMLを使用している場合は、すべてのインタラクティブ要素がキーボードでナビゲート可能であり、フォーカスが正しく管理されていることを確認する責任があります。

ダイナミックコンテンツのお知らせを設定する

あなたのOSMキャンペーンに動的に更新されるコンテンツが含まれている場合（たとえば、パーソナライズされた挨拶や株価の更新）：

プラットフォームの取り扱い: MoEngageパーソナライゼーションによる標準的な動的コンテンツの更新は、支援技術によって認識可能にすることを目指しています。
カスタム実装: HTMLベースのOSM内で高度にカスタム化された動的コンテンツを実装している場合、これらの更新をアクセシブルにするために、カスタムコード内で適切なARIA属性（例えば、 aria-live ）が使用されていることを確認する必要があります。

テレビコンテンツの説明

テレビプラットフォームや同様のデバイスに表示することを目的としたオンサイトメッセージングの場合:

プラットフォーム固有のニーズ: 対象のテレビプラットフォーム（例えば、Tizen、Roku）でアクセシビリティがどのように扱われているかを理解しておく必要があります。特定のアクセシビリティ要件やナビゲーションパターン（例えば、リモコンの操作）を考慮する必要があります。
明確なコンテンツの提供: アクセシビリティ設定が明確で、読み上げやテレビインターフェースでの表示に適していることを確認してください。あなたのウェブサイトを表示している特定のテレビブラウザやプログラムが、コンテンツの説明の実際のレンダリングを処理する可能性があります。

タッチターゲットサイズ

テンプレート: MoEngageのOSMテンプレートは、アクセシビリティガイドラインを満たすことを目的としたタッチターゲットサイズで設計されています。
カスタムHTML: カスタムHTMLを使用してOSMキャンペーンを作成する場合、インタラクティブ要素（ボタン、リンク）がタッチデバイスで簡単にタップできるように十分な大きさであることを確認してください。

これらの要素をOSMキャンペーンで設定することにより、アクセシビリティを大幅に向上させることができます。常に異なるデバイスでOSMメッセージをテストし、可能であればアクセシビリティツールを使用して、良好なユーザーエクスペリエンスを確保してください。

ユースケース

上記のテンプレートタイプの人気のある使用例をいくつか以下に示します。

ユースケース	Description
オファー/アナウンスメント	今後または進行中のオファーや発表に関する情報を伝えたいときは、これらのテンプレートを使用してください。これらのテンプレートには、カウントダウンタイマー、コールトゥアクションボタン、画像など、さまざまな要素が含まれています。例えば、以下のためにこのテンプレートタイプを使用できます：フラッシュセール季節/ホリデーセールオファーディスカウントディール/ライトニングディール製品の発売、イベントに関するお知らせ詳細については、オファーおよびアナウンステンプレートを参照してください。
リードジェネレーション	ウェブサイトの訪問者から情報を収集したいときは、これらのテンプレートを使用してください。メールID、携帯番号、またはその他の好みをキャプチャして、再ターゲティングのためにユーザーのMoEngageユーザープロファイルに保存できます。たとえば、次のテンプレートを使用できます：ニュースレターにユーザーを登録させる SMSメッセージを受信するためにユーザーにサインアップしてもらう詳細については、リードジェンテンプレートを参照してください。
Typeform アンケート	ウェブサイトの訪問者から情報を収集するために、このテンプレートタイプを使用してください。詳細については、 Typeform調査テンプレートを参照してください。

オファー/アナウンス

OSMキャンペーンを作成するには、次の手順を実行してください：

1. 1. オファー または アナウンスメント をテンプレート検索ボックスに入力し、利用可能なテンプレートの中から選択してください。
  2. テンプレートを選択すると、テンプレートがOSMエディタに読み込まれます。
  3. テンプレートをそのまま使用することも、要件に応じてカスタマイズすることもできます。詳細については、 OSMエディタを使用してテンプレートをカスタマイズするを参照してください。
  4. テンプレートに追加されたボタンにリンクを追加するには、ボタンをクリックし、ユーザーがボタンをクリックしたときにリダイレクトされるリンクを追加します。ボタンにリンクが追加されると、クリックはクリックイベントとして追跡され、リンクが追加されていない場合は、デフォルトでクローズイベントとして追跡されます。
  5. 注意 : リンクのクリック追跡はデフォルトで有効になっています。テンプレートに追加されたリンクについては、キャンペーン分析でクリックトラッキング情報が利用可能になります。詳細については、 OSMキャンペーン分析を参照してください。
  6. メッセージのパーソナライズ : テキストまたは画像URLをパーソナライズするには、テキストボックスまたは画像URLボックスに @ を入力します。メッセージに使用するパーソナライズ属性を、以下に示すように表示されるパーソナライズポップアップに追加します。詳細については、 OSMメッセージのパーソナライズを参照してください。

リードジェネレーション

OSMキャンペーンをリードジェンテンプレートで作成するには、次の手順を実行します:

リードジェン をテンプレート検索ボックスに入力し、利用可能なテンプレートの中から選択してください。
テンプレートが選択されると、テンプレートがOSMエディタにロードされます。
テンプレートをそのまま使用することも、要件に応じてカスタマイズすることもできます。詳細については、 OSMエディターを使用してテンプレートをカスタマイズするを参照してください。

リードをキャプチャするには、ユーザーが送信した応答を保存するユーザー属性をマッピングする必要があります。たとえば、ユーザーのメールアドレスや携帯電話番号をキャプチャしたい場合、MoEngageでユーザーの入力を保存する属性を指定する必要があります。属性をマッピングするには、テンプレートの入力フィールドのエディターツールバーにある

アイコンをクリックします。次のオプションが表示されます：

フィールド - このタブでは、入力フィールドの種類と、それが必須フィールドであるかどうかを指定できます。以下のフィールドタイプが利用可能です：

フィールドタイプ	説明
テキスト	ユーザーからテキスト入力をキャプチャしたい場合にこのフィールドタイプを使用します。
メール	ユーザーのメールアドレスをキャプチャしたい場合にこのフィールドタイプを使用します。
番号	ユーザーから数値入力をキャプチャしたい場合にこのフィールドタイプを使用します。
段落	ユーザーからの詳細なフィードバックをキャプチャしたい場合にこのフィールドタイプを使用します。たとえば、ユーザーの問い合わせや退会時のフィードバックに関する情報をリクエストするテンプレートでは、段落フィールドを使用して情報をキャプチャできます。
選択	ドロップダウンを追加し、ユーザーが選択できる選択肢を提供したい場合にこのフィールドタイプを使用します。
ラジオ	ラジオボタンを追加し、ユーザーが選択できる選択肢を提供したい場合にこのフィールドタイプを使用します。
チェックボックス	チェックボックスを追加し、ユーザーが選択できる選択肢を提供したい場合にこのフィールドタイプを使用します。たとえば、購読の好みを尋ねるとき、オプションをリストし、ユーザーが興味のあるカテゴリを選択できます。
日付	ユーザーに日付を選択させたい場合にこのフィールドタイプを使用します。たとえば、会議を設定したいときに、ユーザーの希望する日付と希望する時間（時間フィールドタイプ）を尋ねることができます。
URL	ラジオボタンを追加し、ユーザーが選択できる選択肢を提供したい場合にこのフィールドタイプを使用します。
時間	ユーザーに時間枠を選択させたい場合にこのフィールドタイプを使用します。たとえば、コールバックオプションをリクエストする場合、ユーザーが連絡を取るのに希望する時間を尋ねることができます。
電話	ユーザーの電話番号をキャプチャしたい場合にこのフィールドタイプを使用します。
パスワード	サインアップまたはログインオプションを追加し、ユーザーがパスワードを入力する必要がある場合にこのフィールドタイプを使用します。

必須 - このトグルはデフォルトでオンになっています。フィールドが必須でない場合は、トグルをオフにします。
間隔 - このフィールドでは、入力フィールドとその下に配置された要素の間の間隔を指定できます。

詳細 - このタブでは、入力フィールドのユーザー属性マッピングを指定できます。以下のオプションが利用可能です：
- - ラベル - このオプションでは、入力フィールドにラベルが必要かどうかを指定できます。
  - プレースホルダー - このオプションでは、入力フィールドにプレースホルダーが必要かどうかを指定できます。
  - ユーザー属性 - このオプションでは、入力フィールドのユーザー属性マッピングを指定できます。
背景 - このタブでは、入力フィールドのサイズを指定できます。以下のオプションから選択できます：S、M、L。

テンプレートをカスタマイズしたら、 テストキャンペーン オプションを使用してテストし、キャンペーンを公開します。詳細については、 OSMキャンペーンの作成を参照してください。

リードジェンテンプレートの例

ニュースレターの購読リードジェンテンプレートのケースを考えてみましょう。OSMキャンペーンをニュースレター購読テンプレートで作成するには、次の手順を実行してください:

1. 1. ステップ1で希望するターゲットオーディエンスを選択してください。
  2. ニュースレター購読リード生成テンプレートを選択してください。
  3. メール入力テキストフィールドをクリックしてください。
  4. エディターツールバーのアイコンをクリックします。
  5. ユーザーのメールIDを取得したい場合（テンプレートの入力フィールドのデフォルト設定）、次のステップに進んでください。ユーザーから他の情報を取得したい場合は、タイプオプションで取得したい情報の種類を選択してください。例えば、ユーザーの携帯番号を取得したい場合は、タイプで Tel を選択してください。
  6. 入力フィールドはデフォルトで必須としてマークされています。フィールドを非必須としてマークするには、必須トグルをオフにします。
  7. ユーザーが入力した情報をマッピングするには、[詳細] タブを選択し、ユーザーが入力した情報を保存するユーザー属性を選択します。以下に示すように。
  8. カスタム属性をマッピングするには、次の手順を実行してください：
    1. 1. 購読ボタンをクリックして、エディターツールバーを表示します。
      2. スタイリング をクリックして、カスタム属性のマッピングに入ります。
      3. カスタム属性 セクションにカスタム属性とそのマッピングを入力します。
        注意：これは上記のようにUIで行うことができますが、このステップで説明するように手動でマッピングを追加することもできます。
  9. テンプレートをカスタマイズしたら、キャンペーン作成のステップ3でスケジュールおよび配信制御オプションを入力し、キャンペーンを公開します。

ユーザーがニュースレターに登録すると、その情報はユーザープロファイルで追跡できます。キャンペーンで「購読」をクリックすると、次のことが起こります：

1. 1. MOE_RESPONSE_SUBMITTED イベントが発火しました。
  2. ユーザーの入力はテンプレートにマッピングされたユーザー属性に保存されます。たとえば、ユーザーがメールIDを入力して購読をクリックすると、メールIDは Email ユーザー属性に保存され、ユーザーのユーザープロファイル内のMOE_RESPONSE_SUBMITTEDイベントで利用可能になります。以下に示すように。

回答を提出したユーザーの特定

MOE_RESPONSE_SUBMITTED イベントを実行したユーザーを特定し、彼らの回答に基づいてフィルタリングしてセグメントを作成し、それらのデータを分析するには、次のようにします:

1. 1. MoEngageダッシュボードに移動 -> セグメント -> セグメントを作成。
  2. フィルタユーザータブで、ユーザー属性を選択し、MOE_RESPONSE_SUBMITTEDとして実行されたイベントを追加します。
  3. イベントの時間範囲を指定し、キャンペーンのユーザー数を確認するために、OSMキャンペーンのキャンペーンIDを追加してください。以下に示します。
  4. このセグメントをターゲットにしたキャンペーンを作成したり、分析したり、詳細をエクスポートしたり、セグメントデータに対して独自の分析を実行したりできます。

Typeform アンケート

library_add_check

前提条件

- - あなたのTypeform調査を作成し、そのURLを準備してください。これは調査を取得するためにテンプレートに追加されます。
  - TypeformのURLを User Attributes でパーソナライズする場合は、Typeformで隠しフィールドを事前に設定する必要があります。詳細については、 Typeformでの隠しフィールドの使用を参照してください。

OSMキャンペーンをTypeform調査ジェネレーターテンプレートで作成するには、次の手順を実行してください：

1. 1. TypeForm調査 をテンプレート検索ボックスに入力し、Typeformテンプレートを選択します。
  2. テンプレートを選択すると、テンプレートがOSMエディタに読み込まれます。
  3. テンプレートをそのまま使用することも、要件に応じてカスタマイズすることもできます。詳細情報については、 OSMエディタを使用してテンプレートをカスタマイズするを参照してください。
  4. テンプレート内の空のTypeform要素をクリックして、エディターツールバーを表示します。
  5. クリックしてアイコンをクリックし、開くHTMLエディタにTypeformのURLを追加します。以下のように。
  6. In the HTML that is displayed, look for the following variables - "data-url" and "src". Add your Typeform URL along with query parameters in both of the fields. Make sure you use " " instead of ' ' as shown in the example below
    
    data-url ="https://typeformsales7.typeform.com/to/ZmQRUSIu?user_id={{UserAttribute['u_em']}}"
    style="z-index: 999999;">
    
    frameborder="0" height="100%"
    id='typeform-iframe'
    src ="https://typeformsales7.typeform.com/to/ZmQRUSIu?user_id={{UserAttribute['u_em']}}"
    width="100%" allow="camera; microphone; autoplay; encrypted-media; fullscreen;" data-qa="iframe"
    title="typeform-embed" style="border: 0px;">
  7. ユーザー属性を使用して、分析のために追加のパラメータを渡す必要がある場合は、調査URLをパーソナライズできます。たとえば、調査URLが - https://typeformsales7.typeform.com/to/OLMOfS?user_id=xxxxx
    の場合、ユニークなユーザーID（ユーザー属性 - ID）を渡し、URLを次のように更新して応答に保存できます: https://typeformsales7.typeform.com/to/OLUWfS?customer_id={{UserAttribute['uid']}}
    注意 : これが機能するためには、Typeformで隠しフィールドを設定する必要があります。Typeformの隠しフィールドを使用すると、調査に追加のパラメータを渡すことができます。
  8. テンプレートをカスタマイズしたら、キャンペーン作成のステップ3でスケジューリングと配信管理オプションを入力し、キャンペーンを公開します。