Visual Experience Composer で使用される要素セレクター
要素セレクターとは、1 つ以上の要素を指定できる CSS 式です。
CSS セレクターの基本的な情報については、Mozilla Developer Network(MDN)にあるセレクターについてのドキュメントを参照してください。
アカウント設定で、要素クラスを使用するか、または要素 ID を使用するかを設定できます。「Administration > Visual Experience Composer」をクリックして、優先 CSS セレクターを選択します。
CSS セレクターを使用するタイミングと一意の ID を使用するタイミングについて詳しくは、Visual Experience Composer のベストプラクティスと制限事項を参照してください。
Adobe Target が要素のセレクターを生成する方法
Target では、シンプルなアルゴリズムを使用してセレクターが作成されます。以下では、生成のロジックについて簡単に説明します。
-
id="container"
のように要素に ID がある場合、要素のセレクターは#container
になります。例:
<div class="wrapper"> <div id="container"> <!-- Selector is computed for this element --> <ul class="navigation"> <li class="item active"> Home </li> <li class="item"> Men </li> <li class="item"> Women </li> <li class="item"> Kids </li> </ul> </div> </div>
-
要素にクラス属性が含まれている場合、Target は要素に存在するすべてのクラスのうち、最初のクラスを利用します。
Target は、
<HTML>
要素または ID を持つ要素が見つかるまで親要素を分析します。要素に ID が含まれており、セレクターが子孫に対して計算されている場合、この要素の ID がセレクターに使用されます。次に例を示します。
<div class="wrapper"> <div id="container"> <!-- id is present here. It contributes to selector --> <ul class="navigation"> <li class="item active"> Home </li> <!-- Selector is computed for this element --> <li class="item"> Men </li> <li class="item"> Women </li> <li class="item"> Kids </li> </ul> </div> </div>
この例では、次のようになります。
セレクター:
#container
>ul.navigation:eq(0)
>li.item:eq(0)
(「>」は直接の子を示します。)eq
は、UL タグで、最初のクラスがnavigation
の要素のインデックスを示しています。したがって、index
は 0 になります。詳しくは、MDN のセレクターについての記事を参照してください。 -
要素にクラスが含まれていない場合、Target は要素の
tagName
を使用し、<HTML>
要素または ID を持つ要素が見つかるまで親要素を上にたどります。次に例を示します。
<div class="wrapper"> <div id="container"> <!-- id is present here. It contributes to selector --> <ul class="navigation"> <li> Home </li> <li> Men </li> <li class="active"> Women </li> <li> Kids </li><!-- Selector is computed for this element --> </ul> </div> </div>
セレクター:
#container
>ul.navigation(0)
>li:nth-of-type(4)
上記のプロセスでは、次の点に注意してください。
- DOM で要素を一意に指定できてさえいれば、任意の CSS セレクターを使用することができます。
- 上記の方法は、いくつかある方法のうち、Target が使用しているものです。必ずこの方法を使用しなければならないわけではありません。1 つ目のポイントが守られていれば、任意のセレクターを追加できます。
- セレクターでは、任意の属性を使用できます。このドキュメントでは、例としてクラス名のみを使用しています。
Target
- Adobe Target実務担当者ガイドホーム
- Target リリースノート
- はじめに
- Target の管理
- Target の実装
- Target と Experience Cloud の統合
- Adobe Target のレポートソースとしての Adobe Analytics(A4T)
- Target とAdobe Customer Journey Analytics の統合
- Target とAdobe Journey Optimizer(AJO) ールの統合
- Experience Cloud Audiences
- Target とAdobe Experience Manager(AEM) ールの統合
- Target とAdobe Audience Manager(AAM)の統合
- Real-time Customer Data Platform との統合
- Target と Adobe Campaign の統合
- アクティビティ
- アクティビティの概要
- Target のアクティビティタイプ
- A/B テスト
- 自動配分
- 自動ターゲット
- Automated Personalization
- Automated Personalization の概要
- ランダムフォレストアルゴリズム
- Automated Personalization アクティビティの作成
- Target のパーソナライゼーションアルゴリズムのデータのアップロードを参照してください
- Target パーソナライゼーションアルゴリズムのデータ収集
- 成功のために必要なトラフィックの見積もり
- Automated Personalization テスト用のエクスペリエンスのプレビュー
- Target の Automated Personalization オファー
- 除外の管理
- Automated Personalization のオファーレポートグループ
- Automated Personalization アクティビティまたは自動ターゲットアクティビティ用のコントロールの選択
- Automated Personalization に関する FAQ
- Automated Personalization のトラブルシューティング
- エクスペリエンスのターゲット設定
- 多変量分析テスト
- Recommendations アクティビティ
- アクティビティを編集またはドラフトとして保存
- 優先度
- アクティビティの設定
- 成功指標
- アクティビティの変更ログ
- アクティビティのトラブルシューティング
- アクティビティ QA
- オーディエンス
- エクスペリエンスとオファー
- エクスペリエンスとオファーの概要
- Visual Experience Composer(VEC)
- Visual Experience Composer の概要
- Visual Experience Composer のオプション
- Visual Experience Composer の変更点
- 類似のページに同じエクスペリエンスを組み込む
- 複数ページアクティビティ
- アクティビティの衝突
- 変更
- Visual Experience Composer で使用される要素セレクター
- レスポンシブエクスペリエンスのためのモバイルビューポート
- Visual Experience Composer のベストプラクティスと制限事項
- Visual Experience Composer のトラブルシューティング
- URL にリダイレクト
- Visual Experience Composer 内で動作するカルーセルの作成
- フォームベースの Experience Composer
- シングルページアプリケーション(SPA)Visual Experience Composer
- オファー
- レポート
- Recommendations
- Target のトラブルシューティング
- Target API
- リソースおよび連絡先情報