Personalização de conteúdo do AEM Mobile

O recurso de personalização de conteúdo da AEM Mobile permite que Autores do AEM personalizem o conteúdo do aplicativo móvel ao utilizar Adobe Target. Isso permite o delivery de ofertas direcionadas para usuários de aplicativos móveis. A Adobe Experience Manager Mobile oferece a capacidade de criar, público alvo e fornecer conteúdo que fornecerá ao usuário conteúdo específico para seus próprios gostos individuais.

Como acontece frequentemente em AEM, para que os autores comecem a criar esse conteúdo, os administradores e desenvolvedores precisam primeiro preparar o ambiente.

AEM os administradores precisam estabelecer uma conexão entre a AEM Mobile e o Cloud Service Adobe Target.

Enquanto isso, os desenvolvedores da AEM Mobile 🔗 precisam modificar seus scripts existentes para facilitar a criação de conteúdo direcionado.

Para administradores

Há várias etapas que precisam ser reunidas antes que os autores de conteúdo possam gerar start de conteúdo direcionado para aplicativos móveis: Há o conjunto correto de permissões para usuários e grupos, a criação de serviços em nuvem, a configuração do aplicativo para a atividade e, por fim, a geração do conteúdo.

Este artigo o guiará pelo processo usado para configurar o Aplicativo de referência híbrido AEM Mobile para definição de metas.

A suposição a seguir é que o Aplicativo AEM Mobile Hybrid Reference foi implantado e acessível com êxito por meio do Painel AEM Mobile.

Antes que os autores possam gerar conteúdo direcionado dentro de um aplicativo, sua instância AEM precisa estar configurada com o Cloud Service Adobe Target.

Permissões

Os usuários que precisam de acesso ao console de personalização precisam fazer parte do grupo target-activity-authors.

Sugere-se que, como parte da configuração de usuários e grupos, o público alvo-atividade-grupo seja adicionado ao grupo apps-admins. Ao adicionar o grupo públicos alvos-atividades-autores, isso permitirá que os usuários possam ver a entrada do menu de navegação Personalização.

Cloud Services

Para obter conteúdo direcionado trabalhando para aplicativos móveis, há dois serviços que precisam ser configurados: O serviço Adobe Target e o serviço Adobe Mobile Services. O Adobe Target Service fornece o mecanismo para processar solicitações de clientes e retornar o conteúdo personalizado. O serviço Adobe Mobile Services fornece a conexão entre os serviços do Adobe e o aplicativo móvel por meio do arquivo ADBMobileConfig.json, que é consumido pelo plug-in do Cordova do AMS. No Painel AEM Mobile, você pode configurar seu aplicativo adicionando os dois serviços.

No Painel AEM Mobile, localize os Cloud Services Manage e clique no botão +.

No assistente Adicionar Cloud Service, selecione a placa de serviço em nuvem "Adobe Target" e clique em Avançar.

Na lista suspensa Selecionar uma configuração, é possível criar uma nova configuração ou selecionar uma configuração existente. Para criar uma nova configuração, selecione "Criar configuração" na lista suspensa. Digite um título para a configuração do Público alvo. Insira o código do cliente, o email e a senha associados à sua conta do Público alvo. Se você não souber os valores desses campos, entre em contato com o suporte da Adobe Target. Clique no botão "Verificar" para validar as credenciais. Depois de verificado, clique no botão Enviar para criar o serviço de nuvem.

Após a conclusão do assistente, o bloco Gerenciar Cloud Service conterá o serviço de nuvem do Público alvo, no entanto, ele contém um aviso sobre a falta de uma conta do Adobe Mobile Service.

Adobe Mobile Services

É necessário vincular uma conta do Adobe Mobile Services (AMS) ao aplicativo também, o serviço AMS fornece o arquivo ADBMobileConfig.json necessário que contém as informações do código do cliente do Público alvo. Antes de criar uma associação com a conta AMS, a conta AMS precisa ser modificada por um usuário que tenha permissões para o AMS.

Código do cliente

Para fazer logon nos serviços AMS, visite https://mobilemarketing.adobe.com, selecione o aplicativo móvel e clique nas configurações. Localize o campo Opções de Público alvo do SDK, coloque o código do cliente no campo e clique em Salvar.

Agora que o código do cliente foi associado ao aplicativo móvel, quando o serviço de nuvem do AMS é configurado por meio do Painel Adobe Mobile, as configurações do serviço serão fornecidas por meio do arquivo ADBMobileConfig.json.

Adobe Mobile Service Cloud Service

Agora que o AMS foi configurado, é hora de associar o aplicativo móvel ao Painel Adobe Mobile. No Painel AEM Mobile, localize os Cloud Services Manage e clique no botão +.

Selecione o cartão Adobe Mobile Services e clique em Avançar.

Na etapa do assistente Criar ou Selecionar, selecione o menu suspenso Mobile Service e selecione a entrada Criar configuração. Forneça um título, empresa, nome de usuário, senha e selecione o centro de dados apropriado. Se você não souber esses valores, entre em contato com o administrador do Adobe Mobile Service para obtê-los. Depois que todos os campos tiverem sido preenchidos, clique no botão Verificar. O processo de verificação vai para o AMS e verifica as credenciais para a conta, e, após a validação bem-sucedida, uma lista de Aplicativos Móveis será preenchida onde você seleciona o aplicativo móvel associado na lista suspensa. Clique no botão Enviar para concluir o assistente. O processo pode levar algum tempo para obter os dados de configuração e qualquer análise associada ao aplicativo. Quando o processo estiver concluído, clique no botão Concluído do modal para retornar ao Painel Adobe Mobile.

Retornando ao Painel móvel, o bloco Gerenciar Cloud Services conterá o serviço de nuvem AMS. Você também observará que o bloco Analisar métricas será preenchido com relatórios de ciclo de vida.

Para autores

Pré-requisito: Conforme mencionado acima, os administradores precisam configurar a conexão com o Serviço Adobe Target antes que os autores possam gerar um novo conteúdo direcionado.

Depois que o Administrador tiver configurado os dois serviços em nuvem e o desenvolvedor tiver configurado o manipulador mobileappoffers, os autores de conteúdo agora poderão gerar start que gerem experiências direcionadas.

A criação de conteúdo direcionado em um aplicativo AEM Mobile segue um procedimento semelhante ao da criação do AEM Sites:

Consulte aqui para obter uma visão geral completa sobre Criação de conteúdo direcionado em AEM

Para desenvolvedores

AEM desenvolvedores que criam aplicativos móveis devem continuar a seguir os padrões comumente usados no AEM ao desenvolver componentes. Aqui, nós o guiaremos pelas etapas necessárias para permitir que os autores de conteúdo criem conteúdo direcionado:

Manipuladores do Adobe Target ContentSync

Para fornecer conteúdo ao conteúdo do dispositivo do usuário, é gerado renderizando as ofertas criadas por autores de conteúdo AEM. Para lidar com a renderização do público alvo oferta, há um novo manipulador de sincronização de conteúdo que processará o oferta. Usando o Aplicativo de referência híbrido como nossa amostra, o pacote de conteúdo en (inglês) contém o ContentSyncConfig com um manipulador mobileappoffers. A próxima etapa é crucial para renderizar ofertas ao dispositivo. O manipulador mobileappoffers tem uma propriedade path que identifica o caminho para a atividade de personalização a ser usada para o aplicativo.

Por exemplo, se houver uma atividade localizada em /content/campanha/hybridref copie esse caminho e cole-o como o valor para a propriedade path do manipulador mobileappoffers.

Depois que o caminho do atividade for definido na propriedade path do manipulador mobileappoffers, salve o manipulador. O manipulador agora estará pronto para start de ofertas de renderização para nossos dispositivos móveis.

Modo de renderização

O manipulador mobileappoffers está configurado de forma diferente para configurações de publicação e desenvolvimento. Para configurações de publicação, há uma propriedade chamada renderMode com um valor de publish definido no nó cq:ContentSyncConfig. O manipulador mobileappoffers faz referência ao renderMode e, se definido para publicar, modificará a ID da mbox que é criada. Por padrão, as mboxes criadas por AEM têm um valor —author anexado à ID da mbox. Isso identifica que a atividade não foi publicada e deve usar a campanha não publicada para resoluções de oferta.

Quando o conteúdo é preparado por meio do Painel Adobe Mobile, o conteúdo preparado é considerado como conteúdo pronto para produção e é renderizado por meio da configuração de sincronização de conteúdo não dev. A renderização dessa forma fará com que o —autor seja removido de todas as IDs da mbox e espera que uma atividade publicada esteja disponível no servidor do Público alvo. Antes de testar o conteúdo preparado, verifique se a atividade foi publicada.

Desenvolvimento de aplicativos de personalização

Componentes

A base para qualquer conteúdo normalmente é um componente de página que estende um dos componentes básicos AEM página wcm/base/components/page ou fundação/componentes/página, dependendo se você estiver usando HTL ou JSPs. A duração dessas etapas se concentrará no uso do wcm/base/componentes/componente de página. A estrutura básica do componente de página é dividida em vários scripts, com cada script fornecendo a finalidade específica de permitir que o desenvolvedor organize e substitua seu código, se necessário. Os dois scripts de interesse para a Personalização são head.html e body.html. Esses dois scripts fornecem uma área onde o código pode ser inserido para suportar a criação do Context Hub, Cloud Services e Mobile.

Esta é uma visão geral dos dois scripts principais usados para ativar a definição de metas de conteúdo.

head.html

Para fornecer ao autor a capacidade de público alvo de seu conteúdo, o menu público alvo precisa ser adicionado à página para que o autor possa alterar o contexto do modo de edição para o modo de definição de metas. Para ativar esse recurso, o desenvolvedor deve modificar o script head.html para incluir o seguinte trecho de código próximo à parte superior do elemento head.html ou o mais próximo possível do elemento <title></title>.

<meta data-sly-test="${!wcmmode.disabled}">
    <div data-sly-call="${clientLib.all @ categories='personalization.kernel'}" data-sly-unwrap></div>
    <div data-sly-resource="${'config' @ resourceType='cq/personalization/components/clientcontext_optimized/config'}" data-sly-unwrap></div>
    <div data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}" data-sly-unwrap></div>
</meta>

Para fornecer aos autores a capacidade de pré-visualização do conteúdo direcionado, o editor precisa ser capaz de localizar a configuração do serviço de nuvem da Adobe Target. O bloco de código abaixo adiciona dois scripts importantes. A primeira adição da capacidade da página de localizar o serviço de nuvem de Públicos alvos associado e realizar as chamadas para a Adobe Target. A segunda é a adição da categoria cq.apps.targeting.

A categoria cq.apps.targeting substitui o componente cq/personalization/component/público alvo padrão e usa o componente mobileapps/components/público alvo que renderiza ofertas especificamente para consumo de aplicativos móveis. Mais detalhes sobre isso serão discutidos na seção Componente do Público alvo.

O código deve ser adicionado em head.html e colocado logo antes do final do elemento </head>.

<div data-sly-test="${!wcmmode.disabled}">
    <div data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" data-sly-unwrap></div>
    <meta data-sly-call="${clientLib.all @ categories='cq.apps.targeting'}" data-sly-unwrap></meta>
</div>

body.html

Para permitir que o autor do conteúdo possa testar diferentes personas, o script body.html precisa incluir o seguinte bloco de código como o primeiro filho do elemento body.

<div data-sly-test="${!wcmmode.disabled}">
    <div data-sly-resource="${'clientcontext' @ resourceType='cq/personalization/components/clientcontext_optimized'}" data-sly-unwrap></div>
</div>

O último pedaço de código necessário está na parte inferior do body.html. Esse pedaço de código procura o serviço de nuvem associado e injeta o código do mecanismo de direcionamento apropriado.

<div data-sly-test="${!wcmmode.disabled}">
    <div data-sly-resource="${'cloudservices' @ resourceType='cq/cloudserviceconfigs/components/servicecomponents'}" data-sly-unwrap></div>
</div>

Aplicativo de referência

Exemplos de head.html e body.html podem ser encontrados no Aplicativo de referência híbrida da AEM Mobile mostrando o desenvolvedor onde colocar os blocos de script nos dois scripts.

Manipuladores de sincronização de conteúdo

Quando o autor do conteúdo terminar de criar conteúdo para o aplicativo móvel, a próxima etapa é baixar a fonte e criar o aplicativo ou preparar o conteúdo a ser publicado. Há várias etapas que o desenvolvedor está envolvido para fazer isso acontecer. Para auxiliar na renderização do conteúdo, o AEM Mobile utiliza manipuladores de sincronização de conteúdo para renderizar e empacotar o conteúdo. Um novo manipulador de sincronização de conteúdo foi introduzido para o caso de uso de Personalização para renderizar o conteúdo direcionado. O manipulador 'mobileappoffers' sabe como renderizar as ofertas de público alvo associadas que foram criadas pelo autor do conteúdo. O manipulador mobileappoffers estende o manipulador de atualização de páginas abstratas, portanto, muitas das propriedades são semelhantes. Os detalhes do manipulador mobileappoffers têm as seguintes propriedades.

Componente do público alvo

Para ajudar a renderizar conteúdo especificamente para aplicativos móveis, a AEM Mobile usa o componente mobileapps/components/público alvo. O componente de público alvo móvel estende o componente cq/personalization/components/público alvo e substitui o script engine_tnt.jsp. Substituindo o engine_tnt.jsp, isso permite que a AEM Mobile controle o HTML gerado para o caso de uso de aplicativos móveis. Para cada componente direcionado por um autor de conteúdo, uma mbox associada é criada pelo engine_tnt.jsp.

Para cada mbox, um atributo de cq-targeting é adicionado permitindo que os desenvolvedores de aplicativos gravem um código personalizado para consumir e usar, como desejar. O Aplicativo de referência híbrido AEM Mobile tem um exemplo de diretiva angular que usa o atributo cq-targeting. O conceito de substituição de conteúdo quando e como é feito depende muito do desenvolvedor de aplicativos móveis. Há um SDK móvel fornecido via AEM /etc/clientlibs/mobileapps/js/mobileapps.js que fornece uma API para chamar o serviço de direcionamento de Adobe. Cabe ao desenvolvedor do aplicativo especificar quando a chamada deve ser feita de acordo com o design de seu aplicativo.

O que vem depois?

1. Start da minha experiência com aplicativos AEM Mobile
2. Gerenciar o conteúdo do meu aplicativo
3. Criar meu aplicativo
4. Acompanhe o desempenho do meu aplicativo com o Adobe Mobile Analytics
5. Fornecer uma experiência personalizada com o aplicativo com a Adobe Target
6. Enviar mensagens importantes para meus usuários

Recursos do Business.Adobe.com

Multichannel Communication Automated Onboarding Auto Form Fill Content As A Service Headless Cms Digital Signage