ドラッグ＆ドロップでアプリ内メッセージを作成する
ドラッグ＆ドロップエディターは、ほとんどのアプリ内メッセージを作成するための推奨される方法です。従来のエディターと同じコアレイアウトでモーダルメッセージやフルスクリーンメッセージを作成できるほか、行、Content Blocks、テンプレート、マルチページフローによるさらなるカスタマイズが可能です。エディターで使用できるビルディングブロックの詳細については、エディターブロックを参照してください。
既存のカスタムHTMLテンプレートやサードパーティが作成したテンプレートを使用する場合は、ドラッグ＆ドロップエディターで再作成する必要があります。
アプリ内メッセージをキャンペーンで送信するかキャンバスで送信するか迷っていますか？キャンペーンは単一のターゲットメッセージに適しており、キャンバスはマルチステップのユーザージャーニーに適しています。メッセージの作成場所を選択したら、ドラッグ＆ドロップのアプリ内メッセージを作成する手順を見ていきましょう。
前提条件
SDKの要件
| 最小SDKバージョン | 推奨SDKバージョン |
|---|---|
最小SDKに関する詳細情報
ドラッグ＆ドロップエディターを使用して作成されたメッセージは、最小SDKバージョン（前のセクションの表を参照）を使用しているユーザーにのみ送信できます。ユーザーがアプリケーションを更新していない場合（つまり、古いSDKバージョンを使用している場合）、アプリ内メッセージは受信されません。
ドラッグ＆ドロップエディターで利用可能なすべての機能を活用するには、SDKを推奨SDKバージョンに更新してください。これにより、以下の追加機能を活用できます。
- メッセージを閉じないテキストリンク
- プッシュプライマーをリクエストするボタンアクション
以下は、これらの機能の個別の最小SDK要件です。
| テキストリンク* | プッシュプライマーのリクエスト |
|---|---|
*アプリ内メッセージにURLにリダイレクトするリンクを含めていて、エンドユーザーが指定された最小SDKバージョンを使用していない場合、リンクを選択するとメッセージが閉じられ、ユーザーはフォームを送信するためにメッセージに戻ることができません。
その他の前提条件
- Web SDKの場合、初期化オプション
allowUserSuppliedJavascriptをtrueに設定する必要があります。enableHtmlInAppMessagesオプションでもこれらのメッセージは機能しますが、非推奨であるためallowUserSuppliedJavascriptに更新してください。 - Google Tag Managerを使用している場合は、GTM設定で「Allow HTML In-App Messages」を有効にする必要があります。
ステップ1：アプリ内メッセージを作成する
新しいアプリ内メッセージまたはキャンバスステップを作成し、編集エクスペリエンスとしてドラッグ＆ドロップエディターを選択します。
ステップ2:テンプレートを選択する
編集エクスペリエンスとしてドラッグ＆ドロップエディターを選択した後、以下のいずれかを選択できます。
- 空白のモーダルテンプレートから開始する
- Brazeのドラッグ＆ドロップアプリ内メッセージテンプレートを使用する
- 保存済みのドラッグ＆ドロップアプリ内メッセージテンプレートを選択する
メッセージを作成を選択して、ドラッグ＆ドロップエディターでアプリ内メッセージのデザインを開始します。
また、ダッシュボードのテンプレートセクションからすべてのテンプレートにアクセスすることもできます。
ステップ3:追加ページを追加する（オプション）
アプリ内メッセージにページを追加すると、オンボーディングフローやウェルカムジャーニーのようなシーケンシャルフローでユーザーをガイドできます。ページはビルドタブのページセクションから管理できます。
アプリ内メッセージはデフォルトで1ページから始まります。新しいページを追加するには：
- + ページを追加を選択します。
- カスタムテンプレートまたはBraze提供のテンプレートのリストから選択します。
- ページにわかりやすい名前を付けます。これはページ同士を接続する際に役立ちます。
アプリ内メッセージごとに最大10ページまで追加できます。
既存のページを複製するには：
- リスト内のページにカーソルを合わせ、 その他のオプションを選択します。
- 複製を選択します。
- ページにわかりやすい名前を付けます。これはページ同士を接続する際に役立ちます。
ページを削除または名前変更するには：
- リスト内のページにカーソルを合わせ、 その他のオプションを選択します。
- 名前変更または削除を選択します。
ステップ3a:ページを接続する
マルチページのアプリ内メッセージはシーケンシャルです。つまり、ユーザーはタップまたはクリックしてフロー内の次のページに移動することでメッセージを操作します。
ページを接続するには：
- 開始ページを選択します。
- キャンバス内のボタンまたは画像要素を選択します。
- クリック時の動作をページに移動に設定します。
- 開始ページからリンクしたいページを選択します。
- すべてのページがリンクされるまで続けます。
ページが他のページにリンクされていない場合、メッセージを起動できません。
ユーザーはいつでも閉じるXボタンを選択してメッセージを終了できます。このボタンは削除できません。
ステップ4：アプリ内メッセージを構築・デザインする
ここでは、ブランド独自のスタイルに合わせてメッセージをデザインします。エディターブロックとスタイル設定を組み合わせて、アプリ内メッセージをカスタマイズおよびデザインできます。
- 利用可能なエディターブロックとそのプロパティの一覧については、エディターブロックを参照してください。
- メッセージのルック＆フィールのカスタマイズについては、スタイル設定をご確認ください。
- 右から左（RTL）のメッセージの作成に関するベストプラクティスについては、右から左のメッセージの作成を参照してください。
ステップ5：アプリ内メッセージをテストする
プレビューとテストセクションでは、さまざまなデバイスでアプリ内メッセージをプレビューし、デバイスにテストメッセージを送信できます。ここでは、ドラッグ＆ドロップのアプリ内メッセージキャンペーンのすべてのプラットフォームで詳細が揃っていることを確認できます。
キャンペーンを送信する前に、必ずアプリ内メッセージをテストすることが重要です。これにより、ユーザーの視点から最終的なメッセージがどのように表示されるかを確認できます。
ユーザーとしてメッセージをプレビューする
コンテンツテストグループまたは個々のユーザーにテストを送信するには、送信前にテストデバイスでプッシュを有効にする必要があります。
プレビューとテストタブから、ユーザーとしてメッセージをプレビューできます。特定のユーザー、ランダムなユーザーを選択するか、カスタムユーザーを作成できます。
- ランダムユーザー： Brazeはデータベースからランダムにユーザーを選択し、そのユーザーの属性やイベント情報に基づいてアプリ内メッセージをプレビューします。
- ユーザーを選択： メールアドレスまたは
external_idに基づいて特定のユーザーを選択できます。アプリ内メッセージはそのユーザーの属性とイベント情報に基づいてプレビューされます。 - カスタムユーザー： ユーザーをカスタマイズできます。Brazeは利用可能なすべての属性とイベントの入力欄を提供します。プレビューメールで確認したい情報を入力してください。
テストチェックリスト
アプリ内メッセージをテストする際は、以下の点を確認してください。
- さまざまなデバイスでメッセージをテストしましたか？
- 画像やメディアは期待どおりに表示され、動作しますか？
- Liquidは期待どおりに機能しますか？Liquidが情報を返さない場合に備えて、デフォルトの属性値を設定しましたか？
- コピーは明確、簡潔、かつ正確ですか？
- ボタンはユーザーを適切な場所に誘導しますか？
よくある質問
ボディクリックが分析ページに表示されないのはなぜですか？
ドラッグ＆ドロップエディターで作成されたアプリ内メッセージでは、ボディクリックは自動的に収集されません。詳細については、iOSとAndroidのSDK変更ログを参照してください。
ボタンクリックに基づいてセグメンテーションできますか？
はい、メッセージ内の最大2つのボタンのボタンクリックに基づいてセグメンテーションできます。これを行うには、ボタンのレポート用識別子を「0」と「1」に設定します。これにより、セグメンテーションフィルター「アプリ内メッセージボタン1をクリック」と「アプリ内メッセージボタン2をクリック」にそれぞれ対応します。
カスタムHTMLやJavaScriptを使用してアプリ内メッセージをカスタマイズしたり、既存のHTMLメッセージをエディターに転送したりできますか？
既存のHTMLメッセージをエディターに直接転送することはできませんが、カスタムコードブロックに生のHTML、CSS、JavaScriptを挿入できます。カスタムコードブロックを使用して、サードパーティの動画や、Connected Contentや条件文などの高度なLiquidを埋め込むことができます。brazeBridge JavaScriptメソッドとクリックトラッキングの例については、カスタムHTMLアプリ内メッセージを参照してください。
ドラッグ＆ドロップエディターのコンポーザービューが最終的なメッセージと異なって見えるのはなぜですか？
ドラッグ＆ドロップエディターは、コンポーザー内でメッセージをレンダリングし、プレビュー専用のスタイルとデフォルト値を適用して、レイアウトの構築と確認ができるようにしています。これらの処理は、編集中に構造やプレースホルダーコンテンツを確認するためのものであり、ユーザーが受け取るメッセージには含まれません。
エディター専用の動作の一般的な例には以下があります：
- エディターはカスタムコードブロックを
bz-html-code-blockコンテナで囲み、デフォルトのmin-heightを40pxに設定するため、空のブロックや短いブロックも編集中に表示されます - 画像が空白であるか、Liquidを含む場合にエディターでプレースホルダーが表示されます
- チェックボックスグループやラジオボタンが最初のオプションを事前選択して、アクティブ状態をプレビューできるようにしています
エディターでのみ異なって見える場合、通常はプレビューの動作です。配信されるメッセージのトラブルシューティングを行う際は、エディター専用のフレームやプレビューのデフォルト値ではなく、メッセージブロック内のスタイルとマークアップを確認してください。
スライドアップ型のアプリ内メッセージを作成できますか？
現在、エディターはモーダルとフルスクリーンメッセージのみに限定されています。表示タイプは、メッセージスタイルパネルのメッセージコンテナセクションで切り替えることができます。
キャンペーンまたはキャンバス内で作成したアプリ内メッセージをテンプレートとして保存できますか？
はい。今後のキャンペーンまたはキャンバスステップで再利用したいアプリ内メッセージは、エディターを終了した後に表示されるテンプレートとして保存ボタンを使用して、カスタムテンプレートとして保存できます。テンプレートとして保存するには、まずキャンペーンを開始するか、下書きとして保存する必要があります。
また、コンテンツ > アプリ内メッセージに移動して、アプリ内メッセージテンプレートを作成および保存することもできます。
ページ分割されたアプリ内メッセージで、Liquid構文がプレーンテキストとして表示されるのはなぜですか？
ページ分割されたアプリ内メッセージをテストする際に、Liquid構文がプレーンテキストとして表示される場合（パーソナライズされたコンテンツの代わりに）、いずれかのページにLiquid構文エラーがある可能性があります。1つのページに構文エラーがあると、メッセージ内のすべてのページのLiquidレンダリングに影響します。各ページは独立していません。
トラブルシューティングの手順：
- メッセージ内のすべてのページでLiquid構文エラーを確認してください。1つのページでプレビューが壊れていても、そのページにエラーがあるとは限りません。ページは独立していないため、構文エラーはメッセージ内のどこにでもある可能性があります。
- すべてのLiquidタグが正しく閉じられ、正しい形式になっていることを確認してください。