Tracciamento automatico delle interazioni delle proposte
Quando abiliti il tracciamento automatico dell'interazione della proposta, tutti i clic all'interno di un elemento della proposta sottoposto a rendering nel DOM verranno raccolti automaticamente da Web SDK. Sono incluse tutte le esperienze sottoposte a rendering automatico nel DOM da Web SDK e le esperienze sottoposte a rendering nel DOM utilizzando il comando applyPropositions.
Attributi dei dati
Puoi utilizzare gli attributi di dati sugli elementi per aggiungere specificità a un’interazione.
| Nome | Attributo dati | Descrizione |
|---|---|---|
| Label | data-aep-click-label | Quando l'attributo di dati dell'etichetta è presente in un elemento su cui è stato fatto clic, viene incluso nei dettagli di interazione inviati a Edge Network. Web SDK cerca un attributo di dati di etichetta che inizia con l'elemento su cui si fa clic e si sposta verso l'alto nella struttura DOM. Web SDK utilizza la prima etichetta trovata. |
| Token | data-aep-click-token | Usa questo token per sfruttare i criteri decisionali nelle campagne basate su codice Adobe Journey Optimizer. Puoi utilizzare il token per distinguere l’elemento del criterio di decisione su cui hai fatto clic. Quando l’attributo dei dati del token è presente su un elemento su cui è stato fatto clic, viene incluso con i dettagli di interazione inviati all’Edge Network. Web SDK cerca un attributo di dati token che inizia con l'elemento su cui è stato fatto clic e che si sposta verso l'alto nella struttura DOM. Web SDK utilizza il primo token trovato. |
| Interact ID | data-aep-interact-id | Web SDK aggiunge automaticamente questo ID univoco agli elementi contenitore durante il rendering delle proposte. Web SDK utilizza questo ID per correlare DOM elementi alle proposte. Poiché si tratta di un ID richiesto da Web SDK, non modificarlo in alcun modo. Puoi tranquillamente ignorarlo. |
Esempio
Fai riferimento al frammento di codice seguente per visualizzare un esempio di utilizzo degli attributi di dati.
<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>
Il comando applyPropositions
Per informazioni sul funzionamento di questo comando, consultare la documentazione di applyPropositions.
Il comando applyPropositions è un modo pratico per eseguire il rendering delle proposte in DOM. Tuttavia, nel caso di campagne basate su codice con JSON, puoi utilizzare questo comando per correlare un elemento DOM esistente (o quello di cui il codice dell'applicazione ha eseguito il rendering sullo schermo in base ai valori JSON) con una proposta.
Questa correlazione attiva il tracciamento automatico delle interazioni per quell’elemento e assegna a quell’elemento la proposta appropriata. Per ottenere questo risultato, impostare actionType su track.
Esempio
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",
},
},
});
}
});