Engage Studio — Web Message Previewerは、マーケターが実際のWebサイト上で直接操作して以下を行うためのオーサリング補助ツールです。
- ターゲット要素の選択 — ページ上の任意の要素をクリックして、Inlineキャンペーン用の安定したCSSセレクター（Zone ID）を自動生成します。
- キャンペーンコンテンツのプレビュー — 差し替え用HTMLが実際のページ上でどのようにレンダリングされるか、公開前に確認します。
Chrome Extensionはオーサリング用のツールであり、キャンペーンの配信アーキテクチャには含まれません。キャンペーンはTD Web SDKを通じてエンドユーザーへ配信されており、SDKはExtensionとは独立して動作します。Extensionをインストールできないマーケターも、ブラウザのDevToolsを使用してCSSセレクターを手動入力することでキャンペーンを作成・配信できます。
- Google Chrome（バージョン114以降）
- Treasure AIアカウントでEngage Studioへのアクセス権
- ターゲットWebサイトがブラウザからアクセス可能であること（ExtensionはHTTP/HTTPSページであれば、すでにログイン済みの認証ページを含むすべてのページで動作します）
Extension は Chrome ウェブストア で公開されています。Chrome ウェブストアで「Engage Studio — Web Message Previewer」（Treasure AI）を検索するか、Chrome ウェブストアのページに直接アクセスして、インストールしてください。
- Chrome Web Storeで Engage Studio — Web Message Previewer のページを開きます。
- Chromeに追加をクリックし、ダイアログで拡張機能を追加を確認してクリックします。
- 拡張機能一覧に Engage Studio — Web Message Previewer がTreasure AIアイコンとともに表示されます。
Chromeツールバーのパズルピースアイコン（拡張機能）をクリックして、Engage Studio Extensionをピン留めすると素早くアクセスできます。
- In-Browser Messageを設定またはプレビューしたいWebサイトのページに移動します。
- Chromeツールバーのアイコン（Treasure AI）をクリックします。
- ブラウザウィンドウの右側にサイドパネルが開きます。
ExtensionはChromeのシステムページ（chrome://…）、Chrome Web Store、ブラウザ拡張機能のページでは動作しません。通常のHTTP/HTTPSのWebサイトに移動してから使用してください。
サイドパネルには2つのタブがあります。
- 1 Select — ページ上のDOM要素を選択し、差し替えるHTMLを編集します。
- 2 Preview — 差し替え用HTMLをページに注入し、Original（元の表示）とModified（差し替え後の表示）を比較します。
Selectタブで、差し替えたいDOM要素を選択してCSSセレクターを生成します。
- サイドパネルで Select Element をクリックしてセレクターモードに入ります。
- ページ上でカーソルを移動します。要素が青いボーダーでハイライトされ、生成されたCSSセレクターがツールチップで表示されます。
- ターゲットにしたい要素をクリックします。サイドパネルに以下が入力されます。
- CSS Selector — 自動生成されたセレクター（例：
div[data-src="drDpRe"] > div:nth-of-type(2) > div）。フィールド下部にページ上でのマッチ数が表示されます。 - Replacement HTML — 注入するHTMLコンテンツを入力する編集可能フィールド。
- CSS Selector — 自動生成されたセレクター（例：
- Replacement HTML を必要に応じて編集します。
- CSS Selector および Replacement HTML フィールドの横にあるコピーボタンを使って各値をコピーし、Engage StudioのIn-Browser Messageエディターに貼り付けます。
別の要素を選び直すには Reselect Element をクリックします。
要素を選択せずにキャンセルするには Escape キーを押します。
Extensionはターゲット要素とその親要素を分析して、安定したCSSセレクター（ページ更新後も壊れにくいセレクター）を生成します。生成の優先順位は以下のとおりです。
id属性 — 自動生成またはUUID的な値でない場合（例：#product-banner-area）data-*テスト属性 —data-testid、data-qa、data-cyなど- 安定した
data-*属性 — ハッシュやセッショントークンに見えない値を持つその他のdata-*属性 - クラス名 — 動的に生成されたクラス名（CSS-in-JS、ハッシュサフィックス）を除外してフィルタリング
- 構造的パス — 最も近い安定した祖先要素からの
tag > tag:nth-of-type(n)パス
ページがCSS-in-JSライブラリ（styled-components、Emotionなど）を使用している場合、自動生成されたクラス名は自動的に除外されます。このような場合、より正確なセレクターを得るために、ターゲット要素に安定したdata-testidまたはid属性を追加してください。
Previewタブで、差し替え用HTMLを実際のページに注入してレンダリングを確認します。
- サイドパネルで Preview タブに切り替えます。
- Preview Mode Active（緑のバナー）が表示されると、差し替え用HTMLがページに注入されています。
- Compare Versions トグルで以下を切り替えて確認します。
- Original — 通常のページ表示。
- Modified — 差し替え用HTMLが注入されたページ表示。
- ページ上でレンダリング結果を確認します。
- 注入したコンテンツを削除するには、ページを再読み込み（
Cmd/Ctrl + R）するか、ページを離れます。
Extensionはあなたのブラウザセッション内にのみコンテンツを注入します。実際のWebサイトやEngage Studioのキャンペーン設定には一切変更は加えられません。エンドユーザーへの影響もありません。
| 問題 | 対処法 |
|---|---|
| サイドパネルに「このページでは拡張機能を使用できません」と表示される | 通常のHTTP/HTTPSのWebサイトに移動してください。chrome://、chrome-extension://、view-source:、devtools://、Chrome Web Storeのページでは動作しません。 |
| アイコンをクリックしてもサイドパネルが開かない | chrome://extensions でExtensionが有効になっているか確認してください。一度無効にしてから再度有効化し、ページを再読み込みしてみてください。 |
| サイドパネルに「The previewer has not been loaded on this page. Reload the page (Cmd/Ctrl+R) and try again.」というエラーが表示される | コンテンツスクリプトが現在のタブで読み込まれていない可能性があります。Cmd/Ctrl + Rでページを再読み込みしてからサイドパネルを再度開いてください。 |
| 要素セレクターが何もハイライトしない | ページがShadow DOMやクロスオリジンのiframeを使用している可能性があります。この場合は、シャドウルートの外側にあるラッパーコンテナ要素を選択してください。 |
| CSSセレクターが複数の要素にマッチする（マッチ数 > 1） | その要素に安定したidまたはdata-*属性がありません。より正確なセレクターを得るために、開発者にターゲット要素へdata-testid属性を追加するよう依頼してください。 |
| プレビューコンテンツが注入直後に消える | ページ上のJavaScriptフレームワークがDOMを再レンダリングしている可能性があります。フレームワークが管理していないコンテナ要素を選択するか、開発者に安定した挿入ポイントの追加を依頼してください。 |
- ブラウザウィンドウあたりアクティブなサイドパネルは1つのみサポートされています。
- ExtensionはChromeのSide Panel API（Chrome 114以降）を使用しています。古いChromiumベースのブラウザでは動作しない場合があります。
- デバイス管理（MDM）ポリシーによって拡張機能のインストールが制限されている組織では、ブラウザのDevToolsを使用したCSSセレクターの手動入力を代替手段として使用してください。