Uso da camada de dados do cliente do Adobe com os componentes principais

O objetivo da Camada de dados do cliente do 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 Camada de dados do cliente do Adobe é independente 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 os detalhes técnicos completos são adiados para a documentação do GitHub.

DICA

Para obter mais informações sobre a Camada de dados do cliente do 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 do Adobe com os Componentes principais, consulte o arquivo DATA_LAYER_INTEGRATION.md no repositório dos Componentes principais.

Instalação e ativação

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, você deve criar uma configuração com reconhecimento de contexto para ela:

  1. 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
    • Onde cada nó tem um jcr:primaryType definido como nt:unstructured.

  2. Adicione uma propriedade booleana chamada enabled e defina-a como true.

    Localização de DataLayerConfig no Site de Referência WKND

    Localização de DataLayerConfig no Site de Referência WKND

  3. Adicione uma propriedade sling:configRef ao nó jcr:content do site abaixo de /content (por exemplo, /content/<mySite>/jcr:content) e defina-a para /conf/<mySite> a partir da etapa anterior.

  4. Depois de habilitado, é possível verificar a ativação carregando uma página do site fora do editor, por exemplo, usando a opção Exibir como publicada no editor. Inspect a fonte da página e a tag <body> 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>

  5. Você também pode abrir as ferramentas do desenvolvedor do seu navegador e, no console, o objeto JavaScript adobeDataLayer deve estar disponível. Digite o seguinte comando para obter o estado da camada de dados da página atual:

    window.adobeDataLayer.getState();

Componentes compatíveis

Os componentes a seguir são compatíveis com a Camada de dados.

Consulte também os eventos acionados pelos componentes.

Esquemas de dados dos componentes principais

Esta é uma lista de esquemas que os Componentes principais usam com a Camada de dados.

Esquema de Item do Componente/Contêiner

O esquema Componente/Item do contêiner é usado nos seguintes componentes:

O schema Componente/Item do contêiner é definido da seguinte maneira.

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 event é relevante para o esquema Componente/Item do Contêiner:

  • cmp:click

Esquema de página

O esquema Page é usado pelo seguinte componente:

O schema Page é 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 de abertura <body>, tornando-o o primeiro evento na fila de eventos da Camada de dados.

Esquema do contêiner

O schema Container é usado pelos seguintes componentes:

O schema Container é definido da seguinte maneira.

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    shownItems          // array of the displayed item IDs
}

Os seguintes events são relevantes para o schema do contêiner:

  • cmp:click
  • cmp:show
  • cmp:hide

Esquema de imagem

O esquema Imagem é usado pelo seguinte componente:

O esquema Imagem é definido da seguinte maneira.

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    image               // asset detail (see below section)
}

O seguinte event é relevante para o esquema Imagem:

  • cmp:click

Esquema de ativo

O esquema Ativo é usado dentro do componente Imagem.

O schema Ativo é definido da seguinte maneira.

id: {
    repo:id             // asset UUID
    repo:path           // asset path
    @type               // asset resource type
    xdm:tags            // asset tags
    repo:modifyDate
}

O seguinte event é relevante para o schema Asset :

  • cmp:click

Esquema do fragmento de conteúdo

O esquema Fragmento de conteúdo é usado pelo componente Fragmento de conteúdo.

O esquema Fragmento de conteúdo é definido da seguinte maneira.

id: {
    @type
    repo:modifyDate
    dc:title
    dc:description
    xdm:text
    xdm:linkURL
    parentId
    elements            // array of the Content Fragment elements
}

O esquema usado para o elemento do Fragmento de conteúdo é o seguinte.

{
    xdm:title           // title
    xdm:text            // text
}

Eventos dos componentes principais

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 evento e em seguida realizar uma ação com base no tipo de evento e/ou componente que acionou o evento. Isso evitará possíveis condições de corrida 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 acione um cmp:click evento.
  • cmp:show e cmp:hide - Manipular os componentes acordeão (expandir/recolher), carrossel (botões anterior/seguinte) e tabulação (seleção de tabulação) faz 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.

Eventos acionados pelo Componente

As tabelas a seguir listam 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

Informações do caminho do evento

Cada evento da camada de dados acionado por um Componente principal AEM incluirá uma carga com o seguinte objeto JSON:

eventInfo: {
    path: '<component-path>'
}

Onde <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 adicione-o à 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);
});

Tutorial

Deseja explorar a camada de dados e os componentes principais com mais detalhes? Dê uma olhada neste tutorial prático.

DICA

Para explorar a flexibilidade da camada de dados, analise as opções de integração, incluindo como ativar a camada de dados para seus componentes personalizados.

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now