Documentación Journey Optimizer Guía de Journey Optimizer

Configuración de la compatibilidad con tarjetas de contenido en SDK web content-card-configuration-sdk

Última actualización: 14 de septiembre de 2026

Creado para:

Experienced
Administrador

En esta página: Configure y ejecute el ejemplo que busca y procesa tarjetas de contenido con Adobe Experience Platform Web SDK para que pueda entregar contenido personalizado del lado del cliente en sus páginas web.

style

shade-box

Este ejemplo muestra cómo recuperar tarjetas de contenido de Adobe Journey Optimizer (AJO) mediante Adobe Experience Platform. Al aprovechar Adobe Experience Platform Web SDK, el contenido de personalización se recupera y se procesa por completo en el lado del cliente.

Tras la carga inicial de la página, la página muestra su estado predeterminado. Sin embargo, si interactúa con los botones Depositar fondos o Compartir en medios sociales, aparecerán tarjetas de contenido adicionales. Estas tarjetas se activan por condiciones del lado del cliente, lo que garantiza que se muestren solo cuando se realizan acciones específicas.

Ejecución del ejemplo run-sample

PREREQUISITES

Debe instalar node y npm. Consulte esta documentación

Para utilizar reglas de descalificación con tarjetas de contenido, se requiere Web SDK versión 2.28.0 o posterior.

Configure los certificados SSL locales para HTTPS. Estos ejemplos requieren certificados SSL firmados localmente para proporcionar contenido a través de HTTPS:
1. Instale mkcert en su equipo.
2. Después de la instalación, ejecute mkcert -install para instalar el certificado mkcert root.
Clone el repositorio en el equipo local.
Abra un terminal y vaya a la carpeta del ejemplo.
Instale las dependencias requeridas ejecutando npm install.
Inicie la aplicación ejecutando npm start.
Abra el explorador web y vaya a https://localhost.

Funcionamiento setup

Incluya y configure Web SDK en la página con la configuración del archivo .env en la carpeta de ejemplo.

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

Utilice el comando sendEvent para obtener contenido personalizado.

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

Suscríbase a tarjetas de contenido para una superficie específica mediante el comando subscribeRulesetItems. Cada vez que se evalúen los conjuntos de reglas, controle el objeto de resultado en la llamada de retorno, que contendrá propositions con datos de la tarjeta de contenido.

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

Administre la representación de tarjetas de contenido y envíe interact y display eventos utilizando el objeto contentCardsManager encontrado en script.js. Extraer, ordenar y procesar tarjetas de contenido de las propuestas recibidas.

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

Procese las tarjetas de contenido en función de los detalles definidos para cada campaña. Cada tarjeta incluye title, body, imageUrl y otros valores de datos personalizados.

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

Cuando se invoca la llamada de retorno subscribeRulesetItems, también se proporciona una función de conveniencia llamada collectEvent. Esta función se utiliza para enviar eventos de Experience Edge para rastrear interacciones, visualizaciones y otras acciones del usuario. En este ejemplo, collectEvent rastrea cuándo se hace clic en una tarjeta de contenido. Además, si se hace clic en el botón de la tarjeta de contenido, el explorador se dirigirá al actionUrl especificado por la campaña.

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

Observaciones clave key-observations

personalizationStorageEnabled

La opción personalizationStorageEnabled se ha establecido en true en el comando configure. Esto garantiza que las tarjetas de contenido cualificadas anteriormente se almacenen y sigan mostrándose en las sesiones de los usuarios.

Activadores

Las tarjetas de contenido admiten déclencheur personalizados evaluados por el cliente. Cuando se cumple una regla de déclencheur, se muestran tarjetas de contenido adicionales. Este ejemplo utiliza cuatro campañas diferentes, una para cada tarjeta de contenido, todas compartiendo la misma superficie: web://alloy-samples.adobe.com/#content-cards-sample. La siguiente tabla describe las reglas de déclencheur para cada campaña y cómo satisfacerlas.

regla de déclencheur

Tarjeta

Cómo cumplir la regla de déclencheur

Ninguna

comando sendEvent. No hay ninguna regla del lado del cliente que satisfacer.

Ninguna

comando sendEvent. No hay ninguna regla del lado del cliente que satisfacer.

El comando evaluateRulesets se activa al hacer clic en los botones “Depositar fondos” y “Compartir en medios sociales”. Cada botón especifica los decisionContext relevantes para cumplir las reglas definidas para las campañas correspondientes.

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