Documentação Journey Optimizer Guia do Journey Optimizer

Configurar o suporte a cartões de conteúdo no SDK da Web content-card-configuration-sdk

Última atualização: 13 de setembro de 2026

Criado para:

Experienced
Admin

Nesta página: configure e execute o exemplo que busca e renderiza cartões de conteúdo com o Adobe Experience Platform Web SDK para que você possa fornecer conteúdo personalizado do lado do cliente em suas páginas da Web.

style

shade-box

Este exemplo mostra como recuperar Cartões de conteúdo do Adobe Journey Optimizer (AJO) usando o Adobe Experience Platform. Com a Adobe Experience Platform Web SDK, o conteúdo de personalização é obtido e renderizado totalmente no lado do cliente.

Após o carregamento inicial, a página exibe seu estado padrão. No entanto, se você interagir com os botões Depositar Fundos ou Compartilhar em redes sociais, serão exibidos cartões de conteúdo adicionais. Esses cartões são acionados pelas condições do lado do cliente, garantindo que sejam exibidos somente quando ações específicas forem executadas.

Execução da amostra run-sample

PREREQUISITES

Você precisa instalar o nó e o npm. Consulte esta documentação

Para usar regras de desqualificação com cartões de conteúdo, é necessário o Web SDK versão 2.28.0 ou posterior.

Configurar certificados SSL locais para HTTPS. Esses exemplos exigem certificados SSL assinados localmente para veicular conteúdo em HTTPS:
1. Instalar o mkcert no computador.
2. Após a instalação, execute o mkcert -install para instalar o certificado mkcert root.
Clonar o repositório no computador local.
Abra um terminal e navegue até a pasta do exemplo.
Instale as dependências necessárias executando npm install.
Inicie o aplicativo executando npm start.
Abra seu navegador da Web e vá para https://localhost.

Como funciona setup

Inclua e configure o Web SDK na página usando as configurações do arquivo .env na pasta de exemplo.

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

Use o comando sendEvent para buscar conteúdo personalizado.

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

Inscreva-se em cartões de conteúdo para uma superfície específica usando o comando subscribeRulesetItems. Sempre que os conjuntos de regras forem avaliados, manipule o objeto resultante no retorno de chamada, que conterá propositions com os dados do cartão de conteúdo.

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

Gerencie a renderização de cartões de conteúdo e envie eventos interact e display usando o objeto contentCardsManager encontrado em script.js. Extraia, classifique e processe cartões de conteúdo das apresentações recebidas.

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

Renderize os cartões de conteúdo com base nos detalhes definidos para cada campanha. Cada cartão inclui um title, body, imageUrl e outros valores de dados 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())
     );
};

Quando o retorno de chamada subscribeRulesetItems é invocado, uma função de conveniência chamada collectEvent também é fornecida. Essa função é usada para enviar eventos do Experience Edge para rastrear interações, exibições e outras ações do usuário. Neste exemplo, collectEvent rastreia quando um cartão de conteúdo é clicado. Além disso, se o botão no cartão de conteúdo for clicado, o navegador será direcionado para o actionUrl especificado pela campanha.

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

Principais observações key-observations

personalizationStorageEnabled

A opção personalizationStorageEnabled está definida como true no comando configure. Isso garante que os cartões de conteúdo qualificados anteriormente sejam armazenados e continuem sendo exibidos nas sessões do usuário.

Acionadores

Os cartões de conteúdo são compatíveis com acionadores personalizados avaliados no lado do cliente. Quando uma regra de acionador é atendida, cartões de conteúdo adicionais são exibidos. Este exemplo usa quatro campanhas diferentes, uma para cada cartão de conteúdo, todas compartilhando a mesma superfície: web://alloy-samples.adobe.com/#content-cards-sample. A tabela abaixo descreve as regras de acionador para cada campanha e como satisfazê-las.

Regra de acionamento

Cartão

Como cumprir a regra de acionador

None

comando sendEvent. Nenhuma regra do lado do cliente a ser atendida.

None

comando sendEvent. Nenhuma regra do lado do cliente a ser atendida.

O comando evaluateRulesets é acionado ao clicar nos botões “Depositar Fundos” e “Compartilhar em redes sociais”. Cada botão especifica o decisionContext relevante para cumprir as regras definidas para as respectivas campanhas.

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