Documentazione Journey Optimizer Guida di Journey Optimizer

Configurare il supporto per le schede di contenuto in Web SDK content-card-configuration-sdk

Ultimo aggiornamento: 13 settembre 2026

Creato per:

Experienced
Amministratore

In questa pagina: Configura ed esegui l’esempio che recupera ed esegue il rendering delle schede di contenuto con Adobe Experience Platform Web SDK in modo da poter distribuire contenuti personalizzati lato client sulle pagine Web.

style

shade-box

In questo esempio viene illustrato come recuperare le schede di contenuto da Adobe Journey Optimizer (AJO) tramite Adobe Experience Platform. Sfruttando Adobe Experience Platform Web SDK, il contenuto di personalizzazione viene recuperato e renderizzato interamente sul lato client.

Al caricamento della pagina iniziale, viene visualizzato lo stato predefinito della pagina. Tuttavia, se interagisci con i pulsanti Fondi di deposito o Condividi sui social media, verranno visualizzate schede di contenuto aggiuntive. Queste schede vengono attivate da condizioni lato client, garantendo che vengano visualizzate solo quando vengono intraprese azioni specifiche.

Esecuzione dell’esempio run-sample

PREREQUISITES

È necessario installare node e npm. Consulta questa documentazione

Per utilizzare le regole di squalifica con le schede di contenuto, è necessario Web SDK versione 2.28.0 o successiva.

Imposta i certificati SSL locali per HTTPS. Questi esempi richiedono certificati SSL firmati localmente per distribuire il contenuto tramite HTTPS:
1. Installa mkcert nel computer.
2. Dopo l’installazione, eseguire mkcert -install per installare il certificato mkcert root.
Clona l’archivio nel computer locale.
Apri un terminale e passa alla cartella dell’esempio.
Installare le dipendenze richieste eseguendo npm install.
Avviare l’applicazione eseguendo npm start.
Apri il browser Web e passa a https://localhost.

Come funziona setup

Includi e configura il Web SDK nella pagina utilizzando le impostazioni del file .env nella cartella di esempio.

code language-none

<script src="https://cdn1.adoberesources.net/alloy/2.18.0/alloy.min.js" async></script>
alloy("configure", {
    defaultConsent: "in",
    edgeDomain: "{{edgeDomain}}",
    edgeConfigId: "{{edgeConfigId}}",
    orgId:"{{orgId}}",
    debugEnabled: false,
    personalizationStorageEnabled: true,
    thirdPartyCookiesEnabled: false
});

Utilizza il comando sendEvent per recuperare il contenuto personalizzato.

code language-none
`alloy("sendEvent", { renderDecisions: true, personalization: { surfaces: ["web://alloy-samples.adobe.com/#content-cards-sample"], }, });`

Sottoscrivere le schede di contenuto per una superficie specifica utilizzando il comando subscribeRulesetItems. Ogni volta che vengono valutati i set di regole, gestisci l’oggetto risultato nel callback, che conterrà propositions con i dati della scheda contenuto.

code language-none

const contentCardManager = createContentCardManager("content-cards");

alloy("subscribeRulesetItems", {
    surfaces: ["web://alloy-samples.adobe.com/#content-cards-sample"],
    schemas: ["https://ns.adobe.com/personalization/message/content-card"],
    callback: (result, collectEvent) => {
        const { propositions = [] } = result;
        contentCardManager.refresh(propositions, collectEvent);
    },
});

Gestisci il rendering delle schede di contenuto e invia interact e display eventi utilizzando l’oggetto contentCardsManager trovato in script.js. Estrai, ordina ed elabora schede di contenuto dalle proposte ricevute.

code language-none

const createContentCard = (proposition, item) => {
    const { data = {}, id } = item;
    const {
        content = {},
        meta = {},
        publishedDate,
        qualifiedDate,
        displayedDate,
    } = data;

    return {
        id,
        ...content,
        meta,
        qualifiedDate,
        displayedDate,
        publishedDate,
        getProposition: () => proposition,
    };
};

const extractContentCards = (propositions) =>
    propositions
        .reduce((allItems, proposition) => {
        const { items = [] } = proposition;

        return [
            ...allItems,
            ...items.map((item) => createContentCard(proposition, item)),
        ];
    }, [])
    .sort(
        (a, b) =>
            b.qualifiedDate - a.qualifiedDate || b.publishedDate - a.publishedDate
    );

const contentCards = extractContentCards(propositions);

Esegui il rendering delle schede di contenuto in base ai dettagli definiti per ciascuna campagna. Ogni scheda include title, body, imageUrl e altri valori di dati personalizzati.

code language-none

const renderContentCards = () => {
    const contentCardsContainer = document.getElementById(containerElementId);
    contentCardsContainer.addEventListener("click", handleContentCardClick);

    let contents = "";

    contentCards.forEach((card) => {
        const { id, title, body, imageUrl, meta = {} } = card;
        const { buttonLabel = "" } = meta;

        contents += `
            <div class="col">
                <div data-id="${id}" class="card h-100">
                    <img src="${imageUrl}" class="card-img-top" alt="...">
                    <div class="card-body d-flex flex-column">
                        <h5 class="card-title">${title}</h5>
                        <p class="card-text">${body}</p>
                        <a href="#" class="mt-auto btn btn-primary">${buttonLabel}</a>
                    </div>
                </div>
             </div>
         `;
    });

    contentCardsContainer.innerHTML = contents;
    collectEvent(
        "display",
        contentCards.map((card) => card.getProposition())
     );
};

Quando viene richiamato il callback subscribeRulesetItems, viene fornita anche una funzione di convenienza denominata collectEvent. Questa funzione viene utilizzata per inviare eventi Experience Edge per monitorare interazioni, visualizzazioni e altre azioni dell’utente. In questo esempio, collectEvent tiene traccia di quando si fa clic su una scheda di contenuto. Inoltre, se fai clic sul pulsante sulla scheda dei contenuti, il browser viene indirizzato a actionUrl specificato dalla campagna.

code language-none

const handleContentCardClick = (evt) => {
    const cardEl = evt.target.closest(".card");

    if (!cardEl) {
        return;
    }

    const isAnchor = evt.target.nodeName === "A";
    const card = contentCards.find((card) => card.id === cardEl.dataset.id);

    if (!card) {
        return;
    }

    collectEvent("interact", [card.getProposition()]);

    if (isAnchor) {
        evt.preventDefault();
        evt.stopImmediatePropagation();
        const { actionUrl } = card;
        if (actionUrl && actionUrl.length > 0) {
            window.location.href = actionUrl;
        }
    }
};

Osservazioni chiave key-observations

personalizationStorageEnabled

Opzione personalizationStorageEnabled impostata su true nel comando configure. In questo modo, le schede di contenuto precedentemente qualificate vengono memorizzate e continuano a essere visualizzate nelle diverse sessioni utente.

Trigger

Le schede di contenuto supportano trigger personalizzati valutati sul lato client. Quando viene soddisfatta una regola di attivazione, vengono visualizzate schede di contenuto aggiuntive. In questo esempio vengono utilizzate quattro campagne diverse, una per ogni scheda di contenuto, che condividono tutte la stessa superficie: web://alloy-samples.adobe.com/#content-cards-sample. La tabella seguente illustra le regole di attivazione per ogni campagna e come soddisfarle.

Regola di attivazione

Scheda

Come soddisfare la regola di attivazione

None (Nessuno)

comando sendEvent. Nessuna regola lato client da soddisfare.

None (Nessuno)

comando sendEvent. Nessuna regola lato client da soddisfare.

Il comando evaluateRulesets viene attivato quando si fa clic sui pulsanti “Fondi di deposito” e “Condividi sui social media”. Ogni pulsante specifica il decisionContext pertinente per soddisfare le regole definite per le rispettive campagne.

document.getElementById("action-button-1").addEventListener("click", () => {
    alloy("evaluateRulesets", {
        renderDecisions: true,
        personalization: {
            decisionContext: {
                action: "deposit-funds",
            },
        },
    });
});

document.getElementById("action-button-2").addEventListener("click", () => {
    alloy("evaluateRulesets", {
        renderDecisions: true,
        personalization: {
            decisionContext: {
                action: "social-media",
            },
        },
    });
});

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

TL;DR: This page walks through a sample that uses the Adobe Experience Platform Web SDK to fetch and render Adobe Journey Optimizer content cards entirely on the client side of a web page.

Intents:

Set up and run the Web SDK content card sample locally over HTTPS
Configure the Web SDK (alloy) on a page and fetch personalized content with the sendEvent command
Subscribe to content cards for a surface using the subscribeRulesetItems command
Render content cards and send display and interact events
Trigger additional content cards client side using evaluateRulesets and a decisionContext
Persist qualified content cards across user sessions with personalizationStorageEnabled

Glossary:

Surface: The identifier a content card subscription and events are scoped to, for example web://alloy-samples.adobe.com/#content-cards-sample (product-specific)
subscribeRulesetItems: The Web SDK command used to subscribe to content cards for a surface; its callback returns propositions containing content card data (product-specific)
evaluateRulesets: The Web SDK command triggered on client-side actions to evaluate rulesets using a decisionContext (product-specific)
decisionContext: The context passed with evaluateRulesets that supplies the values needed to satisfy a campaign’s client-side trigger rules (product-specific)
collectEvent: A convenience function provided in the subscribeRulesetItems callback used to send Experience Edge events to track displays, interactions, and other user actions (product-specific)
personalizationStorageEnabled: A configure option that, when set to true, stores previously qualified content cards so they continue to be displayed across user sessions (product-specific)
Trigger rule: A client-side condition that, when met, causes additional content cards to be displayed (product-specific)

Guardrails:

To use disqualification rules with content cards, Web SDK version 2.28.0 or later is required.
You need to install node and npm to run the sample.
The samples require locally signed SSL certificates to serve content over HTTPS.
In this sample, four campaigns are used, one per content card, all sharing the same surface web://alloy-samples.adobe.com/#content-cards-sample.

Terminology:

Canonical name: Configure content cards support in Web SDK — Acronym: SDK — variants: Web SDK content card sample, Content cards configuration Web SDK
Synonyms: “Web SDK” = “alloy”
Do not confuse: “sendEvent” (fetch personalized content) ≠ “subscribeRulesetItems” (subscribe to content cards for a surface) ≠ “evaluateRulesets” (evaluate rulesets on a client-side action)
Do not confuse: “display” event (content card shown) ≠ “interact” event (content card clicked)

FAQ:

Q: What Web SDK version is needed for disqualification rules? — Web SDK version 2.28.0 or later is required to use disqualification rules with content cards.
Q: Why do the samples require SSL certificates? — The samples serve content over HTTPS, so they require locally signed SSL certificates; the page uses mkcert to create and install them.
Q: How are qualified content cards kept across sessions? — Setting personalizationStorageEnabled to true in the configure command stores previously qualified content cards so they continue to be displayed across user sessions.
Q: How are additional content cards triggered? — Content cards support custom triggers evaluated on the client side; the sample calls evaluateRulesets with a decisionContext when the Deposit Funds or Share on social media buttons are clicked.
Q: What happens when a content card button is clicked? — The collectEvent function tracks the interaction, and if the button is an anchor, the browser is directed to the actionUrl specified by the campaign.

recommendation-more-help

journey-optimizer-help