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

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

Integrar AEM Headless e Target

Last update: Fri Jan 26 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Criado para:

  • Intermediate
  • Admin
  • Developer

[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. A variável React WKND App O é usado para explorar como uma atividade personalizada do Target usando Ofertas de fragmentos de conteúdo pode ser adicionada à 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 Cloud Service do Adobe Target às pastas do AEM Assets no AEM 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 no Experience Platform
  8. Integrar 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.

Revisão a documentação para obter instruções detalhadas 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.

Revisão 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. Efetue logon no Serviço de Autor do AEM como administrador do DAM
  2. Navegue até Ativos > 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ção superior
  4. Selecione o Cloud Service guia
  5. Verifique se a Configuração na nuvem está definida como configuração com reconhecimento de contexto (/conf) que contém a configuração do Adobe Target Cloud Service.
  6. Selecionar Adobe Target do Configurações do Cloud Service lista suspensa.
  7. Selecionar 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 Editor Função do produto 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. Selecionar Produtos e depois abra Adobe Target
  4. No Perfis de produto selecione Espaço de trabalho padrão
  5. Selecione o Credenciais da API guia
  6. Localize seu aplicativo developer.adobe.com nesta lista e defina seus Função do produto para 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

Fragmentos de conteúdo existentes no hierarquia de pastas configurada do AEM Assets pode ser exportado 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. Efetue logon no Autor do AEM como usuário do DAM

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

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

  4. Selecionar Exportar para ofertas do Adobe Target na barra de ação 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
      • Selecionar Visualizar ícone no painel lateral esquerdo
      • A representação JSON exportada para o Adobe Target é exibida na exibição principal

  5. Efetue 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. Certifique-se de que o Espaço de trabalho padrão esteja selecionado no Alternador de espaço de trabalho no canto superior direito.

  8. Selecione o Ofertas na navegação superior

  9. Selecione o Tipo lista suspensa e seleção 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 Exibir botão
    • Revise o Informações da oferta e consulte a Deep link 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 o Atividades na navegação superior

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

    • Este exemplo cria uma Teste A/B mas as ofertas de fragmento de conteúdo podem potencializar qualquer tipo de atividade

  3. No Criar atividade assistente

    • Selecionar Web
    • Entrada Escolher Experience Composer, selecione Formulário
    • Entrada Escolher espaço de trabalho, selecione Espaço de trabalho padrão
    • Entrada Escolher propriedade, selecione a Propriedade em que a Atividade está disponível ou selecione Sem restrições de propriedade para permitir que seja usado em todas as Propriedades.
    • Selecionar Próxima para criar a Atividade

  4. Renomear a atividade selecionando renomear no canto superior esquerdo

    • Nomeie a atividade de forma significativa

  5. Na experiência inicial, defina Local 1 para direcionamento da Atividade

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

  6. Em Conteúdo selecione o Default content e selecione Alterar fragmento do conteúdo

  7. Selecione o fragmento de conteúdo exportado para ser utilizado nessa 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. Selecionar Próxima e configurar 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. Selecionar Próxima e conclua as configurações da atividade

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

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

A atividade do Adobe Target direcionada ao wknd-adventure-promo A localização 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

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

Expandir para obter instruções passo a passo

  1. Navegue até Adobe Experience Cloud

  2. Abertura Experience Platform

  3. Selecionar Coleta de dados > Fluxos 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. Selecionar Salvar

  6. Selecionar Adicionar serviço

  7. Entrada Serviço selecionar Adobe Target

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

  8. Selecionar Salvar

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

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 de Adobe Experience Platform Web SDK. Essa abordagem pode ser usada para personalizar qualquer experiência da Web baseada em JavaScript.

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

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. Abrir base de código em ~/Code/aem-guides-wknd-graphql/personalization-tutorial em 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 Adobe Web SDK 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 é o ID da sequência de dados
    • orgId a ID da organização AEM as a Cloud Service/Target Adobe 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 no campo decisionScopes matriz.

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

Implementação

  1. Criar um componente do React AdobeTargetActivity.js 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. Criar um componente do React AdventurePromo.js para renderizar a aventura JSON Adobe Target serve.

    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. Adicionar o componente AdobeTargetActivity ao aplicativo React Home.js 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 o wknd-adventure-promo Atividade, 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