このガイドを使用して、In-Browser Messageキャンペーンの一般的な問題を診断・解決してください。
特定の問題を調査する前に、以下の項目を確認してください。
- ブラウザコンソールを確認 — DevToolsを開く（F12）→ Console。SDKの初期化エラーやネットワークリクエストの失敗がないか確認します。
- Personalization APIレスポンスを確認 — Networkタブで
p13n-apiエンドポイントへのリクエストを探します。レスポンスのoffersの下に期待するキャンペーンペイロードが含まれているか確認します。 - Engage Studioでキャンペーンのステータスを確認 — キャンペーンが Live（DraftやPaused、Finishedでないこと）であることを確認します。
| 考えられる原因 | 解決策 |
|---|
| キャンペーンがLiveでない | Engage Studioでキャンペーンのステータスを確認します。キャンペーンをLaunchまたはResumeしてください。 |
| ユーザーがEntry Criteriaを満たしていない | p13n APIレスポンスでoffersにセクションが存在するか確認します。存在しない場合、ユーザーはEntry Criteriaを満たしていません。Audience StudioでRT PersonalizationのEntry Criteriaを見直してください。 |
| SDKが初期化されていない | new TreasureSDK(...)がコンソールでエラーなく実行されること、およびpersonalizationオプション付きでtrackEventが呼び出されていることを確認します。 |
| WP13n-Tokenが誤っている | personalization.tokenに渡されているトークンが、Audience Studioの連携しているPersonalizationに表示されているトークンと一致するか確認します。 |
| 複数のポップアップが返され、意図しないものが表示されている | 複数のポップアップキャンペーンが返された場合、SDKは最も新しいcreated_atタイムスタンプを持つものだけを表示します。優先度を制御するには、最も最近作成されたキャンペーンを調整してください。 |
| ページがHTTPで提供されている | RT Personalization 2.0にはHTTPSが必要です。ページをHTTPSに切り替えてください。 |
ポップアップが表示されるがデザインが崩れている・スタイルが適用されていない
| 考えられる原因 | 解決策 |
|---|
| CSSがページのスタイルと競合している | SDKはスタイルを分離するためにShadow DOM内でポップアップをレンダリングします。BeefreeのHTMLブロックからカスタムCSSを注入している場合、グローバルなページスタイルに依存していないか確認してください。 |
| BeefreeコンテンツがCSPでブロックされている外部フォントを使用している | ブラウザコンソールでCSP違反がないか確認します。必要なフォントCDNをサイトのContent-Security-Policyのfont-srcディレクティブに追加してください。 |
| 閉じるボタンが見えない | キャンペーンのアピアランス設定でcloseButton.enabledがtrueになっていること、および閉じるボタンの色がポップアップの背景に対して十分なコントラストを持っていることを確認します。 |
| 考えられる原因 | 解決策 |
|---|
| Zone IDがどの要素にも一致しない | DevTools → Consoleを開いてdocument.querySelector('YOUR_SELECTOR')を実行します。nullが返される場合、セレクターが無効かこのページに要素が存在しません。Zone IDを更新してください。 |
| SDK注入後に要素が読み込まれる | SPAや遅延読み込みのページでは、SDKが実行された時点でターゲット要素がDOMに存在しない場合があります。SDKはMutationObserverで遅延レンダリングを処理します。それでも失敗する場合は、trackEventの呼び出しをターゲット要素がレンダリングされた後に移動してください。 |
| Zone IDセレクターが複数の要素に一致する | document.querySelectorは最初の一致を使用します。複数の要素がセレクターに一致する場合、最初の要素のみが差し替えられます。正しい要素をターゲットにするには、より具体的なセレクター（IDまたはdata-testid）を使用してください。 |
| CSS-in-JSの動的クラス名 | ページがstyled-components、Emotion、またはCSS Modulesを使用している場合、自動生成されるクラス名はビルドごとに変わります。安定したidまたはdata-testid属性を使用してください。クラス名の変更後はZone IDを更新してください。 |
インラインコンテンツは表示されるがLiquid変数が解決されない
| 考えられる原因 | 解決策 |
|---|
| 変数名が正しくない | 変数構文が正確にリファレンスと一致しているか確認します（rt_profile.imported.<name>、rt_profile.single.<id>、rt_profile.lc.<id>.<col>など）。タイポがないか確認してください。 |
| 属性がPersonalizationペイロードに含まれていない | Audience Studioで、属性がPersonalizationセクションのペイロード設定に追加されていることを確認します。返すためには属性をペイロードに明示的に含める必要があります。 |
| バッチ属性がまだ計算されていない | バッチ属性はスケジュールに従って計算されます。ペアレントセグメントを最近設定した場合は、次のバッチ実行が完了するまで待ってください。 |
| 非サポートのLiquid構文を使用している | サポートされるLiquid構文を確認してください。非サポートの構文（フィルター、{% assign %}、{% unless %}）をサポートされている代替構文に置き換えてください。 |
Launch時にHTMLコンテンツが拒否される（バリデーションエラー）
| 考えられる原因 | 解決策 |
|---|
| コンテンツに禁止されたHTMLタグが含まれている | 許可されていないタグを削除または置換してください：<script>、<iframe>、<form>、<input>、<base>、<meta>、<link>、<svg>、<math>。セキュリティ制限のリファレンスを参照してください。 |
| HTMLにインラインイベントハンドラーが含まれている | HTMLからすべてのon*属性（onclick、onload、onerrorなど）を削除してください。 |
contenteditable属性が含まれている | HTMLからcontenteditableを削除してください。 |
最初のページ読み込みではメッセージが表示されるが、クライアントサイドのナビゲーション後に表示されない
| 考えられる原因 | 解決策 |
|---|
trackEventが最初のページ読み込みでのみ呼び出されている | クライアントサイドのルート変更ごとにtrackEvent('events', { event_name: 'page_view' })を再度呼び出してください。React Routerの場合は、ルート変更時に実行されるuseEffect内でSDKの呼び出しをトリガーしてください。 |
| フレームワークがInlineのZone要素を削除して再追加している | 再レンダリング時に、フレームワークによって差し替えHTMLが上書きされる場合があります。フレームワークが管理しない安定した挿入ポイントを使用するか、再レンダリング後にパーソナライズAPIを再度呼び出してください。 |
| 考えられる原因 | 解決策 |
|---|
| JavaScriptフレームワークがターゲット要素を再レンダリングする | フレームワークの仮想DOM調整によって注入されたコンテンツが上書きされます。フレームワークが管理しない要素でターゲットZoneをラップするか、安定したrefを追加して再レンダリングを防いでください。 |
useState / useEffectが注入後に再レンダリングをトリガーする | ターゲット要素に影響するすべての状態更新が完了した後にパーソナライズの呼び出しを実行するよう移動してください。 |
Web Message Previewer（Chrome Extension）
Chrome Extension固有の問題については、Web Message Previewerガイドのトラブルシューティングセクションを参照してください。