Show Menu
TOPICS×

Usando a camada de dados do cliente Adobe para integrar componentes principais e inicialização de Adobe

Os Componentes principais podem ser integrados ao Adobe Launch usando a Camada de dados do cliente Adobe. Este documento descreve como configurar o Adobe Launch para rastrear eventos click para componentes de imagem como um exemplo.
Quando configurado, o Launch produzirá a seguinte saída no console do navegador quando um componente de Imagem principal for clicado.

Iniciar integração com AEM

A primeira inicialização de Adobe deve ser integrada ao seu site de AEM.

Etapa 1 - Criar uma integração em E/S de Adobe

Primeiro, faça logon na E/S do Adobe para o start, configurando uma integração.
  1. Ir para
    https://console.adobe.io
    .
  2. Faça logon usando seu Adobe ID.
  3. Na seção Start rápido, clique em
    Criar integração
    .
  4. Select
    Access an API
    and click
    Continue
    .
  5. Selecione
    Experience Platform Launch API
    abaixo de Adobe Experience Platform e clique em
    Continuar
    .

Etapa 2 - Criar uma configuração IMS no AEM

AEM é necessário definir a integração que você começou a configurar na E/S do Adobe.
  1. Vá para o home page AEM, clique em
    Ferramentas -> Segurança -> Configurações
    IMS do Adobe.
  2. Clique em
    Criar
    .
  3. Como Solução
    da
    Cloud, selecione
    Adobe Launch
    .
  4. Check
    Create new certificate
    .
  5. Insira um alias para o certificado, como
    aem-launch-certificate
    .
  6. Clique em
    Criar certificado
    e, no pop-up, clique em
    OK
    para criar o certificado.
  7. Clique em
    Baixar chave
    pública e, no pop-up, clique em
    Baixar
    .

Etapa 3 - Concluir a configuração de E/S do Adobe

Com o certificado e a chave criados na configuração AEM IMS, você pode concluir a configuração de E/S do Adobe.
  1. Volte para o console E/S do Adobe como na etapa 1.
  2. Na janela
    Criar uma nova integração
    , digite um nome e uma descrição, como
    AEM Camada
    de dados Iniciar.
  3. Em Certificados
    de chaves
    públicas, carregue o certificado criado na etapa 2.
  4. Selecione
    Iniciar - perfil
    Prod.
  5. Click
    Create integration
    .
  6. Clique em
    Continuar para obter os detalhes
    da integração. Você precisará desses detalhes mais tarde para concluir a configuração do IMS na sua instância AEM.

Etapa 4 - Concluir a configuração do IMS

Com os detalhes da integração de E/S do Adobe, você pode concluir a configuração AEM IMS.
  1. Na guia AEM, na guia
    Adobe IMS Technical Account Configuration
    (Configuração técnica da conta IMS), na etapa 2,
    clique em
    Next (Avançar).
  2. Digite um título como configuração
    IMS para o Adobe Launch
    .
  3. Na guia E/S do Adobe, copie a chave da
    API (ID do cliente)
    .
  4. Na guia AEM, cole a tecla copiada anterior no campo
    Chave
    da API.
  5. Na E/S do Adobe, clique em
    Recuperar segredo
    do cliente e copie-o.
  6. Na guia AEM, cole-o no campo Segredo do
    cliente
    .
  7. Na guia E/S do Adobe, selecione a guia
    JWT
    e copie o URL, como
    https://ims-na1.adobelogin.com
    .
  8. Na guia AEM, cole o URL no campo Servidor
    de
    autorização.
  9. Na guia E/S do Adobe, copie a carga do JWT (o código entre as chaves).
  10. Na guia AEM, cole-o no campo
    Carga
    .
  11. Clique em
    Criar
    para criar a configuração IMS no AEM.

Etapa 5a - Criar uma propriedade no lançamento do Adobe

Uma propriedade define os recursos que o Launch pode injetar no site.
  1. Vá para Adobe Launch em
    https://launch.adobe.com
    .
  2. Faça logon usando seu Adobe ID.
  3. Clique em
    Nova propriedade
    .
  4. Insira um nome como
    Iniciar AEM camada
    de dados.
  5. Insira seu domínio.
  6. Clique em
    Salvar
    .

Etapa 5b - Criar uma regra ao iniciar

Usando a propriedade criada, é possível definir uma regra, que especifica o que deve ocorrer quando uma ação ocorrer.
  1. Clique na propriedade recém-adicionada da etapa 5
    Iniciar AEM camada
    de dados.
  2. Selecione a guia
    Regras
    e clique em
    Criar nova regra
    .
  3. Digite um nome como
    image-click
    .
  4. Clique no botão
    +
    abaixo de
    Eventos
    .
  5. Selecione
    Core
    como
    extensão
    ,
    clique
    como
    Tipo de evento
    e digite
    .cmp-image
    ​como seletor de CSS.
  6. Clique em
    Manter alterações
    .
  7. Clique no botão
    +
    abaixo de
    Ações
    .
  8. Selecione
    Principal
    como
    Extensão
    , Código
    ​personalizado como Tipo
    de
    ação e clique em
    Abrir editor
    .
  9. No editor, insira o seguinte código:
    console.log("DOM click event tracked by Launch for image: ", event.target.src);
  10. Clique em
    Salvar
    .
  11. Clique em
    Manter alterações
    .
  12. Clique em
    Salvar
    para criar a nova regra.

Etapa 6 - Publicar a regra de inicialização

Para tornar a nova regra disponível para o seu site AEM, é necessário publicá-la.
  1. Na guia Inicialização
    do
    Adobe, selecione a guia
    Publicação
    .
  2. Clique em
    Adicionar nova biblioteca
    .
  3. Digite um
    Nome
    conforme apropriado, como
    demo-1
    .
  4. Para selecionar o
    Ambiente
    como apropriado, como
    Desenvolvimento (desenvolvimento)
    .
  5. Clique em
    Adicionar um recurso
    .
  6. Selecione
    Regras -> clique na imagem -> Mais recente
    e clique em
    Selecionar e criar uma nova revisão
    .
  7. Clique em
    Salvar e criar para desenvolvimento
    .
  8. No pop-up, clique em
    Aplicar atualizações e Continuar
    .
  9. Quando a biblioteca for criada, clique no ícone de reticências e selecione
    Enviar para aprovação
    .
  10. No pop-up, clique em
    Enviar
    .
  11. Clique no ícone de reticências e selecione
    Criar para armazenamento temporário
    .
  12. Quando a compilação for concluída, clique no ícone de reticências e selecione
    Aprovar para publicação
    .
  13. No pop-up, clique em
    Aprovar
    .
  14. Clique no ícone de reticências e selecione
    Criar e publicar na produção
    .
  15. No pop-up, clique em
    Publicar
    .

Etapa 7 - Habilitar configurações em nuvem para seu site

Para usar a integração, ela precisa ser atribuída em AEM como uma configuração em nuvem.
  1. No console AEM, clique em
    Ferramentas -> Geral -> Navegador
    de configuração.
  2. Verifique os exemplos
    de componentes
    principais e clique em
    Propriedades
    .
  3. Verifique as Configurações
    da
    nuvem e clique em
    Salvar e fechar
    .

Etapa 8 - Criar uma integração de inicialização com seu site em AEM

Uma integração do Launch é necessária para AEM trabalhar com o Launch
  1. No console AEM, clique em
    Ferramentas -> Cloud Services -> Configurações
    de inicialização do Adobe.
  2. Selecione Exemplos
    de componentes
    principais e clique em
    Criar
    .
  3. Insira um
    Título
    como, por exemplo, Configuração
    de
    inicialização.
  4. Selecione a configuração IMS que você criou na etapa 4.
  5. Como
    Empresa
    , selecione conforme apropriado.
  6. Como
    Propriedade
    , selecione a propriedade Launch recém-adicionada criada na etapa 5.
  7. Mova o controle deslizante
    Incluir código de produção do autor
    para a direita e clique em
    Avançar
    .
  8. Clique em
    Avançar
    .
  9. Clique em
    Avançar
    .
  10. Clique em
    Criar
    .

Etapa 9 - Conecte seu site AEM à integração do Launch

Para AEM usar a integração do Launch, é necessário atribuí-la como uma configuração de nuvem.
  1. No console AEM, clique em
    Sites
    e verifique o site
    dos
    Componentes principais.
  2. Clique em
    Propriedades
    .
  3. Select the
    Advanced
    tab.
  4. Como Configuração
    da
    Cloud, selecione os Exemplos
    de componentes
    principais e clique em
    Selecionar
    .
  5. Clique em
    Salvar e fechar
    .

Etapa 10 - Verificar se a lógica de inicialização é aplicada à página

Teste se as etapas foram bem-sucedidas até agora.
  1. Abra a página Imagem da Biblioteca de componentes principais no modo de pré-visualização:
    http://<lhost&gt;:<port&gt;/editor.html/content/core-components-examples/library/page-authoring/image.html
  2. Clique em uma imagem e verifique se a mensagem
    A Core Image was clicked
    é exibida no console do navegador.

Iniciar a integração com AEM e a camada de dados

Agora que a Integração entre o AEM e o Launch está configurada, podemos fazer a integração com a camada de dados.

Etapa 1 - Criar uma regra no Adobe Launch

Repita as etapas na etapa 5 para adicionar uma nova regra na inicialização do Adobe usando os seguintes valores.
  • Nome:
    image-click-data-layer
  • EVENTOS:
    • Extensão: Núcleo
    • Tipo de evento: DOM Ready
  • AÇÕES:
    • Extensão: Núcleo
    • Tipo de ação: Código personalizado
    • Código:
      function onImageClick(event) { console.log("Data layer click event tracked by Launch for image: " + event.info.path); console.log("dataLayer.getState(): ", adobeDataLayer.getState()); } adobeDataLayer.addEventListener('image clicked', onImageClick);

Etapa 2 - Publicar a regra de inicialização para torná-la disponível ao seu site AEM

Repita as etapas na etapa 6 para publicar a nova regra.

Etapa 3 - Verificar se a lógica de inicialização é aplicada à página

  1. Abra a página Imagem da Biblioteca de componentes principais no modo de pré-visualização:
    http://<host&gt;:<port&gt;/editor.html/content/core-components-examples/library/page-authoring/image.html
  2. Clique em uma imagem e verifique se a seguinte mensagem é exibida no console do navegador: