バナーを作成
Brazeでキャンペーンやキャンバスを構築する際にバナーを作成する方法を説明します。一般的な情報については、バナーについてを参照してください。
前提条件
バナーを開始する前に、開発チームがアプリまたはWeb サイトでプレースメントを設定する必要があります。その間もバナーキャンペーンの下書きを作成できますが、プレースメントが設定されるまでキャンペーンを開始することはできません。
バナーメッセージを作成する
ステップ1：Brazeで配置を作成する
まだ作成していない場合は、アプリまたはサイトでバナーを表示できる場所を定義するために使用するバナーの配置をBrazeで作成する必要があります。配置を作成するには、設定 > バナーの配置に移動し、配置を作成を選択します。
配置に名前を付け、配置IDを割り当てます。IDはカードのライフサイクル全体で使用され、後から変更できないため、IDを割り当てる前に他のチームに相談してください。詳細については、配置IDを参照してください。
ステップ2:メッセージの作成場所を選択する
メッセージをキャンペーンとキャンバスのどちらで送信すべきか迷っていますか？キャンペーンは単一のターゲットを絞ったメッセージングキャンペーンに適しています。キャンバスは複数ステップのユーザージャーニーに適しています。
- メッセージング > キャンペーンに移動し、キャンペーンを作成を選択します。
- バナーを選択します。
- キャンペーンに、わかりやすく意味のある名前を付けます。
- 必要に応じてチームとタグを追加します。タグを使用すると、キャンペーンを見つけやすくなり、レポートも作成しやすくなります。たとえば、レポートビルダーを使用する際に、関連するタグでフィルターできます。
- 以前に作成したプレースメントを選択して、キャンペーンに関連付けます。
- 必要に応じてバリアントを追加します。バリアントごとに異なるメッセージタイプとレイアウトを選択できます。バリアントの詳細については、多変量テストと AB テストを参照してください。
- バナーキャンペーンの開始日時を選択します。デフォルトでは、バナーは無期限に表示されます。これを変更するには、終了時刻を選択し、終了日時を指定します。
キャンペーン内のすべてのメッセージが類似している場合や同じコンテンツを含む場合は、バリアントを追加する前にメッセージを作成してください。その後、バリアントを追加ドロップダウンからバリアントからコピーを選択できます。
ステップ3:バナーを作成する
次に、作成の開始方法を選択します。
- ドラッグ＆ドロップエディター: 空白のバナーから始め、ブロックと行を使って視覚的に作成します。
- HTML エディター: 空白のバナーから始め、HTML で直接作業します。
- テンプレート: テンプレートライブラリを開き、Braze テンプレートまたは自分のテンプレートからデザインを選択します。テンプレートはドラッグ＆ドロップエディターで開き、カスタマイズできます。
ステップ3.1:バナーのスタイルを設定する
ブロックと行をキャンバスエリアにドラッグ＆ドロップして、メッセージの作成を開始できます。バナーエディターのブロックの一覧と共有プロパティの詳細へのリンクについては、エディターブロック (バナー)を参照してください。
メッセージのバックグラウンドプロパティや枠線の設定などをカスタマイズするには、スタイルを選択します。特定のブロックまたは行のスタイルのみをカスタマイズする場合は、そのブロックまたは行を選択して変更します。
HTML エディターは、独自の HTML テンプレートをすでに管理しているチームや、マークアップとスタイルを完全に制御したいチームに最適です。カスタム HTML をエディターに直接記述または貼り付けることができます。Liquid のパーソナライゼーションタグが完全にサポートされているため、ユーザー属性、カスタム属性、カタログアイテムなどを参照できます。
バナーの HTML の作成にサポートが必要ですか？HTML エディターで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 ラベル | スクリーンリーダーで使用される、閉じるボタンのアクセシブルなラベル。空白のままにすると、デフォルトで「Close」になります。 |
ユーザーがバナーを閉じると、そのユーザーがキャンペーンのターゲティング条件を引き続き満たしている場合でも、そのバナーは再び表示されません。
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:キャンペーンまたはキャンバスの残りの部分を作成する
バナーの優先度を設定する (オプション)
バナーの優先度は、同じプレースメントを共有する場合にバナーが表示される順序を決定します。優先度を手動で設定するには、次の手順を実行します。
- 正確な優先度を設定を選択します。
- キャンペーンをドラッグ＆ドロップして、正しい優先度の順に並べます。
- 並べ替えを適用を選択します。
同じプレースメント ID を使用するバナーキャンペーンが複数ある場合は、ドラッグ＆ドロップの優先度ソーターを使用して正確な優先度を定義することをお勧めします。
再適格性を設定する (オプション)
デフォルトでは、バナーを閉じたユーザーがそのキャンペーンに再び適格になることはありません。バナーを閉じたユーザーにもう一度バナーを表示するには、配信制御ステップに移動し、ユーザーがキャンペーンを再度受信できるようにするを選択します。有効にしたら、クールダウン期間を分、時間、日、または週単位で設定します。
カウントダウンは、ユーザーがバナーを閉じた時点から開始されます。期間が終了すると、ユーザーは自動的に再び適格になります。キャンペーンを再開する必要はありません。再適格性は、ユーザーごと、キャンペーンごとにトラッキングされます。
オーディエンスを選択する
- ターゲットオーディエンスで、セグメントまたはフィルターを選択してオーディエンスを絞り込みます。おおよそのセグメント人数のプレビューが自動的に表示されます。正確なセグメントのメンバーシップは、メッセージが送信される前に計算されます。
メッセージは、ターゲットオーディエンスステップで設定した条件にすでに合致しているユーザーにのみ送信されます。その後も、スケジュール配信ステップで定義したトリガーを満たす必要があります。ターゲットオーディエンスは待合室のようなものです。次のアクションが発生したときに進むことができるのは、すでに中にいるユーザーだけです。
- コンバージョンを割り当てるで、最大30日間の期間を指定してコンバージョンイベントを定義し、キャンペーンを受信した後にユーザーが特定のアクションを実行する頻度をトラッキングします。この期間内に行われたアクションがコンバージョンとしてカウントされます。
コンバージョンイベントを選択する
Braze では、キャンペーンを受信した後にユーザーが特定のアクションを実行する頻度であるコンバージョンイベントをトラッキングできます。ユーザーが指定したアクションを実行した場合にコンバージョンとしてカウントする期間を、最大30日間まで設定できます。
まだ完了していない場合は、キャンバスコンポーネントの残りのセクションを完了してください。多変量テストやBrazeAITM による最適化など、キャンバスの残りの部分の作成について詳しくは、キャンバスを構築するを参照してください。
キャンバスのバナーステップの再適格性を制御するには、キャンバスの再エントリー設定を使用します。詳細については、キャンペーンとキャンバスの再適格性を参照してください。
ステップ5:メッセージをテストする (オプション)
プレビューを選択して、バナーをプレビューするか、テストメッセージを送信します。
ハードウェアの違いにより、プレビューはユーザーのデバイスでの最終的なレンダリングと同一ではない場合があることにご注意ください。
テストメッセージを送信するには、テスト受信者としてコンテンツテストグループまたは1人以上の個別ユーザーを追加し、テスト送信を選択します。テストメッセージはデバイス上で最大5分間表示できます。次にプレビューリンクをコピーを選択すると、ランダムなユーザーに対してバナーがどのように表示されるかを確認できる共有可能なプレビューリンクが生成され、コピーされます。リンクは7日間有効で、それ以降は再生成が必要です。
テストバナーを確認する際は、以下の点を検証してください。
- バナーキャンペーンはプレースメントに割り当てられていますか？
- 画像やメディアは、ターゲットのデバイスタイプや画面サイズで期待どおりに表示され、動作しますか？
- リンクやボタンは、ユーザーを正しい場所に誘導していますか？
- Liquidは期待どおりに機能していますか？Liquidが情報を返さない場合に備えて、デフォルトの属性値を設定していますか？
- コピーは明確で簡潔かつ正確ですか？
詳細については、テストメッセージの送信を参照してください。
ステップ6:確認してデプロイする
キャンペーンまたはキャンバスの作成が完了したら、詳細を確認し、テストを行ってから、準備ができたら送信します。