Skip to content

バナーを作成

Brazeでキャンペーンやキャンバスを構築する際にバナーを作成する方法を説明します。一般的な情報については、バナーについてを参照してください。

前提条件

バナーを公開する前に、開発チームがアプリまたはWebサイトにプレースメントを設定する必要があります。その間にバナーキャンペーンの下書きを作成することはできますが、プレースメントが設定されるまでキャンペーンを公開することはできません。

バナーメッセージの作成

ステップ 1: Braze での配置の作成

まだ作成していない場合は、アプリまたはサイトでバナーを表示できる場所を定義するために使用するバナーの配置をBrazeで作成する必要があります。配置を作成するには、Settings > Banners Placementsに移動し、配置の作成を選択します。

配置ID を作成するためのバナー配置セクション。

配置に名前を付け、配置ID を割り当てます。ID はカードのライフサイクル全体で使用されるため、後で変更しないでください。ID を割り当てる前に、他のチームに相談してください。詳細については、配置IDを参照してください。

バナーを指定する配置の詳細は、バネ販売促進キャンペーンsの左側のサイドバーに表示されます。

ステップ2:メッセージの作成場所を選択する

メッセージをキャンペーンで送信するか、キャンバスで送信するかお悩みですか？キャンペーンは単一のターゲットメッセージングに適しており、キャンバスは複数ステップのユーザージャーニーに適しています。

  1. メッセージング > キャンペーン に移動し、キャンペーンを作成 を選択します。
  2. バナー を選択します。
  3. キャンペーンに明確でわかりやすい名前を付けます。
  4. 必要に応じてチームとタグを追加します。タグを使うとキャンペーンの検索やレポート作成が容易になります。たとえば、レポートビルダーを使用する際に関連するタグでフィルターできます。
  5. 事前に作成したプレースメントを選択して、キャンペーンに関連付けます。
  6. 必要に応じてバリアントを追加します。各バリアントに異なるメッセージタイプとレイアウトを選択できます。バリアントの詳細については、多変量テストとABテストを参照してください。
  7. バナーキャンペーンの開始日時を選択します。デフォルトでは、バナーは無期限に継続します。終了時間 を選択して終了日時を指定することで変更できます。
  1. キャンバスコンポーザーを使用してキャンバスを作成します。
  2. キャンバスの設定が完了したら、キャンバスビルダーでメッセージステップを追加します。ステップに明確でわかりやすい名前を付けます。
  3. メッセージングチャネルとして バナー を選択します。
  4. バナーのプレースメントを選択します。
  5. 優先度を設定します。バナーの優先度は、同じプレースメントを共有するバナーの表示順序を決定します。
  6. バナーの有効期限を設定します。ステップが利用可能になってからの期間、または特定の日時で設定できます。最大有効期限はステップがユーザーに利用可能になってから31日間です。

ステップ3:バナーを作成する

次に、作成方法を選択します。

  • ドラッグ＆ドロップエディター: 空白のバナーから始めて、ブロックと行を使ってビジュアルに構築します。
  • HTMLエディター: 空白のバナーから始めて、HTMLで直接作業します。
  • テンプレート: テンプレートライブラリを開き、Brazeテンプレート または マイテンプレート からデザインを選択します。テンプレートはドラッグ＆ドロップエディターで開かれ、カスタマイズできます。

バナーのドラッグ＆ドロップエディター、HTMLエディター、またはテンプレートを選択するオプション。

ステップ3.1:バナーのスタイルを設定する

ブロックと行をキャンバスエリアにドラッグ＆ドロップしてメッセージの構築を開始します。バナーエディターのブロックと共有プロパティの詳細についてのリファレンスは、エディターブロック（バナー）を参照してください。

メッセージの背景プロパティ、ボーダー設定などをカスタマイズするには、スタイル を選択します。特定のブロックまたは行のスタイルのみをカスタマイズしたい場合は、それを選択して変更を行います。

バナーコンポーザーのスタイルパネル。

デバイス別に行やブロックを非表示にする

デスクトップとタブレット・モバイルでレイアウトを調整するには、キャンバス上の行またはブロックを選択し、プロパティパネルの Hide on トグルを使用して、Desktop または Tablet and smaller devices で非表示にします。非表示にした行やブロックは、ドラッグ＆ドロップエディターでBannerをプレビューする場合でも、ライブBannerではでも、そのデバイスタイプには表示されません。

HTMLエディターは、すでに独自のHTMLテンプレートを管理しているチームや、マークアップとスタイリングを完全にコントロールしたいチームに最適です。カスタムHTMLを直接エディターに記述またはペーストできます。Liquidパーソナライゼーションタグは完全にサポートされているため、ユーザー属性、カスタム属性、カタログアイテムなどを参照できます。

カスタムHTMLでのクリックおよび閉じるアクションのトラッキングには、JavaScriptブリッジメソッドを明示的に呼び出す必要があります。完全なリファレンスについては、バナーのカスタムコードとJavaScriptブリッジを参照してください。

ステップ3.2:クリック時の動作を定義する（オプション）

ユーザーがバナー内のリンクをクリックすると、アプリ内のより深い階層に誘導したり、別のWebページにリダイレクトしたりすることを選択できます。さらに、カスタム属性またはイベントを記録することを選択でき、ユーザーがバナーをクリックした際にカスタムデータでユーザーのプロファイルを更新します。より詳細なクリックトラッキングを行うには、プロパティパネルの レポート用識別子 フィールドを使用して、各インタラクティブ要素にカスタム識別子を割り当てます。

HTMLエディターでは、クリックトラッキングは自動ではありません。トラッキングしたいクリック可能な要素ごとに、HTML内から brazeBridge.logClick() を呼び出す必要があります。例:

1

<a href="https://example.com" onclick="brazeBridge.logClick()">Shop now</a>

完全なJavaScriptブリッジリファレンスについては、バナーのカスタムコードとJavaScriptブリッジを参照してください。

ステップ3.3:閉じる動作を設定する（オプション）{#dismiss-behavior}

閉じる動作 セクションで バナーを閉じることができる チェックボックスを選択すると、ユーザーがバナーを閉じることを許可できます。これは、期間限定オファーを広いオーディエンスに宣伝しつつ、興味のないユーザーにはメッセージを非表示にさせたい場合に便利です。

閉じる機能がオンの場合、閉じる動作 セクションで閉じるボタンをカスタマイズできます。

設定 説明
ボタンサイズ バナーに表示される閉じるボタンのサイズ。
ボタンの色 閉じるボタンの色。
ARIAラベル 閉じるボタンのアクセシブルなラベルで、スクリーンリーダーが使用します。空白の場合、デフォルトは「Close」です。

ユーザーがバナーを閉じると、キャンペーンのターゲット条件に引き続き該当していても、そのユーザーにはバナーが再度表示されません。

HTMLエディターでは、閉じる動作はHTML内で brazeBridge.closeMessage() を使用して処理されます。閉じるアクションをクリックイベントとしてもトラッキングするには、brazeBridge.logClick() と組み合わせます。例:

1

<a href="#" onclick="brazeBridge.logClick(); brazeBridge.closeMessage();">&#x2715; Close</a>

この方法でユーザーがバナーを閉じると、キャンペーンのターゲット条件に引き続き該当していても、そのユーザーにはバナーが再度表示されません。

完全なJavaScriptブリッジリファレンスについては、バナーのカスタムコードとJavaScriptブリッジを参照してください。

ステップ3.4:カスタムプロパティを追加する（オプション）{#custom-properties}

バナーにカスタムプロパティを追加して、文字列やJSONオブジェクトなどの構造化メタデータを付与できます。これらのプロパティはバナーの表示には影響しませんが、Braze SDKを通じてアクセスしてアプリの動作や外観を変更できます。たとえば、以下のようなことが可能です。

  • サードパーティの分析やインテグレーションにメタデータを送信します。
  • timestampやJSONオブジェクトなどのメタデータを使用して、条件付きロジックをトリガーします。
  • ratioやformatなどの含まれるメタデータに基づいて、バナーの動作をコントロールします。

カスタムプロパティはドラッグ＆ドロップエディターとHTMLエディターの両方で同じように機能します。カスタムプロパティを追加するには、設定 > プロパティ > プロパティを追加 を選択します。

最初のカスタムプロパティをバナーキャンペーンに追加するオプションが表示されているプロパティページ。

追加したい各プロパティについて、以下を入力します。

フィールド 説明 例
プロパティタイプ プロパティのデータ型。サポートされる型には、文字列、ブール値、数値、タイムスタンプ、画像URL、JSONオブジェクトがあります。 文字列
プロパティキー プロパティの一意の識別子。このキーはSDKでプロパティにアクセスする際に使用されます。 color
値 プロパティに割り当てられた値。選択したプロパティタイプと一致する必要があります。 #FF0000

完了したら、完了 を選択します。

colorというキーと#FF0000という値を持つ文字列プロパティが表示されているプロパティページ。

ステップ3.5:Connected Contentでパーソナライズする（オプション）

バナーはセッションリフレッシュ時にインラインでレンダリングされるため、このチャネルのConnected Contentは他のチャネルとは異なる動作をします。

  • GETリクエストのみサポートされています。
  • 1回のリフレッシュ内のすべてのプレースメント（最大10）は、約2秒のレンダリング予算を共有します。呼び出しが遅い場合、タイムアウトした場合、または予算を超過した場合、そのプレースメントのConnected Contentの結果はnullとして扱われます。バナーはリトライしません。

最良の結果を得るために:

  • エンドポイントを高速に保ち、可能な限りレスポンスをキャッシュしてください。
  • 同時にレンダリングされるプレースメント全体で、一意のConnected Content URLの数を制限してください。
  • あるConnected Contentのレスポンスが次のURLを決定するような呼び出しのチェーンは避けてください。追加の呼び出しごとに共有予算が消費されます。
  • Liquidガードステートメントまたはdefaultフィルターを使用して、null結果を処理し、空のバナーを避けてください。

ステップ4:キャンペーンまたはキャンバスの残りの部分を構築する

バナーの優先度を設定する（オプション）

バナーの優先度は、同じプレースメントを共有するバナーの表示順序を決定します。優先度を手動で設定するには:

  1. 正確な優先度を設定 を選択します。
  2. キャンペーンをドラッグ＆ドロップして正しい優先順位に並べ替えます。
  3. ソートを適用 を選択します。

再適格性を設定する（オプション）{#re-eligibility}

デフォルトでは、バナーを閉じたユーザーはそのキャンペーンに対して再適格になりません。閉じたユーザーにバナーを再度表示させるには、配信制御 ステップに移動し、ユーザーがキャンペーンを再度受信できるようにする を選択します。有効にした場合は、分、時間、日、または週単位でクールダウン期間を設定します。

カウントダウンはユーザーがバナーを閉じた時点から開始されます。期間が終了すると、ユーザーは自動的に再適格になります。キャンペーンの再起動は不要です。再適格性はユーザーごと、キャンペーンごとにトラッキングされます。

オーディエンスを選択する

  1. ターゲットオーディエンス で、セグメントまたはフィルターを選択してオーディエンスを絞り込みます。おおよそのセグメント人数のプレビューが自動的に表示されます。正確なセグメントメンバーシップは、メッセージの送信前に計算されます。
  1. コンバージョンの割り当て で、コンバージョンイベントを定義して、ユーザーがキャンペーンを受信した後に特定のアクションを実行する頻度をトラッキングします。アクションをコンバージョンとしてカウントするために最大30日間の期間を設定できます。

コンバージョンイベントを選択する

Brazeでは、コンバージョンイベント、つまりユーザーがキャンペーンを受信した後に特定のアクションを実行する頻度をトラッキングできます。ユーザーが指定されたアクションを取った場合にコンバージョンとしてカウントする最大30日間の期間を設定するオプションがあります。

まだ完了していない場合は、キャンバスコンポーネントの残りのセクションを完成させてください。キャンバスの残りの部分の構築（多変量テストやBrazeAITMで最適化を含む）の詳細については、キャンバスを構築するを参照してください。

キャンバスのバナーステップの再適格性を制御するには、キャンバスの再エントリ設定を使用します。詳細については、キャンペーンとキャンバスの再適格性を参照してください。

ステップ5:メッセージをテストする（オプション）

プレビューを選択して、バナーをプレビューするか、テストメッセージを送信します。

バナー作成ツールのプレビュータブ。

ハードウェアの違いにより、プレビューはユーザーのデバイスでの最終的なレンダリングと同一ではない場合があることにご注意ください。

テストメッセージを送信するには、テスト受信者としてコンテンツテストグループまたは1人以上の個別ユーザーを追加し、テスト送信を選択します。テストメッセージはデバイス上で最大5分間表示できます。次にプレビューリンクをコピーを選択すると、ランダムなユーザーに対してバナーがどのように表示されるかを確認できる共有可能なプレビューリンクが生成され、コピーされます。リンクは7日間有効で、それ以降は再生成が必要です。

バナー作成ツールのプレビュータブ。

テストバナーを確認する際は、以下の点を検証してください。

  • バナーキャンペーンはプレースメントに割り当てられていますか？
  • 画像やメディアは、ターゲットのデバイスタイプや画面サイズで期待どおりに表示され、動作しますか？
  • リンクやボタンは、ユーザーを正しい場所に誘導していますか？
  • Liquidは期待どおりに機能していますか？Liquidが情報を返さない場合に備えて、デフォルトの属性値を設定していますか？
  • コピーは明確で簡潔かつ正確ですか？

詳細については、テストメッセージの送信を参照してください。

ステップ6:確認してデプロイする

キャンペーンまたはキャンバスの構築が完了したら、詳細を確認し、テストを行い、準備ができたら送信します。
New Stuff!