Documentação Experience Platform Tutorial do SDK da web

Criar elementos de dados

Last update: Sun Mar 08 2026 00:00:00 GMT+0000 (Coordinated Universal Time)

Tópicos:

Criado para:

Iniciante
Intermediário
Desenvolvedor

Saiba como criar elementos de dados em tags para dados de conteúdo, comércio e identidade no site de demonstração da Luma. Em seguida, preencha os campos no esquema XDM.

Objetivos de aprendizagem

No final desta lição, você poderá:

Entender diferentes abordagens para mapear uma camada de dados para o XDM
Criar elementos de dados para capturar dados
Mapear elementos de dados para um objeto XDM

Pré-requisitos

Você entende o que é uma camada de dados e concluiu as lições anteriores no tutorial:

IMPORTANT

Os dados desta lição vêm da adobeDataLayer camada de dados no site Luma. Para exibir a camada de dados, abra o console do desenvolvedor e digite adobeDataLayer para ver a camada de dados completa disponível.

Abordagens da camada de dados

Há várias maneiras de mapear dados da camada de dados para o XDM usando a funcionalidade de tags do Adobe Experience Platform. Abaixo estão alguns prós e contras de três abordagens diferentes. É possível combinar abordagens, se desejado:

Implementar o XDM na camada de dados
Mapear para XDM em tags
Mapear para XDM no fluxo de dados

NOTE

Os exemplos neste tutorial seguem a abordagem Mapear para XDM em tags.

Implementar o XDM na camada de dados

Nessa abordagem, os desenvolvedores da Web implementam um objeto XDM totalmente definido como a estrutura da camada de dados. Em seguida, mapeie toda a camada de dados para um objeto XDM nas tags. Se sua implementação não usa um gerenciador de tags, essa abordagem pode ser ideal, pois você pode enviar dados para o XDM diretamente do seu aplicativo usando o comando sendEvent do XDM. Se você usar tags, poderá criar um elemento de dados de código personalizado capturando toda a camada de dados como um objeto JSON de passagem para o XDM. Em seguida, mapeie o JSON de passagem para o campo do objeto XDM na Ação Enviar evento.

Veja abaixo um exemplo de como a camada de dados seria usada com o formato da Camada de dados do cliente Adobe:

Exemplo de XDM na camada de dados

code language-json

code language-json
`window.adobeDataLayer.push({ "eventType": "web.webPageDetails.pageViews", "web":{ "webInteraction":{ "linkClicks":{ "id":"", "value":"" }, "URL":"", "name":"", "region":"", "type":"" }, "webPageDetails":{ "pageViews":{ "id":"", "value":"1" }, "URL":"https://luma.enablementadobe.com/", "isErrorPage":"", "isHomePage":"", "name":"luma:home", "server":"enablementadobe.com", "siteSection":"home", "viewName":"" }, "webReferrer":{ "URL":"", "type":"" } } });`

window.adobeDataLayer.push({
"eventType": "web.webPageDetails.pageViews",
"web":{
         "webInteraction":{
            "linkClicks":{
               "id":"",
               "value":""
            },
            "URL":"",
            "name":"",
            "region":"",
            "type":""
         },
         "webPageDetails":{
            "pageViews":{
               "id":"",
               "value":"1"
            },
            "URL":"https://luma.enablementadobe.com/",
            "isErrorPage":"",
            "isHomePage":"",
            "name":"luma:home",
            "server":"enablementadobe.com",
            "siteSection":"home",
            "viewName":""
         },
         "webReferrer":{
            "URL":"",
            "type":""
         }
      }
});

Pontos positivos

Elimina etapas adicionais de remapeamento de variáveis de camada de dados para o XDM
A implantação pode ser mais rápida se a sua equipe de desenvolvimento da Web também for proprietária da marcação de comportamento digital

Pontos negativos

Confiança total na equipe de desenvolvimento e no ciclo de desenvolvimento para atualizar quais dados vão para o XDM
Flexibilidade limitada, pois o XDM recebe a carga exata da camada de dados
Não é possível usar recursos de tags incorporadas, como recursos de raspagem, persistência e implantação rápida
É mais difícil usar a camada de dados para pixels de terceiros (mas convém mover esses pixels para encaminhamento de eventos!)
Não há capacidade de transformar os dados entre a camada de dados e o XDM

Mapear para XDM em tags

Essa abordagem envolve o mapeamento de variáveis de camada de dados individuais para elementos de dados em tags e, por fim, para o XDM. Essa é a abordagem tradicional de implementação usando um sistema de gerenciamento de tags.

Pontos positivos

A abordagem mais flexível, pois você pode controlar variáveis individuais e transformar dados antes que eles cheguem ao XDM
Pode usar acionadores de tags da Adobe e a funcionalidade de refugo para transmitir dados ao XDM
Pode mapear elementos de dados para pixels de terceiros no lado do cliente

Pontos negativos

Demora para reconstruir a camada de dados como elementos de dados de tags

IMPORTANT

Como observado anteriormente, os exemplos neste tutorial seguem a abordagem Mapear para XDM em tags.

Mapear para XDM no fluxo de dados

Essa abordagem usa uma funcionalidade integrada à configuração de sequência de dados chamada Preparação de Dados para Coleta de Dados e ignora o mapeamento de variáveis de camada de dados para XDM nas marcas.

Pontos positivos

Mapeamento flexível de variáveis individuais para XDM em uma interface de apontar e clicar
Capacidade de calcular novos valores ou transformar tipos de dados a partir de uma camada de dados antes que ela vá para o XDM

Pontos negativos

Não é possível usar variáveis de camada de dados como elementos de dados para pixels de terceiros do lado do cliente, mas você pode usá-las com o encaminhamento de eventos
Não é possível usar a funcionalidade de reaproveitamento em tags
A complexidade de manutenção aumenta se o mapeamento da camada de dados for feito em tags e na sequência de dados

TIP

Camada de dados Google

Se sua organização já usa a Google Analytics e tem o objeto tradicional dataLayer da Google em seu site, você pode usar a extensão de Camada de Dados da Google nas tags. Isso permite implantar a tecnologia Adobe mais rapidamente, sem precisar solicitar suporte da sua equipe de TI. O mapeamento da camada de dados do Google para o XDM seguiria as mesmas etapas descritas acima.

Criar elementos de dados para capturar a camada de dados

Antes de preencher campos XDM, capture primeiro os pontos de dados necessários como elementos de dados de tags:

Vá para Elementos de Dados e selecione Adicionar Elemento de Dados (ou Criar Novo Elemento de Dados se não houver elementos de dados existentes na propriedade de marca)
Nomeie o elemento de dados Page Name
Use a Variável JavaScript Tipo de elemento de dados para apontar para o valor na camada de dados da Luma: adobeDataLayer.0.page.name
Marque as caixas Forçar valor minúsculo e Limpar texto para padronizar o caso e remover espaços irrelevantes
Deixe None como a configuração de Duração do Armazenamento, pois esse valor é diferente em cada página
Selecione Salvar

Crie esses elementos de dados adicionais seguindo as mesmas etapas:

User Id mapeado para
adobeDataLayer.0.user.id
User Logged In mapeado para
adobeDataLayer.0.user.loggedIn
Ecommerce Product Id mapeado para adobeDataLayer.0.ecommerce.detail.products.0.id
Ecommerce Product Name mapeado para adobeDataLayer.0.ecommerce.detail.products.0.name
Ecommerce Purchase Id mapeado para adobeDataLayer.0.ecommerce.purchase.actionField.id

Ecommerce Product Category usando o Código personalizado Tipo de elemento de dados e o seguinte código personalizado:

code language-javascript
`return adobeDataLayer[0].ecommerce.detail.products[0].category+":"+adobeDataLayer[0].ecommerce.detail.products[0].subcategory;`

Ecommerce Cart Products usando o seguinte código personalizado:

code language-javascript

code language-javascript
`const cartProducts = adobeDataLayer .flatMap(evt => Array.isArray(evt?.ecommerce?.cart?.items) ? evt.ecommerce.cart.items : []) .filter(item => item && item.id && item.name && item.brand) .map(({ id, name, brand }) => ({ id, name, brand })); return cartProducts;`

const cartProducts = adobeDataLayer
.flatMap(evt => Array.isArray(evt?.ecommerce?.cart?.items) ? evt.ecommerce.cart.items : [])
.filter(item => item && item.id && item.name && item.brand)
.map(({ id, name, brand }) => ({ id, name, brand }));

return cartProducts;

Ecommerce Purchase Products usando o seguinte código personalizado:

code language-javascript

code language-javascript
const purchaseEvent = adobeDataLayer.find(e => e.event === "purchase"); const currencyCode = purchaseEvent?.ecommerce?.currencyCode ?? "USD"; const purchasedProducts = (purchaseEvent?.ecommerce?.purchase?.products \|\| []).map(p => { const unitPrice = parseFloat(String(p.price).replace(/[^0-9.-]/g, "")) \|\| 0; const qty = Number(p.quantity) \|\| 0; return { SKU: p.id, // id -> SKU name: p.name, // name -> name quantity: qty, // quantity -> quantity priceTotal: unitPrice * qty, // price -> priceTotal (unit price × quantity) currencyCode // "USD" -> currencyCode (from ecommerce.currencyCode) }; }); return(purchasedProducts);

const purchaseEvent = adobeDataLayer.find(e => e.event === "purchase");

const currencyCode = purchaseEvent?.ecommerce?.currencyCode ?? "USD";

const purchasedProducts = (purchaseEvent?.ecommerce?.purchase?.products || []).map(p => {
   const unitPrice = parseFloat(String(p.price).replace(/[^0-9.-]/g, "")) || 0;
   const qty = Number(p.quantity) || 0;

   return {
   SKU: p.id,                       // id -> SKU
   name: p.name,                    // name -> name
   quantity: qty,                   // quantity -> quantity
   priceTotal: unitPrice * qty,     // price -> priceTotal (unit price × quantity)
   currencyCode                     // "USD" -> currencyCode (from ecommerce.currencyCode)
   };
});

return(purchasedProducts);

CAUTION

O tipo de elemento de dados variável JavaScript trata referências de matriz como pontos em vez de colchetes, portanto, referenciar o elemento de dados username como adobeDataLayer[0].page.name não funcionará.

Criar elementos de dados variáveis para XDM e objetos de dados

Os elementos de dados que você acabou de criar serão usados para criar um objeto XDM (para aplicativos da Platform) e um objeto de dados (para o Analytics, Target e Audience Manager). Esses objetos têm seus próprios elementos de dados especiais chamados elementos de dados Variável, que são muito fáceis de criar.

Para criar o elemento de dados Variable para XDM, vincule-o ao esquema criado na lição Configurar um esquema:

Selecione Adicionar elemento de dados
Nomeie seu Elemento de Dados XDM Variable. Recomenda-se usar o prefixo "XDM" nos elementos de dados específicos do XDM para organizar melhor a propriedade da tag
Selecione a Adobe Experience Platform Web SDK como a Extensão
Selecione a Variável como o Tipo de Elemento de Dados
Selecione XDM como a propriedade
Selecione a Sandbox em que você criou o esquema
Selecione o Esquema apropriado, neste caso Luma Web Event Data
Selecione Salvar

Em seguida, crie o elemento de dados Variable para seu objeto de dados:

Selecione Adicionar elemento de dados
Nomeie seu Elemento de Dados Data Variable.
Selecione a Adobe Experience Platform Web SDK como a Extensão
Selecione a Variável como o Tipo de Elemento de Dados
Selecione dados como a propriedade
Selecione as soluções da Experience Cloud que deseja implementar como parte deste tutorial
Selecione Salvar

Ao final dessas etapas, você deve ter os seguintes elementos de dados criados:

Elementos de dados da extensão principal

Elementos de dados da extensão do Platform Web SDK

Ecommerce Cart Products

Data Variable

Ecommerce Product Category

XDM Variable

Ecommerce Product Id

Ecommerce Product Name

Ecommerce Purchase Id

Ecommerce Purchase Products

Page Name

User Id

User Logged In

Com esses elementos de dados implementados, você estará pronto para começar a enviar dados para o Platform Edge Network com uma regra de tags. Mas primeiro, saiba como coletar identidades com o Web SDK.

NOTE

Obrigado por investir seu tempo aprendendo sobre o Adobe Experience Platform Web SDK. Se você tiver dúvidas, quiser compartilhar comentários gerais ou tiver sugestões sobre conteúdo futuro, compartilhe-as nesta postagem de discussão da Comunidade Experience League

recommendation-more-help

8cbc0fd8-ca1d-433b-9c3d-bc3f113347d4