A meta da Camada de Dados do Cliente Adobe é reduzir o esforço de instrumentar sites, fornecendo um método padronizado para expor e acessar qualquer tipo de dados para qualquer script.
A Adobe Client Data Layer é agnóstica de plataforma, mas é totalmente integrada aos Componentes principais para uso com o AEM.
Como os Componentes principais, o código da Camada de dados do cliente do Adobe está disponível no GitHub, juntamente com a documentação do desenvolvedor. Este documento fornece uma visão geral de como os Componentes principais interagem com a Camada de dados, mas detalhes técnicos completos são adiados para a documentação do GitHub.
Para obter mais informações sobre a Camada de Dados do Cliente Adobe, consulte os recursos em seu repositório GitHub.
Para obter mais detalhes técnicos sobre a integração da Camada de dados do cliente Adobe com os componentes principais, consulte o arquivo DATA_LAYER_INTEGRATION.md
no repositório dos componentes principais.
A partir da versão 2.9.0 dos Componentes principais, a Camada de dados é distribuída com os Componentes principais como uma Biblioteca de clientes AEM e nenhuma instalação é necessária. Todos os projetos gerados pelo AEM Project Archetype v. 24+ incluem uma Camada de Dados ativada por padrão.
Para ativar manualmente a Camada de Dados, é necessário criar uma configuração sensível ao contexto para ela:
Crie a seguinte estrutura abaixo da pasta /conf/<mySite>
, onde <mySite>
é o nome do projeto do seu Site:
/conf/<mySite>/sling:configs/com.adobe.cq.wcm.core.components.internal.DataLayerConfig
jcr:primaryType
definido como nt:unstructured
.Adicione uma propriedade booleana chamada enabled
e defina-a como true
.
Localização de DataLayerConfig no Site de Referência WKND
Adicione uma propriedade sling:configRef
ao nó jcr:content
do site abaixo de /content
(por exemplo, /content/<mySite>/jcr:content
) e defina-o como /conf/<mySite>
da etapa anterior.
Depois de ativada, você pode verificar a ativação carregando uma página do site fora do editor. A origem da página e a tag <body>
do Inspect devem incluir um atributo data-cmp-data-layer-enabled
<body class="page basicpage" id="page-id" data-cmp-data-layer-enabled>
<script>
window.adobeDataLayer = window.adobeDataLayer || [];
adobeDataLayer.push({
page: JSON.parse("{\x22page\u002D6c5d4b9fdd\x22:{\x22xdm:language\x22:\x22en\x22,\x22repo:path\x22:\x22\/content\/wknd\/language\u002Dmasters\/en.html\x22,\x22xdm:tags\x22:[],\x22xdm:template\x22:\x22\/conf\/wknd\/settings\/wcm\/templates\/landing\u002Dpage\u002Dtemplate\x22,\x22@type\x22:\x22wknd\/components\/page\x22,\x22dc:description\x22:\x22WKND is a collective of outdoors, music, crafts, adventure sports, and travel enthusiasts that want to share our experiences, connections, and expertise with the world.\x22,\x22dc:title\x22:\x22WKND Adventures and Travel\x22,\x22repo:modifyDate\x22:\x222020\u002D09\u002D29T07:50:13Z\x22}}"),
event:'cmp:show',
eventInfo: {
path: 'page.page\u002D6c5d4b9fdd'
}
});
</script>
Você também pode abrir as ferramentas do desenvolvedor do seu navegador e no console o objeto adobeDataLayer
JavaScript deve estar disponível. Digite o seguinte comando para obter o estado da Camada de dados da sua página atual:
window.adobeDataLayer.getState();
A seguir está uma lista de schemas que os Componentes principais usam com a Camada de dados.
O schema de componente/item de Container é usado nos seguintes componentes:
O schema de componente/item de Container é definido da seguinte forma.
id: { // component ID
@type // resource type
repo:modifyDate // last modified date
dc:title // title
dc:description // description
xdm:text // text
xdm:linkURL // link URL
parentId // parent component ID
}
O seguinte evento é relevante para o schema Componente/Item de Container:
cmp:click
O schema Página é usado pelo seguinte componente:
O schema Página é definido da seguinte maneira.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
xdm:tags // page tags
repo:path // page path
xdm:template // page template
xdm:language // page language
}
Um evento cmp:show
é acionado no carregamento da página. Esse evento é despachado do JavaScript em linha imediatamente abaixo da tag <body>
de abertura, tornando-se o primeiro evento na fila de evento da camada de dados.
O schema do Container é usado pelos seguintes componentes:
O schema do Container é definido como a seguir.
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
shownItems // array of the displayed item IDs
}
Os seguintes Container eventos são relevantes para o schema:
cmp:click
cmp:show
cmp:hide
O schema de imagem é usado pelo seguinte componente:
O schema de imagem é definido da seguinte forma:
id: {
@type
repo:modifyDate
dc:title
dc:description
xdm:text
xdm:linkURL
parentId
image // asset detail (see below section)
}
O seguinte schema a1/> é relevante para o evento de Imagem:
cmp:click
O schema Asset é usado dentro do componente Image.
O schema Asset é definido como a seguir.
id: {
repo:id // asset UUID
repo:path // asset path
@type // asset resource type
xdm:tags // asset tags
repo:modifyDate
}
O seguinte evento é relevante para o schema de ativos:
cmp:click
Há vários eventos que os Componentes principais acionam por meio da Camada de dados. A prática recomendada para interagir com a Camada de dados é registrar um ouvinte de eventos e em seguida realizar uma ação com base no tipo de evento e/ou no componente que acionou o evento. Isso evitará possíveis condições de raça com scripts assíncronos.
Abaixo estão os eventos prontos para uso fornecidos pelos componentes principais AEM:
cmp:click
- Clicar em um elemento clicável (um elemento que tem um data-cmp-clickable
atributo) faz com que a camada de dados dispare um cmp:click
evento.cmp:show
e cmp:hide
- Manipular o acordeão (expandir/recolher), o carrossel (botões próximo/anterior) e os componentes de guias (seleção de guia) fazem com que a camada de dados seja acionada cmp:show
e um cmp:hide
evento, respectivamente. Um evento cmp:show
também é despachado no carregamento da página e espera-se que seja o primeiro evento.cmp:loaded
- Assim que a Camada de dados for preenchida com os Componentes principais na página, a Camada de dados acionará um cmp:loaded
evento.As tabelas a seguir listas os Componentes principais padrão que acionam eventos junto com esses eventos.
Componente | Evento(s) |
---|---|
Menu sanfonado | cmp:show e cmp:hide |
Botão | cmp:click |
Caminho | cmp:click |
Carrossel | cmp:show e cmp:hide |
Navegação de idiomas | cmp:click |
Navegação | cmp:click |
Página | cmp:show |
Guias | cmp:show e cmp:hide |
Teaser | cmp:click |
Cada evento de camada de dados acionado por um componente principal AEM incluirá uma carga com o seguinte objeto JSON:
eventInfo: {
path: '<component-path>'
}
Em que <component-path>
é o caminho JSON para o componente na Camada de dados que acionou o evento. O valor, disponível por meio de event.eventInfo.path
, é importante, pois pode ser usado como um parâmetro para adobeDataLayer.getState(<component-path>)
, que recupera o estado atual do componente que acionou o evento, permitindo que o código personalizado acesse dados adicionais e os adicione à Camada de dados.
Por exemplo:
function logEventObject(event) {
if(event.hasOwnProperty("eventInfo") && event.eventInfo.hasOwnProperty("path")) {
var dataObject = window.adobeDataLayer.getState(event.eventInfo.path);
console.debug("The component that triggered this event: ");
console.log(dataObject);
}
}
window.adobeDataLayer = window.adobeDataLayer || [];
window.adobeDataLayer.push(function (dl) {
dl.addEventListener("cmp:show", logEventObject);
});
Deseja explorar a camada de dados e os componentes principais com mais detalhes? Dê uma olhada neste tutorial prático.
Para explorar a flexibilidade da camada de dados, analise sobre as opções de integração, incluindo como ativar a camada de dados para seus componentes personalizados.