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