Personalización de contenido de AEM Mobile aem-mobile-content-personalization

La función de personalización de contenido de AEM Mobile permite Autores de AEM para personalizar el contenido de las aplicaciones móviles mediante Adobe Target. Esto permite la entrega de ofertas de destino a usuarios de aplicaciones móviles. Adobe Experience Manager Mobile ofrece la capacidad de crear, dirigir y entregar contenido que proporcionará al usuario contenido específico para sus propios gustos individuales.

Como suele suceder en AEM, para que los autores empiecen a crear este contenido, los administradores y desarrolladores deben preparar primero el entorno.

AEM administradores para establecer una conexión entre AEM Mobile y el Cloud Service de Adobe Target.

Mientras tanto, AEM Mobile desarrolladores es necesario modificar las secuencias de comandos existentes para facilitar la creación de contenido dirigido.

Para administradores for-administrators

Hay que realizar varios pasos para que los autores de contenido puedan empezar a generar contenido de destino para aplicaciones móviles: Se obtiene el conjunto correcto de permisos para usuarios y grupos, se crean servicios en la nube, se configura la aplicación para la actividad y, finalmente, se genera el contenido.

Este artículo le guiará a través del proceso utilizado para configurar la variable Aplicación de referencia híbrida de AEM Mobile para la segmentación.

En adelante, se supone que la aplicación de referencia híbrida de AEM Mobile se ha implementado correctamente y se puede acceder a ella a través del panel de AEM Mobile.

Para que los autores puedan generar contenido de destino en una aplicación, la instancia de AEM debe ser configurado con el Cloud Service de Adobe Target.

Permisos permissions

Los usuarios que necesitan acceso a la consola de personalización deben formar parte del target-activity-authors grupo.

Se sugiere que, como parte de la configuración de usuarios y grupos, el grupo target-activity se añada al grupo apps-admins . Al agregar el grupo target-activity-authors , esto permitirá a los usuarios ver la entrada del menú de navegación de personalización .

Cloud Services cloud-services

Para que el contenido de destino funcione en aplicaciones móviles, hay dos servicios que deben configurarse: El servicio de Adobe Target y el servicio de Adobe Mobile Services. El servicio Adobe Target proporciona el motor para procesar las solicitudes de los clientes y devolver el contenido personalizado. El servicio Adobe Mobile Services proporciona la conexión entre los servicios de Adobe y la aplicación móvil a través del archivo ADBMobileConfig.json que consume el complemento AMS Cordova. Desde el panel de AEM Mobile, puede configurar la aplicación agregando los dos servicios.

En el panel de AEM Mobile, busque Administrar Cloud Services y haga clic en el botón + .

En el asistente Agregar Cloud Service, seleccione la tarjeta de servicio en la nube "Adobe Target" y haga clic en Siguiente.

En el menú desplegable Seleccionar una configuración puede crear una configuración nueva o seleccionar una existente. Para crear una nueva configuración, seleccione "Crear configuración" en la lista desplegable. Introduzca un título para la configuración de Target. Introduzca el código de cliente, el correo electrónico y la contraseña asociados a su cuenta de Target. Si no conoce los valores de estos campos, póngase en contacto con el servicio de asistencia técnica de Adobe Target. Haga clic en el botón "Verificar" para validar las credenciales. Una vez verificado, haga clic en el botón Submit para crear el servicio en la nube.

Después de completar el asistente, el mosaico Administrar Cloud Service contendrá el servicio en la nube de Target, pero contiene una advertencia sobre la falta de una cuenta de Adobe Mobile Service.

Adobe Mobile Services adobe-mobile-services

Es necesario vincular una cuenta de Adobe Mobile Services (AMS) a la aplicación, el servicio AMS proporciona el archivo ADBMobileConfig.json necesario que contiene la información del código de cliente de Target. Antes de crear una asociación con la cuenta de AMS, la cuenta de AMS debe modificarla un usuario que tenga permisos para AMS.

Código de cliente client-code

Para iniciar sesión en los servicios de AMS, visite https://mobilemarketing.adobe.com, seleccione la aplicación móvil y haga clic en la configuración . Busque el campo Opciones de SDK Target , coloque el código de cliente en el campo y haga clic en Guardar .

Ahora que el código de cliente se ha asociado con la aplicación móvil, cuando el servicio en la nube de AMS se configura mediante el panel móvil de Adobe, la configuración del servicio se enviará mediante el archivo ADBMobileConfig.json .

Cloud Service de servicios móviles de Adobe adobe-mobile-service-cloud-service

Ahora que se ha configurado AMS, es hora de asociar la aplicación móvil en el panel de control de Adobe Mobile. En el panel de AEM Mobile, busque Administrar Cloud Services y haga clic en el botón + .

Seleccione la tarjeta Adobe Mobile Services y haga clic en Siguiente.

En el paso Crear o Seleccionar asistente , seleccione la lista desplegable Servicio móvil y seleccione la entrada Crear configuración . Proporcione un título, empresa, nombre de usuario, contraseña y seleccione el centro de datos adecuado. Si no conoce estos valores, póngase en contacto con el administrador de Adobe Mobile Services para obtenerlos. Una vez rellenados todos los campos, haga clic en el botón Verify . El proceso de verificación va a AMS y verifica las credenciales de la cuenta. Una vez realizada la validación, se rellenará una lista de aplicaciones móviles donde se seleccionará la aplicación móvil asociada en la lista desplegable. Haga clic en el botón Enviar para completar el asistente. El proceso puede tardar un poco en obtener los datos de configuración y cualquier análisis asociado con la aplicación. Una vez completado el proceso, haga clic en el botón Listo del modal para volver al panel móvil de Adobe.

Si vuelve al panel móvil, el mosaico Administrar Cloud Services contendrá el servicio en la nube de AMS. También tendrá en cuenta que el mosaico Analizar métricas se rellenará con informes de ciclo vital.

Para autores for-authors

Requisito previo: Como se ha mencionado anteriormente, los administradores deben configurar la conexión con el servicio de Adobe Target antes de que los autores puedan generar nuevo contenido de destino.

Una vez que el administrador ha configurado los dos servicios de nube y el desarrollador ha configurado el controlador de mobileappoffers, los autores de contenido ahora pueden empezar a generar experiencias segmentadas.

La creación de contenido de destino dentro de una aplicación de AEM Mobile sigue un procedimiento similar al de creación de AEM Sites:

Consulte aquí para obtener una descripción general completa sobre Creación de contenido de destino en AEM

Para desarrolladores for-developers

AEM desarrolladores que crean aplicaciones móviles deben seguir los patrones que se utilizan habitualmente a lo largo del AEM al desarrollar componentes. Aquí, le explicaremos los pasos necesarios para permitir a los autores de contenido crear contenido de destino:

Controladores de Adobe Target ContentSync adobe-target-contentsync-handlers

Para entregar contenido al contenido del dispositivo del usuario, se genera procesando las ofertas que crean los autores de contenido de AEM. Para gestionar la renderización de ofertas de destino, hay un nuevo controlador de sincronización de contenido que procesará las ofertas. Si utilizamos la aplicación de referencia híbrida como ejemplo, el paquete de contenido en (inglés) contiene ContentSyncConfig con un mobileappoffers controlador. El siguiente paso es crucial para procesar ofertas en el dispositivo. El controlador mobileappoffers tiene una propiedad path que identifica la ruta a la actividad de personalización que se va a utilizar para la aplicación.

Por ejemplo, si hay una actividad que se encuentra en /content/campaign/hybridref copie esta ruta y péguela como valor en la variable ruta propiedad del controlador mobileappoffers.

Una vez que la ruta de las actividades se ha establecido en la propiedad ruta del controlador mobileappoffers, guarde el controlador. El controlador ya estará listo para iniciar el procesamiento de ofertas para nuestros dispositivos móviles.

Modo de procesamiento render-mode

El controlador mobileappoffers está configurado de forma diferente para las configuraciones de publicación y desarrollo. Para la configuración de publicación hay una propiedad llamada renderMode con un valor de publicar se establece en el nodo cq:ContentSyncConfig . El controlador mobileappoffers hace referencia al renderMode y, si se configura para publicar, modifica el id de mbox que se crea. De forma predeterminada, los mboxes creados por AEM tienen un valor —author anexado al id del mbox. Esto identifica que la actividad no se ha publicado y debe utilizar la campaña no publicada para las resoluciones de oferta.

Cuando el contenido se configura mediante el panel de Adobe móvil, el contenido preparado se considera contenido listo para la producción y se procesa mediante la configuración de sincronización de contenido que no es de desarrollo. Si se procesa de este modo, se eliminará —author de todos los id de mbox y se espera que una actividad publicada esté disponible en el servidor de Target. Antes de probar el contenido preparado, asegúrese de que la actividad se haya publicado.

Personalización del desarrollo de aplicaciones personalization-app-development

Componentes components

La base de cualquier contenido suele ser un componente de página que amplía uno de los componentes de página de base AEM wcm/foundation/components/page o foundation/components/page, dependiendo de si utiliza HTL o JSP. La duración de estos pasos se centrará en el uso del componente wcm/foundation/components/page . La estructura básica del componente de página se desglosa en varios scripts, cada uno de los cuales proporciona el propósito específico de permitir al desarrollador organizar y anular su código si es necesario. Los dos scripts que son de interés para la personalización son head.html y body.html. Estas dos secuencias de comandos proporcionan un área en la que se puede insertar código para admitir la creación de ContextHub, Cloud Services y dispositivos móviles.

A continuación se muestra una descripción general de las dos secuencias de comandos principales utilizadas para habilitar la segmentación de contenido.

head.html head-html

Para que el autor pueda dirigir su contenido, es necesario añadir el menú de destino a la página para que el autor pueda cambiar el contexto del modo de edición al modo de orientación. Para habilitar esta función, el desarrollador debe modificar el script head.html para incluir el siguiente fragmento de código cerca de la parte superior del head.html o tan cerca del <title></title> como sea posible.

<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 que los autores puedan obtener una vista previa del contenido de destino, el editor debe poder localizar la configuración del servicio en la nube de Adobe Target. El bloque de código siguiente añade dos secuencias de comandos importantes. El primero que agrega la capacidad de la página para localizar el servicio de nube de Target asociado y realizar las llamadas a Adobe Target. El segundo es la adición de la categoría cq.apps.targeting .

La variable cq.apps.targeting reemplaza el componente predeterminado cq/personalization/component/target y utiliza el componente mobileapps/components/target que procesa ofertas específicas para el consumo de aplicaciones móviles. Para obtener más información, consulte la sección Componente de destino .

El código debe añadirse en head.html y colocarse justo antes del final del </head> elemento.

<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 body-html

Para habilitar al autor de contenido la capacidad de probar diferentes personalidades, la secuencia de comandos body.html debe incluir el siguiente bloque de código como el primer elemento secundario del elemento body.

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

El último bit de código requerido se encuentra en la parte inferior del body.html. Este bit de código busca el servicio de nube asociado e introduce el código de motor de targeting apropiado.

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

Aplicación de referencia reference-application

Se pueden encontrar ejemplos de head.html y body.html en la Aplicación de referencia híbrida de AEM Mobile mostrar al desarrollador dónde colocar los bloques de script dentro de los dos scripts.

Gestores de sincronización de contenido content-sync-handlers

Cuando el autor de contenido ha terminado de crear contenido para la aplicación móvil, el siguiente paso es descargar la fuente y crear la aplicación, o configurar el contenido que se va a publicar. El desarrollador participa en varios pasos para que esto suceda. Para facilitar la renderización del contenido, AEM Mobile utiliza controladores de sincronización de contenido para procesar y empaquetar el contenido. Se ha introducido un nuevo controlador de sincronización de contenido para que el caso de uso Personalización represente el contenido de destino. El controlador "mobileappoffers" sabe cómo procesar las ofertas de destino asociadas que ha creado el autor del contenido. El controlador mobileappoffers extiende el controlador de actualización de páginas abstractas, por lo que muchas de las propiedades son similares. Los detalles del controlador mobileappoffers tienen las siguientes propiedades.

Componente de destino target-component

Para ayudar a procesar contenido específicamente para aplicaciones móviles, AEM Mobile utiliza el componente mobileapps/components/target . El componente de destino móvil amplía el componente cq/personalization/components/target y anula el script engine_tnt.jsp. Al anular engine_tnt.jsp , AEM Mobile puede controlar el HTML generado para el caso de uso de las aplicaciones móviles. Para cada componente dirigido por un autor de contenido, engine_tnt.jsp crea un mbox asociado.

Para cada mbox, un atributo de cq-targeting se añade permitiendo a los desarrolladores de aplicaciones escribir código personalizado para consumir y usar lo que deseen. La variable Aplicación de referencia híbrida de AEM Mobile tiene un ejemplo de directiva de Angular que utiliza el atributo cq-targeting. El concepto de reemplazo de contenido cuando y cómo se realiza depende en gran medida del desarrollador de aplicaciones móviles. Hay un SDK móvil que se entrega a través de AEM /etc/clientlibs/mobileapps/js/mobileapps.js que proporciona una API para llamar al servicio de Targeting de Adobe. Depende del desarrollador de la aplicación especificar cuándo se debe realizar esa llamada según el diseño de su aplicación.

Siguientes pasos? what-s-next