DocumentazioneJourney OptimizerGuida di Journey Optimizer

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

Last update: Mon Aug 25 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Creato per:

  • Esperto
  • Amministratore

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

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

  2. Clona l’archivio nel computer locale.

  3. Apri un terminale e passa alla cartella dell’esempio.

  4. Installare le dipendenze richieste eseguendo npm install.

  5. Avviare l'applicazione eseguendo npm start.

  6. Apri il browser Web e passa a https://localhost.

Come funziona setup

  1. 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
});

  2. 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"],
    },
});

  3. 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);
    },
});

  4. 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);

  5. 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())
     );
};

  6. 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 del trigger
Scheda
Come soddisfare la regola di attivazione
Nessuna
comando sendEvent. Nessuna regola lato client da soddisfare.
Nessuna
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",
            },
        },
    });
});
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76