バナーを作成
Brazeでキャンペーンやキャンバスを構築する際にバナーを作成する方法を説明します。一般的な情報については、バナーについてを参照してください。
前提条件
バナーを起動する前に、開発チームがアプリまたはWebサイトにプレースメントを設定する必要があります。その間にバナーキャンペーンの下書きを作成することはできますが、プレースメントが設定されるまでキャンペーンを起動することはできません。
バナーメッセージを作成する
ステップ 1: Braze での配置の作成
まだ作成していない場合は、アプリまたはサイトでバナーを表示できる場所を定義するために使用するバナーの配置をBrazeで作成する必要があります。配置を作成するには、Settings > Banners Placementsに移動し、配置の作成を選択します。
配置に名前を付け、配置ID を割り当てます。ID はカードのライフサイクル全体で使用されるため、後で変更しないでください。ID を割り当てる前に、他のチームに相談してください。詳細については、配置IDを参照してください。
ステップ2: メッセージの作成場所を選択する
メッセージをキャンペーンとキャンバスのどちらで送信すべきかわからない場合は、キャンペーンは単一のターゲットメッセージングキャンペーンに適しており、キャンバスはマルチステップのユーザージャーニーに適しています。
- メッセージング > キャンペーンに移動し、キャンペーンを作成を選択します。
- Bannerを選択します。
- キャンペーンにわかりやすく意味のある名前を付けます。
- 必要に応じてチームとタグを追加します。タグを使用すると、キャンペーンを見つけやすくなり、レポートを作成しやすくなります。たとえば、レポートビルダーを使用する際に、関連するタグでフィルタリングできます。
- 以前に作成したプレースメントを選択して、キャンペーンに関連付けます。
- 必要に応じてバリアントを追加します。各バリアントに異なるメッセージタイプとレイアウトを選択できます。バリアントの詳細については、多変量テストとABテストを参照してください。
- バナーキャンペーンの開始日時を選択します。デフォルトでは、バナーは無期限に継続します。End Timeを選択して終了日時を指定することで、これを変更できます。
キャンペーン内のすべてのメッセージが類似している、または同じコンテンツを持つ場合は、追加のバリアントを追加する前にメッセージを作成してください。その後、バリアントを追加ドロップダウンからバリアントからコピーを選択できます。
ステップ3: バナーを作成する
次に、作成方法を選択します。
- ドラッグ＆ドロップエディター: 空白のバナーから開始し、ブロックと行を使用して視覚的に構築します。
- HTMLエディター: 空白のバナーから開始し、HTMLで直接作業します。
- テンプレート: テンプレートライブラリを開き、Brazeテンプレートまたはあなたのテンプレートからデザインを選択します。テンプレートはドラッグ＆ドロップエディターで開き、カスタマイズできます。
ステップ3.1: バナーのスタイルを設定する
ブロックと行をキャンバスエリアにドラッグ＆ドロップして、メッセージの作成を開始できます。バナーエディターのブロックと共有プロパティの詳細へのリンクについては、エディターブロック（バナー）を参照してください。
メッセージの背景プロパティ、ボーダー設定などをカスタマイズするには、Stylesを選択します。特定のブロックまたは行のスタイルのみをカスタマイズしたい場合は、それを選択して変更を加えます。
HTMLエディターは、独自のHTMLテンプレートをすでに管理しているチームや、マークアップとスタイリングを完全にコントロールしたいチームに最適です。カスタムHTMLをエディターに直接記述または貼り付けることができます。Liquidパーソナライゼーションタグは完全にサポートされているため、ユーザー属性、カスタム属性、カタログアイテムなどを参照できます。
バナーHTMLの作成にサポートが必要ですか？HTMLエディターでAsk Operatorを選択し、作成したいバナーを説明してください。BrazeAITM OperatorがHTMLを生成し、確認してエディターに挿入できます。詳細については、メッセージを生成するを参照してください。
カスタムHTMLでのクリックおよび非表示のトラッキングには、JavaScriptブリッジメソッドを明示的に呼び出す必要があります。完全なリファレンスについては、バナーのカスタムコードとJavaScriptブリッジを参照してください。
ステップ3.2: クリック時の動作を定義する（オプション）
ユーザーがバナー内のリンクをクリックした際に、アプリ内のより深い場所に移動させるか、別のWebページにリダイレクトさせるかを選択できます。さらに、カスタム属性またはイベントを記録することを選択でき、ユーザーがバナーをクリックした際にカスタムデータでユーザーのプロファイルを更新します。より詳細なクリックトラッキングのために、プロパティパネルのIdentifier for Reportingフィールドを使用して、各インタラクティブ要素にカスタム識別子を割り当てます。
特定の要素（バナーのボタン、リンク、画像など）に独自のクリック時の動作がある場合、クリック時の動作はオーバーライドされることがあります。たとえば、以下のクリック時の動作がある場合：
- バナーにはWebサイトのホームページにリダイレクトするクリック時の動作があります。
- バナー内の画像にはWebサイトの製品ページにリダイレクトするクリック時の動作があります。
HTMLエディターでは、クリックトラッキングは自動ではありません。トラッキングしたい各クリック可能な要素に対して、HTML内からbrazeBridge.logClick()を呼び出す必要があります。例：
1
<a href="https://example.com" onclick="brazeBridge.logClick()">Shop now</a>
完全なJavaScriptブリッジリファレンスについては、バナーのカスタムコードとJavaScriptブリッジを参照してください。
ステップ3.3: 非表示の動作を設定する（オプション）
Dismiss behaviorセクションのBanner can be dismissedチェックボックスを選択すると、ユーザーがバナーを非表示にできるようになります。このオプションは、幅広いオーディエンスに期間限定のオファーを宣伝したいが、興味のないユーザーにはメッセージを非表示にできるようにしたい場合に便利です。
非表示が有効になっている場合、Dismiss behaviorセクションで非表示ボタンをカスタマイズできます。
| 設定 | 説明 |
|---|---|
| ボタンサイズ | バナーに表示される非表示ボタンのサイズです。 |
| ボタンの色 | 非表示ボタンの色です。 |
| 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エディターの両方で同じように機能します。カスタムプロパティを追加するには、設定 > Properties > Add propertyを選択します。
追加したいプロパティごとに、以下の項目を入力します。
| フィールド | 説明 | 例 |
|---|---|---|
| プロパティタイプ | プロパティのデータタイプです。サポートされるタイプには、文字列、ブール値、数値、タイムスタンプ、画像URL、JSONオブジェクトがあります。 | 文字列 |
| プロパティキー | プロパティの一意の識別子です。このキーはSDKでプロパティにアクセスするために使用されます。 | color |
| 値 | プロパティに割り当てられた値です。選択したプロパティタイプと一致する必要があります。 | #FF0000 |
完了したら、Doneを選択します。
ステップ4: キャンペーンまたはキャンバスの残りの部分を構築する
バナーの優先度を設定する（オプション）
バナーの優先度は、同じプレースメントを共有するバナーの表示順序を決定します。優先度を手動で設定するには：
- Set exact priorityを選択します。
- キャンペーンをドラッグ＆ドロップして正しい優先度に並べ替えます。
- Apply Sortを選択します。
同じプレースメントIDを使用する複数のバナーキャンペーンがある場合は、ドラッグ＆ドロップの優先度ソーターを使用して正確な優先度を定義することをお勧めします。
再適格性を設定する（オプション）
デフォルトでは、バナーを非表示にしたユーザーはそのキャンペーンに再適格になることはありません。非表示にしたユーザーにバナーを再度表示させるには、配信コントロールステップに移動し、ユーザーがキャンペーンを再度受信できるようにするを選択します。有効にした場合、分、時間、日、または週単位でクールダウン期間を設定します。
カウントダウンは、ユーザーがバナーを非表示にした時点から開始されます。期間が経過すると、ユーザーは自動的に再適格になります。キャンペーンの再起動は不要です。再適格性はユーザーごと、キャンペーンごとに追跡されます。
オーディエンスを選択する
- ターゲットオーディエンスで、セグメントまたはフィルターを選択してオーディエンスを絞り込みます。おおよそのセグメント人口のプレビューが自動的に表示されます。正確なセグメントメンバーシップは、メッセージが送信される前に計算されます。
メッセージは、ターゲットオーディエンスステップで設定した条件にすでに合致しているユーザーにのみ送信されます。その後も、スケジュール配信ステップで定義したトリガーを満たす必要があります。ターゲットオーディエンスは待合室のようなものです。次のアクションが発生したときに進むことができるのは、すでに中にいるユーザーだけです。
- コンバージョンの割り当てで、コンバージョンイベントを定義して、キャンペーンを受信した後にユーザーが特定のアクションを実行する頻度を追跡します。アクションをコンバージョンとしてカウントするための最大30日間の時間枠を設定できます。
コンバージョンイベントを選択する
Brazeでは、キャンペーンを受信した後にユーザーが特定のアクションを実行する頻度であるコンバージョンイベントを追跡できます。ユーザーが指定されたアクションを実行した場合にコンバージョンとしてカウントされる最大30日間の時間枠を設定するオプションがあります。
まだ完了していない場合は、キャンバスコンポーネントの残りのセクションを完了してください。キャンバスの残りの部分の構築方法、多変量テストやインテリジェントセレクションの実装などの詳細については、キャンバスドキュメントのキャンバスを構築するステップを参照してください。
キャンバスのバナーステップの再適格性を制御するには、キャンバスの再エントリ設定を使用します。詳細については、キャンペーンとキャンバスの再適格性を参照してください。
ステップ5: メッセージをテストする（オプション）
プレビューを選択して、バナーをプレビューするか、テストメッセージを送信します。
ハードウェアの違いにより、プレビューはユーザーのデバイスでの最終的なレンダリングと同一ではない場合があることにご注意ください。
テストメッセージを送信するには、テスト受信者としてコンテンツテストグループまたは1人以上の個別ユーザーを追加し、テスト送信を選択します。テストメッセージはデバイス上で最大5分間表示できます。次にプレビューリンクをコピーを選択すると、ランダムなユーザーに対してバナーがどのように表示されるかを確認できる共有可能なプレビューリンクが生成され、コピーされます。リンクは7日間有効で、それ以降は再生成が必要です。
テストバナーを確認する際は、以下の点を検証してください。
- バナーキャンペーンはプレースメントに割り当てられていますか？
- 画像やメディアは、ターゲットのデバイスタイプや画面サイズで期待どおりに表示され、動作しますか？
- リンクやボタンは、ユーザーを正しい場所に誘導していますか？
- Liquidは期待どおりに機能していますか？Liquidが情報を返さない場合に備えて、デフォルトの属性値を設定していますか？
- コピーは明確で簡潔かつ正確ですか？
詳細については、テストメッセージの送信を参照してください。
ステップ6: 確認してデプロイする
キャンペーンまたはキャンバスの構築が完了したら、詳細を確認し、テストを行い、準備ができたら送信します。