バナーを作成
Brazeでキャンペーンやキャンバスを構築する際にバナーを作成する方法を説明します。一般的な情報については、バナーについてを参照してください。
前提条件
バナーを公開する前に、開発チームがアプリまたはWebサイトにプレースメントを設定する必要があります。その間にバナーキャンペーンの下書きを作成することはできますが、プレースメントが設定されるまでキャンペーンを公開することはできません。
バナーメッセージを作成する
ステップ 1: Braze での配置の作成
まだ作成していない場合は、アプリまたはサイトでバナーを表示できる場所を定義するために使用するバナーの配置をBrazeで作成する必要があります。配置を作成するには、Settings > Banners Placementsに移動し、配置の作成を選択します。
配置に名前を付け、配置ID を割り当てます。ID はカードのライフサイクル全体で使用されるため、後で変更しないでください。ID を割り当てる前に、他のチームに相談してください。詳細については、配置IDを参照してください。
ステップ2:メッセージの作成場所を選択する
メッセージをキャンペーンとキャンバスのどちらで送信すべきかわからない場合キャンペーンは単一のターゲットメッセージングに適しており、キャンバスはマルチステップのユーザージャーニーに適しています。
- メッセージング > キャンペーンに移動し、キャンペーンを作成を選択します。
- バナーを選択します。
- キャンペーンにわかりやすく意味のある名前を付けます。
- 必要に応じてチームとタグを追加します。タグを使うと、キャンペーンの検索やレポートの作成が容易になります。たとえば、レポートビルダーを使用する際に、関連するタグでフィルタリングできます。
- 事前に作成したプレースメントを選択して、キャンペーンに関連付けます。
- 必要に応じてバリアントを追加します。バリアントごとに異なるメッセージタイプやレイアウトを選択できます。バリアントの詳細については、多変量テストとABテストを参照してください。
- バナーキャンペーンの開始日時を選択します。デフォルトでは、バナーは無期限に続きます。終了時間を選択し、終了日時を指定することで変更できます。
キャンペーン内のすべてのメッセージが似た内容や同じ内容になる場合は、追加のバリアントを加える前にメッセージを作成してください。その後、バリアントを追加ドロップダウンからバリアントからコピーを選択できます。
ステップ3:バナーを作成する
次に、作成の開始方法を選択します。
- ドラッグ＆ドロップエディター: 空白のバナーから開始し、ブロックと行を使って視覚的に構築します。
- HTMLエディター: 空白のバナーから開始し、HTMLで直接作業します。
- テンプレート: テンプレートライブラリを開き、Brazeテンプレートまたはあなたのテンプレートからデザインを選択します。テンプレートはドラッグ＆ドロップエディターでカスタマイズできます。
ステップ3.1:バナーのスタイルを設定する
キャンバスエリアにブロックと行をドラッグ＆ドロップして、メッセージの構築を開始できます。バナーエディターのブロックリファレンスと共有プロパティの詳細へのリンクについては、エディターブロック（バナー）を参照してください。
メッセージの背景プロパティ、ボーダー設定などをカスタマイズするには、スタイルを選択します。特定のブロックまたは行のスタイルのみをカスタマイズしたい場合は、それを選択して変更を加えます。
HTMLエディターは、独自のHTMLテンプレートをすでに管理しているチームや、マークアップとスタイリングを完全にコントロールしたいチームに最適です。エディターにカスタムHTMLを直接記述またはペーストできます。Liquidパーソナライゼーションタグは完全にサポートされているため、ユーザー属性、カスタム属性、カタログアイテムなどを参照できます。
バナーHTMLの構築にヘルプが必要な場合は、HTMLエディターでAsk Operatorを選択し、作成したいバナーを説明してください。BrazeAI Operator™がHTMLを生成し、確認してエディターに挿入できます。詳細については、メッセージを生成するを参照してください。
カスタムHTMLでのクリックおよび解除トラッキングでは、JavaScriptブリッジメソッドを明示的に呼び出す必要があります。完全なリファレンスについては、バナーのカスタムコードとJavaScriptブリッジを参照してください。
ステップ3.2:クリック時の動作を定義する（オプション）
ユーザーがバナー内のリンクをクリックした場合、アプリ内の深い階層にナビゲートしたり、別のWebページにリダイレクトしたりできます。また、カスタム属性またはイベントをログに記録することも選択でき、ユーザーがバナーをクリックした際にカスタムデータでユーザープロファイルを更新します。より詳細なクリックトラッキングのために、プロパティパネルのレポート用識別子フィールドを使用して、各インタラクティブ要素にカスタム識別子を割り当てます。
クリック時の動作は、バナーの特定の要素（ボタン、リンク、画像など）に独自のクリック時の動作が設定されている場合、上書きされることがあります。たとえば、以下のクリック時の動作が設定されている場合：
- バナーに、Webサイトのホームページにリダイレクトするクリック時の動作がある。
- バナー内の画像に、Webサイトの商品ページにリダイレクトするクリック時の動作がある。
HTMLエディターでは、クリックトラッキングは自動ではありません。トラッキングしたい各クリック可能な要素に対して、HTML内からbrazeBridge.logClick()を呼び出す必要があります。例：
<a href="https://example.com" onclick="brazeBridge.logClick()">Shop now</a>
完全なJavaScriptブリッジリファレンスについては、バナーのカスタムコードとJavaScriptブリッジを参照してください。
ステップ3.3:解除の動作を設定する（オプション）
バナーの解除には、以下の最小SDKバージョンが必要です。古いSDKバージョンでは、解除が有効なバナーはレンダリングされません。
解除の動作セクションでバナーを解除可能にするチェックボックスを選択すると、ユーザーがバナーを解除できるようになります。これは、幅広いオーディエンスに期間限定オファーを宣伝しつつ、興味のないユーザーにはメッセージを非表示にできるようにしたい場合に便利です。
解除がオンの場合、解除の動作セクションで解除ボタンをカスタマイズできます。
| 設定 | 説明 |
|---|---|
| ボタンサイズ | バナーに表示される解除ボタンのサイズ。 |
| ボタンの色 | 解除ボタンの色。 |
| ARIAラベル | スクリーンリーダーが使用する解除ボタンのアクセシブルラベル。空白のままにすると、デフォルトで「閉じる」になります。 |
ユーザーがバナーを解除すると、キャンペーンのターゲット条件に適合していても、そのユーザーには再度表示されません。
HTMLエディターでは、HTML内でbrazeBridge.closeMessage()を使用して解除を処理します。brazeBridge.logClick()と組み合わせることで、解除アクションをクリックイベントとしてトラッキングすることもできます。例：
<a href="#" onclick="brazeBridge.logClick(); brazeBridge.closeMessage();">✕ Close</a>
この方法でユーザーがバナーを解除すると、キャンペーンのターゲット条件に適合していても、そのユーザーには再度表示されません。
完全なJavaScriptブリッジリファレンスについては、バナーのカスタムコードとJavaScriptブリッジを参照してください。
ステップ3.4:カスタムプロパティを追加する（オプション）
バナーにカスタムプロパティを追加して、文字列やJSONオブジェクトなどの構造化メタデータを添付できます。これらのプロパティはバナーの表示には影響しませんが、Braze SDKを通じてアクセスして、アプリの動作や外観を変更できます。たとえば、次のようなことができます。
- サードパーティの分析やインテグレーションにメタデータを送信します。
timestampやJSONオブジェクトなどのメタデータを使用して、条件付きロジックをトリガーします。ratioやformatなどの含まれるメタデータに基づいて、バナーの動作をコントロールします。
カスタムプロパティは、ドラッグ＆ドロップエディターとHTMLエディターの両方で同じように機能します。カスタムプロパティを追加するには、設定 > プロパティ > プロパティを追加を選択します。
追加するプロパティごとに、以下の項目を入力します。
| フィールド | 説明 | 例 |
|---|---|---|
| プロパティタイプ | プロパティのデータ型。サポートされるタイプには、文字列、ブール値、数値、タイムスタンプ、画像URL、JSONオブジェクトがあります。 | 文字列 |
| プロパティキー | プロパティの一意の識別子。このキーはSDKでプロパティにアクセスするために使用されます。 | color |
| 値 | プロパティに割り当てられる値。選択したプロパティタイプと一致する必要があります。 | #FF0000 |
完了したら、完了を選択します。
ステップ3.5:Connected Contentでパーソナライズする（オプション）
Connected Content for Bannersは現在早期アクセス中です。早期アクセスへの参加にご興味がある場合は、Braze account マネージャーまでお問い合わせください。
バナーはセッションリフレッシュ中にインラインでレンダリングされるため、このチャネルのConnected Contentは他のチャネルとは異なる動作をします。
- GETリクエストのみがサポートされています。
- 1回のリフレッシュでのすべてのプレースメント（最大10個）は、約2秒のレンダリングバジェットを共有します。呼び出しが遅い場合、タイムアウトした場合、またはバジェットを超えた場合、そのプレースメントのConnected Contentの結果はnullとして扱われます。バナーはリトライしません。
最良の結果を得るために：
- エンドポイントを高速に保ち、可能な限りレスポンスをキャッシュしてください。
- 一緒にレンダリングされるプレースメント間で、ユニークなConnected Content URLの数を制限してください。
- あるConnected Contentのレスポンスが次のURLを決定するような呼び出しの連鎖は避けてください。追加の呼び出しはそれぞれ共有バジェットに加算されます。
- Liquidガードステートメントまたは
defaultフィルターを使用して、null結果を処理し、空白のバナーを避けてください。
ステップ4:キャンペーンまたはキャンバスの残りを構築する
バナーの優先度を設定する（オプション）
バナーの優先度は、同じプレースメントを共有するバナーの表示順序を決定します。手動で優先度を設定するには：
- Set exact priorityを選択します。
- キャンペーンをドラッグ＆ドロップして、正しい優先順序に並べます。
- Apply Sortを選択します。
同じプレースメントIDを使用する複数のバナーキャンペーンがある場合、ドラッグ＆ドロップの優先度ソーターを使用して正確な優先度を定義することをお勧めします。
再適格性を設定する（オプション）
デフォルトでは、バナーを解除したユーザーは、そのキャンペーンに対して再適格になりません。解除したユーザーにバナーを再度表示するには、配信コントロールステップに移動し、ユーザーにキャンペーンの再受信を許可するを選択します。有効にした場合、分、時間、日、または週単位でクールダウンウィンドウを設定します。
カウントダウンは、ユーザーがバナーを解除した時点から開始されます。ウィンドウが終了すると、ユーザーは自動的に再適格になり、キャンペーンの再起動は不要です。再適格性は、ユーザーごと、キャンペーンごとにトラッキングされます。
オーディエンスを選択する
- ターゲットオーディエンスで、セグメントまたはフィルターを選択してオーディエンスを絞り込みます。おおよそのセグメント人口のプレビューが自動的に表示されます。正確なセグメントメンバーシップは、メッセージが送信される前に計算されます。
メッセージは、ターゲットオーディエンスステップで設定した条件にすでに合致しているユーザーにのみ送信されます。その後も、スケジュール配信ステップで定義したトリガーを満たす必要があります。ターゲットオーディエンスは待合室のようなものです。次のアクションが発生したときに進むことができるのは、すでに中にいるユーザーだけです。
- コンバージョンの割り当てで、コンバージョンイベントを定義してキャンペーン受信後にユーザーが特定のアクションを実行する頻度をトラッキングします。アクションをコンバージョンとしてカウントする最大30日間のウィンドウを設定できます。
コンバージョンイベントを選択する
Brazeでは、キャンペーン受信後にユーザーが特定のアクションを実行する頻度であるコンバージョンイベントをトラッキングできます。ユーザーが指定されたアクションを実行した場合にコンバージョンとしてカウントする最大30日間のウィンドウを設定できます。
まだ完了していない場合は、キャンバスコンポーネントの残りのセクションを完成させてください。キャンバスの残りの構築方法（多変量テストやBrazeAITMで最適化を含む）の詳細については、キャンバスを構築するを参照してください。
キャンバスのバナーステップの再適格性を制御するには、キャンバスの再エントリ設定を使用します。詳細については、キャンペーンとキャンバスの再適格性を参照してください。
ステップ5:メッセージをテストする（オプション）
プレビューを選択して、バナーをプレビューするか、テストメッセージを送信します。
ハードウェアの違いにより、プレビューはユーザーのデバイスでの最終的なレンダリングと同一ではない場合があることにご注意ください。
テストメッセージを送信するには、テスト受信者としてコンテンツテストグループまたは1人以上の個別ユーザーを追加し、テスト送信を選択します。テストメッセージはデバイス上で最大5分間表示できます。次にプレビューリンクをコピーを選択すると、ランダムなユーザーに対してバナーがどのように表示されるかを確認できる共有可能なプレビューリンクが生成され、コピーされます。リンクは7日間有効で、それ以降は再生成が必要です。
テストバナーを確認する際は、以下の点を検証してください。
- バナーキャンペーンはプレースメントに割り当てられていますか？
- 画像やメディアは、ターゲットのデバイスタイプや画面サイズで期待どおりに表示され、動作しますか？
- リンクやボタンは、ユーザーを正しい場所に誘導していますか？
- Liquidは期待どおりに機能していますか？Liquidが情報を返さない場合に備えて、デフォルトの属性値を設定していますか？
- コピーは明確で簡潔かつ正確ですか？
詳細については、テストメッセージの送信を参照してください。
ステップ6:レビューとデプロイ
キャンペーンまたはキャンバスの構築が完了したら、詳細を確認し、テストを行い、準備ができたら送信します。