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