Elementkiezers die worden gebruikt in de composer voor visuele ervaring

Last update: Tue Feb 18 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Onderwerpen:

Een elementkiezer is een CSS-expressie waarmee een of meer elementen kunnen worden geïdentificeerd.

U kunt basisinformatie over CSS selecteurs in het document van de Selecteursop het Netwerk van de Ontwikkelaar Mozilla (MDN) vinden.

U kunt instellen of u in uw accountvoorkeuren een elementklasse- of element-id wilt gebruiken. Klik op Administration > Visual Experience Composer en kies de gewenste CSS-kiezers.

css_selectors beeld

NOTE

De Klassen van het element zijn beschikbaar als selecteurs in de Test A/B, Automated Personalization, en Multivariate van de Test activiteiten.

Voor informatie over wanneer om CSS selecteurs te gebruiken en wanneer om unieke IDs te gebruiken, zie {de Beste Praktijken en Beperkingen van Composer van 0} Visuele Ervaring Composer 🔗.

Hoe Adobe Target een kiezer voor een element genereert

Doel gebruikt een eenvoudig algoritme om een kiezer te maken. Hier volgt een korte uitleg van de generatielogica:

Als een element een id heeft, bijvoorbeeld id="container" , is de kiezer voor het element #container .

Bijvoorbeeld:

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

Als een element een klassenkenmerk bevat, probeert Target de eerste klasse van alle klassen die zich op het element bevinden, te benutten.

Doel probeert het bovenliggende element te parseren totdat het element <HTML> of een element met een id wordt gevonden. Wanneer een element een id bevat en de kiezer op het onderliggende element wordt berekend, levert de id van dit element een bijdrage aan de kiezer.

Bijvoorbeeld:
<div class="wrapper"> <div id="container">  <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>
In dit voorbeeld:

Selector: #container > ul.navigation:eq(0) > li.item:eq(0) (" > " geeft het directe onderliggende item aan.)

eq vertelt de index dat er een element is met "tagName=UL" en de eerste klasse is navigation . Daarom is index 0. Zie het artikel van Kiezersin MDN voor meer informatie.

Als een element geen klasse bevat, gebruikt Target tagName voor het element en doorloopt het bovenliggende element totdat het element <HTML> of een element met een id is gevonden.

Bijvoorbeeld:

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

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

In het bovenstaande proces:

U kunt elke CSS-kiezer gebruiken zolang deze een element in het DOM op unieke wijze identificeert.
De bovenstaande benadering wordt door Target gebruikt. Het doel verplicht u niet om deze benadering te gebruiken. U kunt elke kiezer toevoegen zolang punt #1 waar is.
U kunt elk willekeurig kenmerk in de kiezer gebruiken. Dit document gebruikt alleen een klassenaam als voorbeeld.

recommendation-more-help