DocumentaçãoAEMTutoriais do AEMTutorials do AEM as a Cloud Service

[Integração]{class="badge positive"}

Integrar AEM Headless e Target

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Intermediário
  • Administrador
  • Desenvolvedor

[AEM Headless as a Cloud Service]{class="badge informative"}

Saiba como integrar o AEM headless ao Adobe Target, exportando fragmentos de conteúdo do AEM para o Adobe Target e usando-os para personalizar experiências headless usando o alloy.js do SDK da Web da Adobe Experience Platform. O Aplicativo WKND React é usado para explorar como uma atividade personalizada do Target usando Ofertas de fragmentos de conteúdo podem ser adicionadas à experiência, para promover uma aventura WKND.

https://video.tv.adobe.com/v/3422157/?quality=12&learn=on&captions=por_br

O tutorial aborda as etapas envolvidas na configuração do AEM e do Adobe Target:

  1. Criar configuração do Adobe IMS para o Adobe Target no AEM Author
  2. Criar Cloud Service Adobe Target no AEM Author
  3. Aplicar o Adobe Target Cloud Service às pastas do AEM Assets AEM no Author
  4. Permissão para o Cloud Service Adobe Target no Adobe Admin Console
  5. Exportar fragmentos de conteúdo do autor do AEM para o Target
  6. Criar uma atividade usando ofertas de fragmento de conteúdo no Adobe Target
  7. Criar uma sequência de dados de Experience Platform em Experience Platform
  8. Integre a personalização em um aplicativo AEM Headless baseado no React usando o SDK da Web do Adobe.

Configuração do Adobe IMS adobe-ims-configuration

Uma configuração do Adobe IMS que facilita a autenticação entre AEM e Adobe Target.

Consulte a documentação para obter instruções passo a passo sobre como criar uma configuração do Adobe IMS.

https://video.tv.adobe.com/v/3422144/?quality=12&learn=on&captions=por_br

Cloud Service Adobe Target adobe-target-cloud-service

Um Cloud Service do Adobe Target é criado no AEM para facilitar a exportação de fragmentos de conteúdo para o Adobe Target.

Consulte a documentação para obter instruções passo a passo sobre como criar um Cloud Service Adobe Target.

https://video.tv.adobe.com/v/3422652/?quality=12&learn=on&captions=por_br

Configurar pastas de ativos configure-asset-folders

O Cloud Service do Adobe Target, configurado em uma configuração sensível ao contexto, deve ser aplicado à hierarquia de pastas do AEM Assets que contém os fragmentos de conteúdo a serem exportados para o Adobe Target.

Expandir para obter instruções passo a passo
  1. Faça logon no serviço de Autor do AEM como administrador do DAM
  2. Navegue até Assets > Arquivos, localize a pasta de ativos que tem o /conf aplicado a
  3. Selecione a pasta de ativos e selecione Propriedades na barra de ações superior
  4. Selecione a guia Cloud Service
  5. Verifique se a Configuração na Nuvem está definida como a configuração com reconhecimento de contexto (/conf) que contém a configuração do Adobe Target Cloud Service.
  6. Selecione Adobe Target na lista suspensa Configurações de Cloud Service.
  7. Selecione Salvar e fechar na parte superior direita

https://video.tv.adobe.com/v/3422660/?quality=12&learn=on&captions=por_br

Permissão para integração com o AEM Target permission

A integração do Adobe Target, que se manifesta como um projeto developer.adobe.com, deve receber a função de produto Editor no Adobe Admin Console para exportar Fragmentos de conteúdo para o Adobe Target.

Expandir para obter instruções passo a passo
  1. Faça logon no Experience Cloud como usuário que pode administrar o produto Adobe Target no Adobe Admin Console
  2. Abra o Adobe Admin Console
  3. Selecione Produtos e abra o Adobe Target
  4. Na guia Perfis de Produto, selecione Espaço de Trabalho Padrão
  5. Selecione a guia Credenciais da API
  6. Localize seu aplicativo developer.adobe.com nesta lista e defina sua Função do produto como Editor

https://video.tv.adobe.com/v/3422136/?quality=12&learn=on&captions=por_br

Exportar fragmentos de conteúdo para o Target export-content-fragments

Os fragmentos de conteúdo que existem na hierarquia de pastas configurada do AEM Assets podem ser exportados para o Adobe Target como Ofertas de fragmento de conteúdo. Essas Ofertas de fragmento de conteúdo, uma forma especial de ofertas JSON no Target, podem ser usadas em atividades do Target para fornecer experiências personalizadas em aplicativos headless.

Expandir para obter instruções passo a passo

  1. Faça logon no AEM Author como usuário do DAM

  2. Navegue até Assets > Arquivos e localize os Fragmentos de conteúdo a serem exportados como JSON para o Target na pasta "Adobe Target habilitado"

  3. Selecione os fragmentos de conteúdo que serão exportados para o Adobe Target

  4. Selecione Exportar para Ofertas da Adobe Target na barra de ações superior

    • Essa ação exporta a representação JSON totalmente hidratada do fragmento de conteúdo para o Adobe Target como uma "Oferta de fragmento de conteúdo"

    • A representação JSON totalmente hidratada pode ser revista no AEM

      • Selecionar o fragmento de conteúdo
      • Expanda o painel lateral
      • Selecione o ícone Visualizar no painel lateral esquerdo
      • A representação JSON exportada para o Adobe Target é exibida na exibição principal

  5. Faça logon no Adobe Experience Cloud com um usuário na função de Editor do Adobe Target

  6. No Experience Cloud, selecione Target no alternador de produtos na parte superior direita para abrir o Adobe Target.

  7. Verifique se o Workspace Padrão está selecionado no alternador do Workspace na parte superior direita.

  8. Selecione a guia Ofertas na navegação superior

  9. Selecione a lista suspensa Tipo e selecione Fragmentos de conteúdo

  10. Verifique se o fragmento de conteúdo exportado do AEM aparece na lista

    • Passe o mouse sobre a oferta e selecione o botão Exibir
    • Revise as Informações da oferta e veja o deep link do AEM que abre o fragmento de conteúdo diretamente no serviço de autor do AEM

https://video.tv.adobe.com/v/3422676/?quality=12&learn=on&captions=por_br

Atividade do Target usando ofertas de fragmento de conteúdo activity

No Adobe Target, é possível criar uma Atividade que use a Oferta de fragmento de conteúdo JSON como conteúdo, permitindo experiências personalizadas em aplicativos headless com conteúdo criado e gerenciado no AEM.

Neste exemplo, usamos uma atividade A/B simples, no entanto, qualquer atividade do Target pode ser usada.

Expandir para obter instruções passo a passo

  1. Selecione a guia Atividades na navegação superior

  2. Selecione + Criar atividade e selecione o tipo de atividade a ser criada.

    • Este exemplo cria um Teste A/B simples, mas as Ofertas de fragmento de conteúdo podem potencializar qualquer tipo de atividade

  3. No assistente Criar atividade

    • Selecionar Web
    • Em Escolher Experience Composer, selecione Formulário
    • Em Escolher Workspace, selecione Workspace Padrão
    • Em Escolher Propriedade, selecione a Propriedade na qual a Atividade está disponível ou selecione Nenhuma Restrição de Propriedade para permitir que ela seja usada em todas as Propriedades.
    • Selecione Avançar para criar a Atividade

  4. Renomeie a atividade selecionando renomear no canto superior esquerdo

    • Nomeie a atividade de forma significativa

  5. Na Experiência inicial, defina Local 1 para a Atividade como destino

    • Neste exemplo, direcione a um local personalizado chamado wknd-adventure-promo

  6. Em Conteúdo, selecione o Conteúdo padrão e selecione Alterar fragmento de conteúdo

  7. Selecione o Fragmento de conteúdo exportado para servir para esta experiência e selecione Concluído

  8. Revise a Oferta JSON de fragmento de conteúdo na área de texto Conteúdo. Esse é o mesmo JSON disponível no serviço do Autor de AEM por meio da ação Visualizar do fragmento de conteúdo.

  9. No painel à esquerda, adicione uma Experiência e selecione uma Oferta de fragmento de conteúdo diferente para distribuir

  10. Selecione Avançar e configure as Regras de direcionamento conforme necessário para a atividade

    • Neste exemplo, deixe o teste A/B como uma divisão manual 50/50.

  11. Selecione Avançar e conclua as configurações da atividade

  12. Selecione Salvar e fechar e dê a ele um nome significativo

  13. Na Atividade no Adobe Target, selecione Ativar na lista suspensa Inativo/Ativar/Arquivar no canto superior direito.

A atividade do Adobe Target direcionada ao local wknd-adventure-promo agora pode ser integrada e exposta em um aplicativo AEM Headless.

https://video.tv.adobe.com/v/3422668/?quality=12&learn=on&captions=por_br

ID da sequência de dados do Experience Platform datastream-id

Uma ID de Sequência de dados do Adobe Experience Platform é necessária para que os aplicativos AEM Headless interajam com o Adobe Target usando o SDK da Web do Adobe.

Expandir para obter instruções passo a passo

  1. Navegue até Adobe Experience Cloud

  2. Abrir Experience Platform

  3. Selecione Coleção de dados > Sequências de dados e selecione Nova sequência de dados

  4. No assistente para Novo fluxo de dados, insira:

    • Nome: AEM Target integration
    • Descrição: Datastream used by the Adobe Web SDK to serve personalized Content Fragments Offers.
    • Esquema de Evento: Leave blank

  5. Selecione Salvar

  6. Selecione Adicionar Serviço

  7. Em Serviço, selecione Adobe Target

    • Habilitado: Sim
    • Token de propriedade: Deixe em branco
    • ID do Ambiente de Destino: Deixe em branco
      • O Ambiente de Destino pode ser definido no Adobe Target em Administração > Hosts.
    • Namespace de ID de terceiros de destino: Deixe em branco

  8. Selecione Salvar

  9. No lado direito, copie a ID da sequência de dados para uso na chamada de configuração do SDK da Web do Adobe.

https://video.tv.adobe.com/v/3422179/?quality=12&learn=on&captions=por_br

Adicionar personalização a um aplicativo AEM Headless code

Este tutorial explora a personalização de um aplicativo React simples usando Ofertas de fragmento de conteúdo no Adobe Target por meio do Adobe Experience Platform Web SDK. Essa abordagem pode ser usada para personalizar qualquer experiência da Web com base no JavaScript.

As experiências móveis da Android™ e da iOS podem ser personalizadas seguindo padrões semelhantes usando o SDK móvel do Adobe.

Pré-requisitos

Configurar

  1. Baixe o código fonte para a amostra do aplicativo React de Github.com

    code language-shell 
    $ mkdir -p ~/Code
$ git clone git@github.com:adobe/aem-guides-wknd-graphql.git

  2. Abra a base de código em ~/Code/aem-guides-wknd-graphql/personalization-tutorial no seu IDE favorito

  3. Atualize o host do serviço AEM ao qual você deseja que o aplicativo se conecte ~/Code/aem-guides-wknd-graphql/personalization-tutorial/src/.env.development

    code language-none 
    ...
REACT_APP_HOST_URI=https://publish-p1234-e5678.adobeaemcloud.com/
...

  4. Execute o aplicativo e verifique se ele está conectado ao serviço AEM configurado. Na linha de comando, execute:

    code language-shell 
    $ cd ~/Code/aem-guides-wknd-graphql/personalization-tutorial
$ npm install
$ npm run start

  5. Instale o SDK da Web do Adobe como um pacote NPM.

    code language-shell 
    $ cd ~/Code/aem-guides-wknd-graphql/personalization-tutorial
$ npm install @adobe/alloy

    O SDK da Web pode ser usado no código para buscar o JSON da oferta de fragmento de conteúdo por local de atividade.

    Ao configurar o SDK da Web, há duas IDs necessárias:

    • edgeConfigId que é a ID da sequência de dados
    • orgId a ID da Organização de Adobe do AEM as a Cloud Service/Target que pode ser encontrada em Experience Cloud > Perfil > Informações da conta > ID da Organização Atual

    Ao invocar o SDK da Web, o local da atividade do Adobe Target (em nosso exemplo, wknd-adventure-promo) deve ser definido como o valor na matriz decisionScopes.

    code language-javascript 
    import { createInstance } from "@adobe/alloy";
const alloy = createInstance({ name: "alloy" });
...
alloy("config", { ... });
alloy("sendEvent", { ... });

Implementação

  1. Crie um componente AdobeTargetActivity.js do React para exibir atividades do Adobe Target.

    src/components/AdobeTargetActivity.js

    code language-javascript 
    import React, { useEffect } from 'react';
import { createInstance } from '@adobe/alloy';

const alloy = createInstance({ name: 'alloy' });

alloy('configure', {
  'edgeConfigId': 'e3db252d-44d0-4a0b-8901-aac22dbc88dc', // AEP Datastream ID
  'orgId':'7ABB3E6A5A7491460A495D61@AdobeOrg',
  'debugEnabled': true,
});

export default function AdobeTargetActivity({ activityLocation, OfferComponent }) {
  const [offer, setOffer] = React.useState();

  useEffect(() => {
    async function sendAlloyEvent() {
      // Get the activity offer from Adobe Target
      const result = await alloy('sendEvent', {
        // decisionScopes is set to an array containing the Adobe Target activity location
        'decisionScopes': [activityLocation],
      });

      if (result.propositions?.length > 0) {
        // Find the first proposition for the active activity location
        var proposition = result.propositions?.filter((proposition) => { return proposition.scope === activityLocation; })[0];

        // Get the Content Fragment Offer JSON from the Adobe Target response
        const contentFragmentOffer = proposition?.items[0]?.data?.content || { status: 'error', message: 'Personalized content unavailable'};

        if (contentFragmentOffer?.data) {
          // Content Fragment Offers represent a single Content Fragment, hydrated by
          // the byPath GraphQL query, we must traverse the JSON object to retrieve the
          // Content Fragment JSON representation
          const byPath = Object.keys(contentFragmentOffer.data)[0];
          const item = contentFragmentOffer.data[byPath]?.item;

          if (item) {
            // Set the offer to the React state so it can be rendered
            setOffer(item);

            // Record the Content Fragment Offer as displayed for Adobe Target Activity reporting
            // If this request is omitted, the Target Activity's Reports will be blank
            alloy("sendEvent", {
                xdm: {
                    eventType: "decisioning.propositionDisplay",
                    _experience: {
                        decisioning: {
                            propositions: [proposition]
                        }
                    }
                }
            });
          }
        }
      }
    };

    sendAlloyEvent();

  }, [activityLocation, OfferComponent]);

  if (!offer) {
    // Adobe Target offer initializing; we render a blank component (which has a fixed height) to prevent a layout shift
    return (<OfferComponent></OfferComponent>);
  } else if (offer.status === 'error') {
    // If Personalized content could not be retrieved either show nothing, or optionally default content.
    console.error(offer.message);
    return (<></>);
  }

  console.log('Activity Location', activityLocation);
  console.log('Content Fragment Offer', offer);

  // Render the React component with the offer's JSON
  return (<OfferComponent content={offer} />);
};

    O componente AdobeTargetActivity React é chamado da seguinte maneira:

    code language-jsx 
    <AdobeTargetActivity activityLocation={"wknd-adventure-promo"} OfferComponent={AdventurePromo}/>

  2. Crie um componente React AdventurePromo.js para renderizar os servidores JSON Adobe Target de aventura.

    Este componente React pega o JSON totalmente hidratado, representando um fragmento de conteúdo de aventura, e exibindo de uma maneira promocional. Os componentes do React que exibem o JSON fornecido pelas Ofertas de fragmento de conteúdo do Adobe Target podem ser tão variados e complexos quanto necessário com base nos Fragmentos de conteúdo exportados para o Adobe Target.

    src/components/AdventurePromo.js

    code language-javascript 
    import React from 'react';

import './AdventurePromo.scss';

/**
* @param {*} content is the fully hydrated JSON data for a WKND Adventure Content Fragment
* @returns the Adventure Promo component
*/
export default function AdventurePromo({ content }) {
    if (!content) {
        // If content is still loading, then display an empty promote to prevent layout shift when Target loads the data
        return (<div className="adventure-promo"></div>)
    }

    const title = content.title;
    const description = content?.description?.plaintext;
    const image = content.primaryImage?._publishUrl;

    return (
        <div className="adventure-promo">
            <div className="adventure-promo-text-wrapper">
                <h3 className="adventure-promo-eyebrow">Promoted adventure</h3>
                <h2 className="adventure-promo-title">{title}</h2>
                <p className="adventure-promo-description">{description}</p>
            </div>
            <div className="adventure-promo-image-wrapper">
                <img className="adventure-promo-image" src={image} alt={title} />
            </div>
        </div>
    )
}

    src/components/AdventurePromo.scss

    code language-css 
    .adventure-promo {
    display: flex;
    margin: 3rem 0;
    height: 400px;
}

.adventure-promo-text-wrapper {
    background-color: #ffea00;
    color: black;
    flex-grow: 1;
    padding: 3rem 2rem;
    width: 55%;
}

.adventure-promo-eyebrow {
    font-family: Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight: 700;
    font-size: 1rem;
    margin: 0;
    text-transform: uppercase;
}

.adventure-promo-description {
    line-height: 1.75rem;
}

.adventure-promo-image-wrapper {
    height: 400px;
    width: 45%;
}

.adventure-promo-image {
    height: 100%;
    object-fit: cover;
    object-position: center center;
    width: 100%;
}

    Esse componente do React é chamado da seguinte maneira:

    code language-jsx 
    <AdventurePromo adventure={adventureJSON}/>

  3. Adicione o componente AdobeTargetActivity ao Home.js do aplicativo React acima da lista de aventuras.

    src/components/Home.js

    code language-javascript 
    import AdventurePromo from './AdventurePromo';
import AdobeTargetActivity from './AdobeTargetActivity';
...
export default function Home() {
    ...
    return(
        <div className="Home">

          <AdobeTargetActivity activityLocation={"wknd-adventure-promo"} OfferComponent={AdventurePromo}/>

          <h2>Current Adventures</h2>
          ...
    )
}

  4. Se o aplicativo React não estiver em execução, reinicie usando npm run start.

    Abra o aplicativo React em dois navegadores diferentes para que o teste A/B forneça experiências diferentes a cada navegador. Se ambos os navegadores mostrarem a mesma oferta de aventura, tente fechar/reabrir um dos navegadores até que a outra experiência seja exibida.

    A imagem abaixo mostra as duas Ofertas de Fragmento de Conteúdo diferentes exibidas para a Atividade wknd-adventure-promo, com base na lógica do Adobe Target.

    Ofertas de experiência

Parabéns.

Agora que configuramos o AEM as a Cloud Service para exportar fragmentos de conteúdo para o Adobe Target, usamos as Ofertas de fragmentos de conteúdo em uma Atividade do Adobe Target AEM e vimos essa Atividade em um aplicativo Headless, personalizando a experiência.

recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69