Show Menu
TOPICS×

Usar a camada de dados do cliente Adobe para integrar componentes principais e o Adobe Launch

Os Componentes principais podem ser integrados ao Adobe Launch usando a Adobe Client Data Layer. Este documento descreve como configurar o Adobe Launch para rastrear eventos de clique 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 o AEM

O primeiro Adobe Launch deve ser integrado ao site do AEM.

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

Primeiro, faça logon na E/S da Adobe para que o start configure uma integração.
  1. Ir para
    https://console.adobe.io
    .
  2. Faça logon usando sua 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 da Adobe Experience Platform e clique em
    Continuar
    .

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

No AEM, é necessário definir a integração que você começou a configurar na E/S da Adobe.
  1. Vá para o home page AEM, clique em
    Ferramentas -> Segurança -> Configurações
    do Adobe IMS.
  2. Clique em
    Criar
    .
  3. Como solução
    da
    Cloud, selecione
    Adobe Launch
    .
  4. Marque
    Criar novo certificado
    .
  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 da Adobe

Com o certificado e a chave criados na configuração do AEM IMS, você pode concluir a configuração de E/S da Adobe.
  1. Volte para o console de E/S da Adobe como na etapa 1.
  2. Na janela
    Criar uma nova integração
    , digite um nome e uma descrição, como camada
    de dados do
    AEM Launch.
  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 do AEM.

Etapa 4 - Concluir a configuração do IMS

Com os detalhes da integração de E/S da Adobe, você pode concluir a configuração do AEM IMS.
  1. Na guia AEM, na guia
    Adobe IMS Technical Account Configuration (Configuração
    de conta técnica do Adobe 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 da Adobe, copie a chave da
    API (ID do cliente)
    .
  4. Na guia AEM, cole a chave copiada anterior no campo
    Chave
    da API.
  5. Em E/S da 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 da 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 da Adobe, copie a carga 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 Adobe Launch

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 sua Adobe ID.
  3. Clique em
    Nova propriedade
    .
  4. Digite um nome como
    Iniciar a camada
    de dados do AEM.
  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 a camada
    de dados do AEM.
  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 disponibilizar a nova regra para o site do AEM, é necessário publicá-la.
  1. Na guia
    Adobe Launch
    , 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 no AEM como uma configuração de nuvem.
  1. No console do 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 no AEM

Uma integração do Launch é necessária para que o AEM funcione com o Launch
  1. No console do AEM, clique em
    Ferramentas -> Serviços em nuvem -> Configurações
    do Adobe Launch.
  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 do AEM à integração do Launch

Para que o AEM use a integração do Launch, ele precisa ser atribuído como uma configuração em nuvem.
  1. No console do AEM, clique em
    Sites
    e verifique o site
    Principais
    componentes.
  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. Click
    Save & Close
    .

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 o 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 no Adobe Launch 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 - Publique a regra de inicialização para disponibilizá-la ao site do 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: