バナーのWeb ターゲティング
Web ターゲティングを使用すると、コードを変更せずに、Web サイト上でバナーを表示する位置を Braze で直接選択できます。CSS セレクターでページ上の位置をプレースメントに指定すると、Braze Web SDKがその位置にバナーを自動的に挿入します。
Web Targeting for Bannersは現在早期アクセス中です。早期アクセスへの参加にご興味がある場合は、Braze account マネージャーまでお問い合わせください。
前提条件
Web ターゲティングを使用する前に、次の初期設定を完了してください。
- Web サイトに Braze Web SDKがインストールされ、初期化されている必要があります。
- 開発者が SDKで自動挿入をオプトインする必要があります。技術的な手順については、開発者ガイドの Web ターゲティング: バナーの自動挿入を参照してください。
この設定が完了すると、プレースメントのターゲティングを変更するたびに開発者の追加作業を必要とせず、ダッシュボードだけで Web ターゲティングを使用してプレースメントを更新できます。
Web ターゲティングとは
通常、Web サイトにバナーを表示するには、開発者がページ上の特定の位置にバナーの HTML を配置するコードを記述する必要があります。Web ターゲティングを使用すると、このステップが不要になります。Web サイト上でバナーを表示する位置をハードコーディングする代わりに、CSS セレクターを使用して対象の位置を指定します。CSS セレクターとは、#homepage-hero や .promo-banner-slot のような短いテキストで、CSS を使用してページ上の HTML 要素を識別するものです。Google Chrome の「検証」などの Web 開発者ツールを使用して、ターゲットにしたい要素の CSS を確認できます。Braze オペレーターを使用して適切なセレクターを生成することもできます。
プレースメントの Web ターゲティングを設定する
Web ターゲティングは、設定 > バナーのプレースメントでプレースメントに対して設定します。まだプレースメントを作成していない場合は、まずプレースメント IDを参照してください。
- 設定 > バナーのプレースメントに移動し、編集する既存のプレースメントを選択するか、プレースメントを作成を選択して新しいプレースメントを作成します。
- プレースメントフォームの Web プレースメントターゲティングセクションまでスクロールします。
- CSS セレクターに、バナーを表示するページ上の要素の CSS セレクターを入力します (例:
#homepage-heroまたは.promo-banner-slot)。 - 挿入方法で、その要素に対してバナーを配置する位置を選択します。
| オプション | 結果 |
|---|---|
| 前に挿入 | バナーは対象要素の直前に表示されます。 |
| 後に挿入 | バナーは対象要素の直後に表示されます。 |
| 内側に追加 | Braze はバナーを対象要素内の最後の項目として追加します。 |
- (オプション) バナーを特定のページに限定するには、URL ターゲティングを入力します。
- 一致タイプ: 現在のページの URL が、入力した値を含むか、値と等しいか、値に対して正規表現 (regex) に一致する必要があるかを選択します。
- URL: 一致させるページの URL (または URL パターン) です。両方のフィールドを空白のままにすると、CSS セレクターが見つかったすべてのページにバナーが表示されます。
- 保存を選択します。
CSS セレクターフィールドは、開発者がサイトの他の場所で使用している有効な CSS セレクター (ID (#element-id)、クラス (.element-class)、またはより具体的な組み合わせ) であれば何でも使用できます。何を入力すればよいかわからない場合は、ターゲットにしたい位置にどのセレクターを使用すればよいかを Braze オペレーターまたは開発チームに確認してください。
制限事項
- Web ターゲティングは Web SDKでのみ利用できます。モバイルのプレースメントには適用されません。
- 内側に追加は、一部の HTML 要素 (画像やフォーム要素など) ではサポートされていません。このオプションを選択してもバナーが表示されない場合は、前に挿入または後に挿入を試すか、開発チームに対象要素を確認してください。
次のステップ
- バナーを作成する — このプレースメントにコンテンツを配信するキャンペーンまたはキャンバスステップを作成します。
- バナーについて — バナーの一般的な概念、プレースメント ID、および優先度について説明します。
- Web ターゲティング: バナーの自動挿入 — この機能をサイトで動作させるために必要な、開発者向けの設定です。