> ## Documentation Index
> Fetch the complete documentation index at: https://moengage.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# OSM テンプレート

> ポップアップ、バナー、アンケート、リード獲得など、MoEngage On-site Messaging のテンプレートの種類を紹介します。各テンプレートの設定方法を説明します。

On-site messaging（OSM）テンプレートを使用すると、コンバージョンにつながる魅力的なメッセージを作成できます。OSM テンプレートを使用して、短いアンケートの作成、リードの獲得、バナーメッセージの設定ができます。この記事では、OSM テンプレートの種類とその設定について説明します。

# テンプレートの種類

MoEngage の OSM エディターには、さまざまなユースケースに対応する幅広いテンプレートが用意されています。

| | |
| - | - |
| テンプレートの種類 | 説明 |
| Popup Templates | このテンプレートを使用して、訪問者に目立つ形で情報を伝えます。たとえば、ポップアップは次のような用途に使用します。<ol><li>オファーとお知らせ</li><li>リード獲得</li><li>購読</li><li>Typeform のアンケートを使用した訪問者や顧客からの情報収集</li></ol> 詳細については、[Popup Templates](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/osm-templates#popup-templates)を参照してください。 |
| Nudge Templates | このテンプレートを使用して、Web サイト訪問者と邪魔にならない形でコミュニケーションを取ります。たとえば、ナッジテンプレートは次のような用途に使用します。<ol><li>ユーザーが購入を完了したときに購読を獲得する</li><li>リード獲得のために、営業チームへの問い合わせを顧客に促す</li><li>関連性の高いコンテンツやおすすめのコンテンツを表示する</li></ol> 詳細については、[Nudge Templates](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/osm-templates#nudge-templates)を参照してください。 |
| Banner Templates | このテンプレートを使用して、Web サイト全体に情報を表示します。バナーは通常ページの上部または下部に表示され、次のような用途に使用できます。<ol><li>カウントダウンタイマーを表示する</li><li>GDPR に準拠した Cookie 情報を表示する</li></ol> 詳細については、[Banner Templates](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/osm-templates#banner-templates)を参照してください。 |
| Blank Template | このテンプレートの種類を使用して、テンプレートを一から作成します。詳細については、[OSM エディターによるテンプレートのカスタマイズ](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/osm-editor)を参照してください。 |

## Popup Templates

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

1. テンプレートの検索ボックスに **Popup** と入力するか、**Popup Templates** セクションまでスクロールしてテンプレートを選択します。
2. テンプレートを選択すると、OSM エディターにテンプレートが読み込まれます。
3. テンプレートはそのまま使用することも、必要に応じてカスタマイズすることもできます。詳細については、[OSM エディターによるテンプレートのカスタマイズ](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/osm-editor)を参照してください。
4. ユーザーがポップアップの背後にあるページをスクロールできるようにするには、<img alt="Options" src="https://mintcdn.com/moengage/fVqFKGn_bbcOn3ck/images/moengage_24077d.png?fit=max&auto=format&n=fVqFKGn_bbcOn3ck&q=85&s=0e4ba8d4597a31c1fed7f3b8aed94d6b" style={{ display: 'inline-block', width: '32px' }} width="90" height="88" data-path="images/moengage_24077d.png" /> アイコンをクリックし、<img alt="ScrollPopup.png" src="https://mintcdn.com/moengage/t9nft78wsoLTI2Nx/images/moengage_2a6759.png?fit=max&auto=format&n=t9nft78wsoLTI2Nx&q=85&s=8e3c95a7abb677491e4499514bc7bc7b" style={{ display: 'inline-block', width: '32px' }} width="86" height="64" data-path="images/moengage_2a6759.png" /> アイコンをクリックします。**Scroll Page Behind** トグルをオンにします。

<img src="https://mintcdn.com/moengage/UX7SFw6G5JwoHWFq/images/moengage_60ccea.png?s=e597566c9fc38d51333411efd2a6d3d0" alt="ScrollPage" width="1440" height="680" data-path="images/moengage_60ccea.png" />

5. テンプレートをカスタマイズしたら、キャンペーン作成のステップ 3 でスケジュールと配信制御のオプションを入力し、キャンペーンを公開します。

## Nudge Templates

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

1. テンプレートの検索ボックスに **Nudge** と入力するか、**Nudge Templates** セクションまでスクロールしてテンプレートを選択します。
2. テンプレートを選択すると、OSM エディターにテンプレートが読み込まれます。
3. テンプレートはそのまま使用することも、必要に応じてカスタマイズすることもできます。詳細については、[OSM エディターによるテンプレートのカスタマイズ](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/osm-editor)を参照してください。
4. カウントダウンタイマーテンプレートを選択した場合は、タイマーの日時（セールの開始時刻など）を選択し、行動喚起をカスタマイズし、ボタンにリンクを追加してユーザーを対象の Web ページにリダイレクトできます。

<img src="https://mintcdn.com/moengage/Ci8j4F7VOEUnUuwd/images/moengage_eb2aa7.png?s=6ec63719fcd3d1457280ad2be9c6d8e8" alt="TimerTemplate.gif" width="1440" height="686" data-path="images/moengage_eb2aa7.png" />

5. ユーザーのメールアドレスや携帯電話番号を収集するために Subscribe または CTA テンプレートを選択した場合は、[リード獲得テンプレートの例](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/osm-templates#lead-generation-template-example)を参照して、MoEngage で情報を取得し、それを使用してキャンペーンを実行してください。
6. テンプレートをカスタマイズしたら、キャンペーン作成のステップ 3 でスケジュールと配信制御のオプションを入力し、キャンペーンを公開します。

## Banner Templates

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

1. テンプレートの検索ボックスに **Banner** と入力するか、**Banner Templates** セクションまでスクロールしてテンプレートを選択します。
2. テンプレートを選択すると、OSM エディターにテンプレートが読み込まれます。
3. テンプレートはそのまま使用することも、必要に応じてカスタマイズすることもできます。詳細については、[OSM エディターによるテンプレートのカスタマイズ](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/osm-editor)を参照してください。
4. GDPR の Cookie 同意情報を表示するために下部のバナーを選択した場合は、次のように、ユーザーの同意用のリンクを追加し、この情報を保存する属性をマッピングできます。

<img src="https://mintcdn.com/moengage/MkyldVVKHHCZ-kMR/images/moengage_aced41.png?s=e0bd4cef099e89f859667f7f2cb2b073" alt="BannerTemplate_Bottom.gif" width="1440" height="698" data-path="images/moengage_aced41.png" />

5. オファー関連の通知を表示するために下部のバナーを選択した場合は、次のように、タイマー要素のカスタマイズやリンクの追加などができます。

<img src="https://mintcdn.com/moengage/rcvpxihxIp--_HSE/images/moengage_9452b1.png?s=ccfb863fb90a5a8905aa18538db8b931" alt="Banner_Top.gif" width="1440" height="692" data-path="images/moengage_9452b1.png" />

<Info>
  * 上部のバナーは、表示設定がオンで Web サイトのヘッダーがスティッキーでない場合、ページコンテンツを下に押し下げ、コンテンツと重なりません。
  * 下部のバナーはページコンテンツと重なり、邪魔にならない形で画面幅全体に表示されます。
</Info>

# OSM のアクセシビリティの設定

MoEngage では、すべてのユーザーにとってインクルーシブになるよう、On-site メッセージのアクセシビリティ機能を設定できます。アクセシビリティの原則の詳細については、[MoEngage のアクセシブルなキャンペーン](/docs/ja/user-guide/campaigns-and-channels/getting-started/campaign-content/accessible-campaigns-in-moengage)を参照してください。

## ビジュアルへの Accessible Rich Internet Applications（ARIA）ラベルの追加

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

* **ドラッグ＆ドロップエディターを使用する場合:** OSM キャンペーン（ポップアップ、バナーなど）に Image 要素または GIF 要素を追加する場合は、アクセシビリティを確保するために ARIA ラベルを追加します。\
  ARIA ラベルを追加するには、次の手順を実行します。
  1. OSM テンプレートを選択したら、目的の要素をクリックします。
  2. **Settings** > **Styling** をクリックします。 <img src="https://mintcdn.com/moengage/ME-DtlELD2N8TrcF/images/moengage_c206b9.png?fit=max&auto=format&n=ME-DtlELD2N8TrcF&q=85&s=bed559ed4875f1e79ea822484ec50ed1" alt="Screenshot 2025-06-04 at 6.24.31 PM.png" width="3198" height="1396" data-path="images/moengage_c206b9.png" />
  3. **Advanced** タブの **Custom Attributes** ボックスに、次のように ARIA ラベルを入力します。 <img src="https://mintcdn.com/moengage/S2vOz7ciYYqlhjCf/images/moengage_6ce585.png?s=72cd1c444b87a6e9baa055dd279ad95d" alt="2025-06-04_18-27-44 (1).gif" width="1592" height="692" data-path="images/moengage_6ce585.png" />
* **カスタム 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 キャンペーンを作成する場合は、インタラクティブな要素（ボタン、リンク）がタッチデバイスで簡単にタップできる十分な大きさであることを確認してください。

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

# ユースケース

このセクションでは、上記のテンプレートの種類の一般的なユースケースを示します。

| ユースケース | 説明 |
| - | - |
| Offers/Announcements | 今後のオファーや実施中のオファー、お知らせに関する情報を共有する必要がある場合に、これらのテンプレートを使用します。これらのテンプレートには、カウントダウンタイマー、行動喚起ボタン、画像などのさまざまな要素が含まれます。たとえば、このテンプレートの種類は次のような用途に使用します。<ul><li>フラッシュセール</li><li>季節/ホリデーセールのオファー</li><li>割引/タイムセール</li><li>製品の発売やイベントに関するお知らせ 詳細については、[Offers/Announcements](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/osm-templates#offers/announcements)を参照してください。</li></ul> |
| Lead Generation | Web サイト訪問者から情報を収集する必要がある場合に、これらのテンプレートを使用します。メールアドレス、携帯電話番号、その他の設定を取得し、リターゲティングのためにユーザープロファイルに保存できます。たとえば、このテンプレートは次のような用途に使用します。<ul><li>ユーザーにニュースレターを購読してもらう</li><li>ユーザーに SMS メッセージの受信を登録してもらう 詳細については、[Lead Generation](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/osm-templates#lead-generation)を参照してください。</li></ul> |
| Typeform Surveys | このテンプレートの種類を使用して、Typeform で Web サイト訪問者から情報を収集します。詳細については、[Typeform Survey](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/osm-templates#typeform-survey)を参照してください。 |

## Offers/Announcements

オファー/お知らせテンプレートを使用して OSM キャンペーンを作成するには、次の手順を実行します。

1. テンプレートの検索ボックスに **Offer** または **Announcement** と入力し、利用可能なテンプレートのいずれかを選択します。
2. テンプレートを選択すると、OSM エディターにテンプレートが読み込まれます。
3. テンプレートはそのまま使用することも、必要に応じてカスタマイズすることもできます。詳細については、[OSM エディターによるテンプレートのカスタマイズ](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/osm-editor)を参照してください。
4. テンプレートのボタンにリンクを追加するには、**Button** をクリックし、ユーザーがボタンをクリックしたときのリダイレクト先のリンクを追加します。ボタンにリンクを追加すると、MoEngage はそれをクリックイベントとしてトラッキングします。リンクが追加されていない場合、MoEngage はデフォルトでそれを閉じるイベントとしてトラッキングします。
5. **注**: リンクのクリックトラッキングはデフォルトでオンになっています。テンプレートに追加したリンクについては、クリックトラッキングの情報が Campaign Analytics に表示されます。詳細については、[OSM キャンペーン分析](/docs/ja/user-guide/campaigns-and-channels/on-site-message/analyze/analyze-on-site-messaging-campaigns)を参照してください。
6. **メッセージのパーソナライズ**: テキストまたは画像 URL をパーソナライズするには、テキストボックスまたは画像 URL ボックスに `@`（アットマーク）を入力します。次のように、表示されるパーソナライズのポップアップウィンドウで、メッセージに使用するパーソナライズ属性を追加します。 <img src="https://mintcdn.com/moengage/TTNPRzWn21XF5uj0/images/moengage_fa7462.png?s=cd096e53192ceb0160e7f1ed4d011b99" alt="PersonalizedContent.gif" width="1440" height="726" data-path="images/moengage_fa7462.png" /> 詳細については、[OSM メッセージのパーソナライズ](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/personalization-of-osm-content)を参照してください。

## Lead Generation

リード獲得テンプレートを使用して OSM キャンペーンを作成するには、次の手順を実行します。

1. テンプレートの検索ボックスに **Lead Gen** と入力し、利用可能なテンプレートのいずれかを選択します。
2. テンプレートを選択すると、OSM エディターにテンプレートが読み込まれます。
3. テンプレートはそのまま使用することも、必要に応じてカスタマイズすることもできます。詳細については、[OSM エディターによるテンプレートのカスタマイズ](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/osm-editor)を参照してください。
4. リードを取得するには、ユーザーが送信した回答を保存するユーザー属性をマッピングします。たとえば、ユーザーのメールアドレスや携帯電話番号を収集する場合は、MoEngage でユーザーの入力を保存する属性を指定します。属性をマッピングするには、テンプレート内の入力フィールドのエディターツールバーで <img alt="InputCapture__1_.png" src="https://mintcdn.com/moengage/60BzFdXTJDO5dnCb/images/moengage_355030.png?fit=max&auto=format&n=60BzFdXTJDO5dnCb&q=85&s=44903b9506b11dd4f78fe1419f14c244" style={{ display: 'inline-block', width: '32px' }} width="56" height="80" data-path="images/moengage_355030.png" /> アイコンをクリックします。次のオプションが表示されます。
   * **Field** - 入力フィールドの種類と、必須フィールドかどうかを指定します。次のフィールドの種類を利用できます。
     | フィールドの種類 | 説明 |
     | - | - |
     | Text | ユーザーからテキスト入力を収集します。 |
     | Email | ユーザーのメールアドレスを収集します。 |
     | Number | ユーザーから数値入力を収集します。 |
     | Paragraph | ユーザーから記述式のフィードバックを収集します。たとえば、ユーザーの問い合わせ内容や購読解除時のフィードバックを尋ねるテンプレートで **Paragraph** フィールドを使用します。 |
     | Select | ユーザーが選択できるドロップダウンリストを追加します。 |
     | Radio | ユーザーが選択できるラジオボタンを追加します。 |
     | Checkbox | ユーザーが選択できるチェックボックスを追加します。たとえば、購読設定を尋ねる場合に、オプションを一覧表示し、ユーザーが興味のあるカテゴリーを選択できるようにします。 |
     | Date | ユーザーが日付を選択できるようにします。たとえば、ミーティングを設定する際に、ユーザーの希望する日付と時刻（**Time** フィールドの種類）を尋ねることができます。 |
     | URL | ユーザーが選択できるラジオボタンを追加します。 |
     | Time | ユーザーが時間帯を選択できるようにします。たとえば、折り返し電話のリクエストオプションがある場合に、ユーザーに連絡する希望の時間を尋ねることができます。 |
     | Tel | ユーザーの電話番号を収集します。 |
     | Password | ユーザーがパスワードを入力するサインアップやログインのオプションを追加する場合に、このフィールドの種類を使用します。 |
   * **Required** - このトグルはデフォルトでオンになっています。フィールドが必須でない場合は、**Required** トグルをオフにします。
   * **Spacing** - このフィールドは、入力フィールドとその下の要素との間隔を制御します。
5. **Advanced** - このタブは、入力フィールドのユーザー属性のマッピングを制御します。次のオプションを利用できます。
   * Label - 入力フィールドにラベルが必要かどうかを指定します。
   * Placeholder - 入力フィールドにプレースホルダーが必要かどうかを指定します。
   * User Attribute - 入力フィールドにユーザー属性をマッピングします。
6. **Background** - このタブは入力フィールドのサイズを制御します。S、M、L のオプションから選択できます。
7. テンプレートをカスタマイズしたら、**Test campaign** オプションを使用してテストし、キャンペーンを公開します。詳細については、[OSM キャンペーンの作成](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/create-osm-campaign)を参照してください。

### **リード獲得テンプレートの例**

ニュースレター購読のリード獲得テンプレートを例に考えます。ニュースレター購読テンプレートを使用して OSM キャンペーンを作成するには、次の手順を実行します。

1. ステップ 1 で、必要に応じてターゲットオーディエンスを選択します。
2. **Newsletter Subscription Lead Gen Template** を選択します。
3. メールの入力フィールドをクリックします。
4. エディターツールバーで <img alt="InputCapture__1_.png" src="https://mintcdn.com/moengage/60BzFdXTJDO5dnCb/images/moengage_355030.png?fit=max&auto=format&n=60BzFdXTJDO5dnCb&q=85&s=44903b9506b11dd4f78fe1419f14c244" style={{ display: 'inline-block', width: '32px' }} width="56" height="80" data-path="images/moengage_355030.png" /> アイコンをクリックします。
5. ユーザーのメールアドレス（テンプレート内の入力フィールドのデフォルト設定）を収集する場合は、次のステップに進みます。ユーザーから他の情報を収集する場合は、**Type** オプションで情報の種類を選択します。たとえば、ユーザーの携帯電話番号を収集する場合は、Type で **Tel** を選択します。
6. 入力フィールドはデフォルトで必須です。**Required** トグルをオフにすると、フィールドを任意にできます。
7. ユーザー入力をマッピングするには、次のように **Advanced** タブを選択し、ユーザーの入力を保存するユーザー属性を選択します。
8. カスタム属性をマッピングするには、次の手順を実行します。
   1. **Subscribe** ボタンをクリックして、エディターツールバーを表示します。
   2. **Styling** をクリックします。
   3. **Custom Attributes** セクションに、カスタム属性とそのマッピングを入力します。このステップで説明したように、属性は UI で、または手動でマッピングできます。
9. テンプレートをカスタマイズしたら、キャンペーン作成のステップ 3 でスケジュールと配信制御のオプションを入力し、キャンペーンを公開します。

<img src="https://mintcdn.com/moengage/M3SzEdkQVgGAjJCt/images/moengage_75d66d.png?s=862353443d59a8fb25b37dc841a4fdb8" alt="LeadGenTemplate.gif" width="1440" height="820" data-path="images/moengage_75d66d.png" />

ユーザーがニュースレターを購読すると、そのユーザープロファイルで購読をトラッキングできます。ユーザーがキャンペーンで **Subscribe** をクリックすると、次の処理が行われます。

1. `MOE_RESPONSE_SUBMITTED` イベントが発生します。
2. MoEngage は、マッピングされたユーザー属性にユーザー入力を保存します。たとえば、ユーザーがメールアドレスを入力して **Subscribe** をクリックすると、MoEngage はメールアドレスを **Email** ユーザー属性に保存し、次のようにユーザーのプロファイルの `MOE_RESPONSE_SUBMITTED` イベントに表示されます。

<img src="https://mintcdn.com/moengage/4hNKOAjPrnhpJB2_/images/moengage_7d5c66.png?fit=max&auto=format&n=4hNKOAjPrnhpJB2_&q=85&s=1af4582dcbe9a72915c97e9ea8823513" alt="ResponseSubmittedEvent.png" width="2730" height="734" data-path="images/moengage_7d5c66.png" />

### 回答を送信したユーザーの特定

`MOE_RESPONSE_SUBMITTED` イベントを実行したユーザーを特定し、その回答でフィルタリングしてセグメントを作成し、データを分析できます。次の手順を実行します。

1. MoEngage Dashboard で、**Segment** **Create Segment** に移動します。
2. **Filter Users by** タブで **User Property** を選択し、`MOE_RESPONSE_SUBMITTED` イベントを追加します。
3. 次のように、イベントの期間を指定し、OSM キャンペーン ID を追加して、キャンペーンに回答を送信したユーザー数を表示します。

<img src="https://mintcdn.com/moengage/cFTwc93vQdTanvKi/images/moengage_bd87b8.png?s=74501d01f5a605e2568fb196970148a7" alt="Segmentation.gif" width="1440" height="726" data-path="images/moengage_bd87b8.png" />

4. このセグメントをターゲットとするキャンペーンを作成したり、分析したり、セグメントの詳細をエクスポートしてセグメントデータを独自に分析したりできます。

## Typeform Survey

<Tip>
  * Typeform のアンケートを作成し、URL を用意しておいてください。この URL をテンプレートに追加してアンケートを読み込みます。
  * **User Attributes** で Typeform の URL をパーソナライズする場合は、Typeform で非表示フィールドを事前に設定する必要があります。詳細については、[Typeform での非表示フィールドの使用](https://www.typeform.com/help/a/what-are-hidden-fields-360052676372/)を参照してください。
</Tip>

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

1. テンプレートの検索ボックスに **Typeform survey** と入力し、**Typeform** テンプレートを選択します。
2. テンプレートを選択すると、OSM エディターにテンプレートが読み込まれます。
3. テンプレートはそのまま使用することも、必要に応じてカスタマイズすることもできます。詳細については、[OSM エディターによるテンプレートのカスタマイズ](/docs/ja/user-guide/campaigns-and-channels/on-site-message/create/osm-editor)を参照してください。
4. テンプレート内の空の Typeform 要素をクリックして、エディターツールバーを表示します。
5. 次のように、<img alt="AddTypeForm.png" src="https://mintcdn.com/moengage/2FjM3dGfEH1CYo8k/images/moengage_6573f4.png?fit=max&auto=format&n=2FjM3dGfEH1CYo8k&q=85&s=85a64418008c6d215c7ca36f4a0458dd" style={{ display: 'inline-block', width: '32px' }} width="54" height="70" data-path="images/moengage_6573f4.png" /> アイコンをクリックし、表示される HTML エディターに Typeform の URL を追加します。
6. HTML が表示されたら、`data-url` 変数と `src` 変数を見つけます。クエリパラメーターを含む Typeform の URL を両方のフィールドに追加します。例に示すように、一重引用符（`'`）ではなく二重引用符（`"`）を使用してください。
   ```html wrap theme={null}
   <div data-id="IFRAME" id="survey-frame" class="moe-element moe-container frame" data-url="https://typeformsales7.typeform.com/to/ZmQRUSIu?user_id={{UserAttribute['u_em']}}"style="z-index: 999999;"><div class="widget__WidgetWrapper-sc-1rxjz1n-0 NwqzB"><div class="widget__IframeWrapper-sc-1rxjz1n-2 cKLpKc" style="height: 400px; width: 600px;"><iframeframeborder="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;"></iframe></div></div></div>
   ```
7. ユーザー属性でアンケート 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 の非表示フィールドを使用すると、アンケートとともに追加のパラメーターを渡すことができます。
8. テンプレートをカスタマイズしたら、キャンペーン作成のステップ 3 でスケジュールと配信制御のオプションを入力し、キャンペーンを公開します。

<img src="https://mintcdn.com/moengage/iCae3l_a7eOJMTbz/images/moengage_210b08.png?s=478a9eee5ef85fad6f55ef09a53c8424" alt="TypeForm_Survey.gif" width="1440" height="726" data-path="images/moengage_210b08.png" />