このページはAIにより自動翻訳されており、不正確な内容が含まれている可能性があります。翻訳の誤りを報告するには、ページ右側の目次の下にあるフィードバックをご利用ください。

Webターゲティングでバナーを自動挿入する

Web プレースメントでは、オプションでプレースメント設定にWebターゲティングを構成し、ページ上のバナーの表示位置を指定できます。Webターゲティングを構成すると、Braze Web SDKは insertBanner() を明示的に呼び出さなくても、指定した位置にバナーを自動的に挿入します。詳しくは、バナーのWebターゲティングを参照してください。バナーとバナープレースメントの背景情報については、バナーについておよびプレースメントの管理を参照してください。

重要

Web Targeting for Bannersは現在早期アクセス中です。早期アクセスへの参加にご興味がある場合は、Braze account マネージャーまでお問い合わせください。

前提条件

Webターゲティングによる挿入はページに HTML を追加するため、insertBanner と同じオプトインが必要です。

braze.initialize("YOUR-API-KEY", {
  baseUrl: "YOUR-ENDPOINT",
  allowUserSuppliedJavascript: true, // required for Web Targeting auto-insert
});

allowUserSuppliedJavascript: true を指定しない場合、自動挿入は何も実行されず、SDKはエラーをログに記録します。

Webターゲティングによる挿入をトリガーする

insertWebTargetingBanners() メソッドを呼び出すと、各バナーのWebターゲティング情報 (存在する場合) を使用して、ページ上でそのバナーを配置する予定の場所を探し、そこに自動的に挿入しようとします。このメソッドは、SDKの初期化直後と、Web SDKを通じて実行されたバナー同期が完了するたびに呼び出してください。

Webターゲティング情報を持つバナーについて、Web SDKがターゲットの挿入位置を見つけられなかった場合、挿入を継続的に再試行します。これにより、Webターゲティングでは最初のページ読み込み後に表示されるページ部分もターゲットにできます。この再試行動作は、SDKの初期化時に initialize() メソッドの enableWebTargetingBannerRetryLoop パラメーターを使用して無効にできます。

braze.initialize("YOUR-API-KEY", {
  baseUrl: "YOUR-ENDPOINT",
  allowUserSuppliedJavascript: true,
  enableWebTargetingBannerRetryLoop: false, // don't retry if the target isn't in the DOM yet
});

必要に応じて、SDKの初期化後に automaticallyInsertWebTargetingBanners() を呼び出すこともできます。このメソッドを呼び出すと購読が設定され、Web SDKがバナーの同期を完了するたびに、その時点で存在するバナーに対してWebターゲティングによる挿入が直ちに実行されます。これにより insertWebTargetingBanners() を呼び出す必要がなくなりますが、Webターゲティングによる挿入のタイミングをより細かく制御したい場合は、そのメソッドだけを使い続けることもできます。このメソッド自体は、呼び出し時にバナーを挿入しません。

シングルページアプリ (SPA)

Web サイトがシングルページアプリ (SPA) アーキテクチャや類似のシステム (React Router や Vue など) を使用してページのルーティングやナビゲーションを処理している場合、または Web サイトが挿入済みのバナーを手動で削除する場合は、以下の点に注意してください。

Webターゲティングで DOM に挿入されたバナーが、ルーティング時の再レンダリングによって後から削除された場合、Web SDKは新しいページでそのバナーを自動的に再挿入しようとはしません。同様に、再レンダリング後もバナーが残っていても、そのバナーの URL スコープが前のルートである場合、Web SDKは DOM からそのバナーを自動的に削除しません。
クライアント側のルートがレンダリングされるたびに insertWebTargetingBanners() を呼び出し、SDKが管理するさまざまな状態管理ロジックをすべて実行させてください。このメソッドは状態が変更されたバナーのみを再挿入するため、ナビゲーションのたびに呼び出しても問題ありません。

トラブルシューティング

バナーが自動挿入されない一般的な原因は、SDKのロガー (enableLogging: true) を通じてログに記録されます。

症状	考えられる原因
どこにも何も挿入されず、SDKが “`allowUserSuppliedJavascript` is required” とログに記録する	`allowUserSuppliedJavascript: true` を指定せずに `initialize()` が呼び出されています。
SDKが “target element not found for selector” とログに記録する	CSS セレクターがまだどの要素にも一致していません。要素が後からレンダリングされる場合は、再試行ループによって自動的に解決されます。そうでない場合は、プレースメントに設定されたセレクターを再確認してください。
SDKが要素に “cannot insert inside” とログに記録する	バナーのWebターゲティング情報が、`video` や `img` などのサポートされていない要素の内部にバナーを挿入しようとしています。バナーのWebターゲティングを参照してください。
バナーは一度挿入されるが、ルート変更時に更新されない	SPA に関する考慮事項を参照し、クライアント側のルートがレンダリングされるたびに `insertWebTargetingBanners()` を呼び出してください。
フレームワークの再レンダリング後にバナーが消える	SPA に関する考慮事項を参照してください。

次のステップ

バナーのWebターゲティング — 社内のユーザーがダッシュボードでプレースメントの CSS セレクター、挿入位置、URL ターゲティングを設定する方法。
プレースメントの管理 — プレースメントの作成と更新、および insertBanner を使用したバナーの手動表示。
バナー:よくある質問

ヒント

Webターゲティングの今後の優先事項の決定にご協力いただけますか？[email protected] までお問い合わせください。

New Stuff!