Automatisch interactieve elementen bijhouden
Wanneer u automatische het volgen van propositieinteractie toelaat, zullen om het even welke kliks binnen een proposition element dat aan DOM wordt teruggegeven automatisch worden verzameld door Web SDK. Dit omvat alle ervaringen die door Web SDK automatisch naar de DOM worden gerenderd en ervaringen die met de opdracht applyPropositions
aan de DOM zijn gerenderd.
Gegevenskenmerken
U kunt gegevenskenmerken op elementen gebruiken om specificiteit aan een interactie toe te voegen.
Naam | Gegevenskenmerk | Beschrijving |
---|---|---|
Label | data-aep-click-label | Wanneer het kenmerk labelgegevens aanwezig is op een aangeklikt element, wordt dit opgenomen met de interactiedetails die naar de Edge Network worden verzonden. Web SDK zoekt naar een kenmerk van labelgegevens dat begint met het element waarop is geklikt en dat de DOM-structuur doorloopt. De Web SDK gebruikt het eerste label dat wordt gevonden. |
Token | data-aep-click-token | Gebruik dit teken wanneer het leveraging van besluitvormingsbeleid in op code-gebaseerde campagnes van Adobe Journey Optimizer. U kunt het teken gebruiken om te onderscheiden welk punt van het besluitvormingsbeleid werd geklikt. Wanneer het attribuut van symbolische gegevens op een geklikt element aanwezig is, is het inbegrepen met de interactiedetails die naar de Edge Network worden verzonden. De Web SDK zoekt naar een kenmerk voor tokengegevens dat begint met het element waarop is geklikt en dat de DOM-structuur doorloopt. De Web SDK gebruikt de eerste token die wordt gevonden. |
Interact ID | data-aep-interact-id | De Web SDK voegt deze unieke id automatisch toe aan containerelementen bij het renderen van voorstellingen. De Web SDK gebruikt deze id om DOM -elementen te correleren met voorstellingen. Aangezien dit een id is die vereist is door de Web SDK , mag u deze op geen enkele manier wijzigen. U kunt het veilig negeren. |
Voorbeeld
Raadpleeg het codefragment hieronder voor een voorbeeld van het gebruik van gegevenskenmerken.
<div class="row movies" data-aep-interact-id="5">
<div class="col-md-4 movie" data-aep-click-token="wlpk/z/qyDGoFGF1E47O0w">
<img src="/img/walle.jpg" class="poster" />
<h2>WALL·E</h2>
<p class="description"> In a distant, but not so unrealistic, future where mankind has abandoned earth because it has become covered with trash from products sold by the powerful multi-national Buy N Large corporation, WALL-E, a garbage collecting robot has been left to clean up the mess. </p>
<p>
<button class="btn btn-default" data-aep-click-label="view-movie-WALL·E"> View details >> </button>
</p>
</div>
<div class="col-md-4 movie" data-aep-click-token="6ZUrou9BVKIsINIAqxylzw">
<img src="/img/ratatouille.jpg" class="poster" />
<h2>Ratatouille</h2>
<p class="description"> A rat named Remy dreams of becoming a great French chef despite his family's wishes and the obvious problem of being a rat in a decidedly rodent-phobic profession. When fate places Remy in the sewers of Paris, he finds himself ideally situated beneath a restaurant made famous by his culinary hero, Auguste Gusteau. </p>
<p>
<button class="btn btn-default" data-aep-click-label="view-movie-Ratatouille"> View details >> </button>
</p>
</div>
<div class="col-md-4 movie" data-aep-click-token="QuuXntMRGnCP/AsZHf4pnQ">
<img src="/img/coco.jpg" class="poster" />
<h2>Coco</h2>
<p class="description"> Despite his family's baffling generations-old ban on music, Miguel dreams of becoming an accomplished musician like his idol, Ernesto de la Cruz. Desperate to prove his talent, Miguel finds himself in the stunning and colorful Land of the Dead following a mysterious chain of events. </p>
<p>
<button class="btn btn-default" data-aep-click-label="view-movie-Coco"> View details >> </button>
</p>
</div>
</div>
De opdracht applyPropositions
Raadpleeg de documentatie bij applyPropositions
voor meer informatie over de werking van deze opdracht.
De opdracht applyPropositions
is een handige manier om voorstellingen te renderen naar de DOM . In het geval van op code gebaseerde campagnes met JSON
kunt u deze opdracht echter gebruiken om een bestaand DOM -element (of het element dat uw toepassingscode naar het scherm rendert op basis van de JSON
-waarden) te correleren met een voorstel.
Deze correlatie activeert automatische interactietracering voor dat element en wijst dat element het aangewezen voorstel toe. Stel hiertoe de waarde actionType
in op track
.
Voorbeeld
alloy("sendEvent", {
renderDecisions: true,
}).then((result) => {
const {
propositions = []
} = result;
const proposition = propositions.find(
(proposition) => proposition.scope === "web://mywebsite.com/#weather-widget"
);
if (proposition) {
renderWeatherWidget(proposition); // custom code that renders the weather widget based on the code-based campaign JSON
alloy("applyPropositions", {
propositions: [proposition],
metadata: {
"web://mywebsite.com/#weather-widget": {
selector: "#weather-widget",
actionType: "track",
},
},
});
}
});