Dokumentation Target Användarhandbok om Target

Elementväljare som används i Visual Experience Composer

Last update: Sat Jul 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Ämnen:

En elementväljare är ett CSS-uttryck som kan identifiera ett eller flera element.

Grundläggande information om CSS-väljare finns i dokumentet Selectors i Mozilla Developer Network (MDN).

Du kan ange om element-ID:n som klassas eller element-ID:n ska användas i dina kontoinställningar. Klicka på Administration > Visual Experience Composer och välj sedan dina önskade CSS-väljare.

css_selectors image

NOTE

Elementklasser är tillgängliga som väljare i A/B Test-, Automated Personalization- och Multivariate Test-aktiviteter.

Mer information om när CSS-väljare ska användas och när unika ID:n ska användas finns i Bästa metoder och begränsningar i Visual Experience Composer.

Så här genererar Adobe Target en väljare för ett element section_D89D954BCBFB486CA081BE183776A475

Målet använder en enkel algoritm för att skapa en väljare. Här följer en kort beskrivning av genereringslogiken:

Om ett element har ett id, till exempel id="container", är väljaren för elementet #container.

Exempel:

code language-html

code language-html
`<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>`

<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>

Om ett element innehåller ett klassattribut försöker Target utnyttja den första klassen i alla klasser som finns i elementet.

Målet försöker tolka det överordnade elementet tills det hittar elementet <HTML> eller ett element med ett ID. När ett element innehåller ett id och väljaren beräknas på dess underordnade underordnade objekt, bidrar elementets id till väljaren.

Exempel:

code language-html

code language-html
`<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>`

<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>

I detta exempel:

Väljare: #container > ul.navigation:eq(0) > li.item:eq(0) (" > " anger det omedelbara underordnade objektet.)

eq anger för indexet att det finns ett element som har "tagName=UL" och den första klassen är navigation. Därför är index 0. Mer information finns i artikeln Väljare i MDN.

Om ett element inte innehåller någon klass använder Target tagName för elementet och går uppåt i det överordnade elementet tills antingen elementet <HTML> eller ett element med ett ID hittas.

Exempel:

code language-html

code language-html
`<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>`

<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>

Väljare: #container > ul.navigation(0) > li:nth-of-type(4)

Du kan läsa mer om nth of type på webbsidan CSS Tricks.

I ovanstående process:

Du kan använda valfri CSS-väljare så länge den unikt identifierar ett element i DOM.
Metoden ovan används av Target. Målet tillåter inte att du använder det här tillvägagångssättet. Du kan lägga till valfri väljare förutsatt att punkt 1 är sann.
Du kan använda valfritt attribut i väljaren. I det här dokumentet används endast klassnamn som exempel.

recommendation-more-help

3d9ad939-5908-4b30-aac1-a4ad253cd654