Personalização de conteúdo do AEM Mobile

OBSERVAÇÃO

A Adobe recomenda o uso do Editor de SPA para projetos que exigem renderização do cliente baseada em estrutura de aplicativo de página única (por exemplo, Reagir). Saiba mais.

OBSERVAÇÃO

Este documento faz parte do Guia de introdução ao AEM Mobile, um ponto de partida recomendado para referência ao 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.

OBSERVAÇÃO

Esquecer de adicionar os usuários ou grupos aos quais você deseja ter acesso ao console de administração de personalização ao grupo públicos alvos-atividades-autores impedirá que os usuários vejam o console de 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 +.

chlimage_1-38

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

chlimage_1-39

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.

OBSERVAÇÃO

O serviço de nuvem que é criado é automaticamente associado ao aplicativo móvel por meio do assistente. O valor da propriedade cq:cloudserviceconfigs é definido no nó jcr:content do nó de grupo de aplicativos. Para a amostra de aplicativo híbrido, ela é definida em /content/mobileapps/híbridos-reference-app/jcr:content com o valor apontando para o nó de estrutura gerado automaticamente localizado em /etc/cloudservices/testandtarget/adobe-público alvo—aem-apps/framework. O nó da estrutura tem duas propriedades definidas por padrão, gênero e idade. A estrutura é usada apenas pela visualização AEM e não tem nenhum impacto no dispositivo.

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.

chlimage_1-40

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.

chlimage_1-41

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 +.

chlimage_1-42

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

chlimage_1-43

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.

chlimage_1-44

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.

OBSERVAÇÃO

Para o Aplicativo de referência híbrido existem dois processadores mobileappoffers, um para o dev e outro para as produções.

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>
OBSERVAÇÃO

Observe que o script só deve ser incluído quando o Modo WCM não estiver desativado, de modo que, quando o Modo WCM estiver desativado (consulte a seção do manipulador ContentSync para obter detalhes), o script não será incluído no código final do aplicativo.

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>
OBSERVAÇÃO

Observe que o bloco de código está encapsulado em um modo WCM que não está sendo desativado, portanto, só entra em execução enquanto o autor do conteúdo está trabalhando na criação de conteúdo. Os scripts do serviço de nuvem não serão adicionados ao código de tempo de execução móvel gerado.

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.

Propriedade Valor Descrição
regravar + relativeParentPath

- "/"

A propriedade rewrite identifica como os caminhos no conteúdo devem ser regravados.
includePageTypes

"cq/personalization/components/teaserpage",

"cq/personalization/components/offerproxy"

A propriedade includePageTypes é opcional, padronizando para páginas que têm tipos de recursos de cq/personalization/components/teaserpage e cq/personalization/components/offerproxy. Esses dois tipos de recurso são os tipos de recurso padrão usados quando o conteúdo é direcionado. Se tipos de recursos adicionais precisarem ser suportados, eles devem ser adicionados à lista de includePageTypes.
locationRoot /content/mobileapps/<app> A localização do aplicativo.
tipo mobileappoffers O nome do manipulador que está sendo mobileappoffers.
seletor mão O seletor tandt é usado para renderizar o conteúdo direcionado.
targetRootDirectory www O diretório raiz onde o conteúdo renderizado deve ser mantido.
includeImages true | false Se verdadeiro, qualquer imagem incluída na oferta será renderizada. Se imagens falsas forem ignoradas.
includeVideos true | false Se verdadeiro, qualquer vídeo incluído na oferta será renderizado. Se vídeos falsos forem ignorados.
path /content/campanha/<marca> Aponta para a marca de campanha em que as ofertas participam. Atualmente, todas as ofertas devem vir da mesma campanha.
profundo true | false Se verdadeiro recursivamente renderizar todas as páginas secundárias, se falso não for recorrente.
extensão html Define a extensão do recurso que está sendo renderizado. Defina para html de modo que as páginas tenham uma extensão .html.
OBSERVAÇÃO

O Aplicativo AEM Mobile Hybrid Reference tem a configuração padrão do manipulador mobileappoffer. A propriedade path na amostra está vazia, pois depende do local da campanha. Depois que um autor de Campanha criar uma Campanha, o administrador do aplicativo deverá associar a Campanha ao manipulador especificando a propriedade path para apontar para a Campanha.

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

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free