ドラッグ＆ドロップでアプリ内メッセージを作成する
ドラッグ＆ドロップエディターは、ほとんどのアプリ内メッセージを作成するための推奨される方法です。従来のエディターと同じコアレイアウトでモーダルメッセージやフルスクリーンメッセージを作成できるほか、行、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: アプリ内メッセージを作成してデザインする
ここでは、ブランドならではのスタイルをまとったメッセージが、いよいよランウェイに登場します。エディターブロックとスタイル設定を組み合わせて、アプリ内メッセージをカスタマイズおよびデザインできます。
- 使用可能なエディターブロックとそのプロパティの一覧については、エディターブロックを参照してください。
- メッセージのルックアンドフィールのカスタマイズについては、スタイル設定をご覧ください。
- 右から左に表示するメッセージを作成する際のベストプラクティスについては、右から左へのメッセージの作成を参照してください。
ステップ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アプリ内メッセージを参照してください。
ドラッグ＆ドロップエディターのコンポーザービューが最終的なメッセージと異なって見えることがあるのはなぜですか？
ドラッグ＆ドロップエディターは、メッセージをコンポーザー内でレンダリングし、レイアウトの作成と確認ができるようにプレビュー専用のスタイルとデフォルトを適用します。これらの処理は、編集中に構造やプレースホルダーコンテンツを確認するためのもので、ユーザーが受け取るメッセージには含まれません。
エディター専用の動作の一般的な例は次のとおりです。
- エディターはカスタムコードブロックを、デフォルトの
min-heightが40pxのbz-html-code-blockコンテナでラップします。そのため、空のブロックや短いブロックも編集中に表示されたままになります - 空白の画像やLiquidを含む画像は、エディター内でプレースホルダーとして表示されます
- チェックボックスグループとラジオボタンは、アクティブな状態をプレビューできるように最初のオプションが事前に選択されます
エディター内でのみ表示が異なる場合は、通常はプレビューの動作によるものです。配信されたメッセージのトラブルシューティングを行う際は、エディター専用のフレームやプレビューのデフォルトではなく、メッセージブロック内のスタイルとマークアップを確認してください。
スライドアップのアプリ内メッセージを作成するにはどうすればよいですか？
現在、エディターはモーダルメッセージとフルスクリーンメッセージのみに対応しています。表示タイプは、メッセージスタイルパネルのメッセージコンテナセクションで切り替えることができます。
キャンペーンまたはキャンバス内で作成したアプリ内メッセージをテンプレートとして保存できますか？
はい。今後のキャンペーンやキャンバスステップで再利用したいアプリ内メッセージは、エディターを終了した後に表示されるテンプレートとして保存ボタンを使用して、カスタムテンプレートとして保存できます。テンプレートとして保存する前に、まずキャンペーンを開始するか、下書きとして保存する必要があります。
コンテンツ > アプリ内メッセージに移動して、アプリ内メッセージテンプレートを作成および保存することもできます。
ページ分割されたアプリ内メッセージでLiquid構文がプレーンテキストとして表示されるのはなぜですか？
ページ分割されたアプリ内メッセージのテスト時に、パーソナライズされたコンテンツではなくLiquid構文がプレーンテキストとして表示される場合は、いずれかのページにLiquid構文エラーがある可能性があります。1つのページに構文エラーがあると、メッセージ内のすべてのページでLiquidのレンダリングに影響します。各ページは独立していません。
トラブルシューティングの手順:
- メッセージ内のすべてのページにLiquid構文エラーがないか確認します。あるページのプレビューが壊れていても、そのページにエラーがあるとは限りません。ページは独立していないため、構文エラーはメッセージ内のどこにでも存在する可能性があります。
- すべてのLiquidタグが正しく閉じられ、適切な形式になっていることを確認します。