Personalizzazione dei contenuti AEM Mobile aem-mobile-content-personalization
La funzione di personalizzazione dei contenuti di AEM Mobile consente a autori AEM di personalizzare il contenuto delle app mobili utilizzando Adobe Target. Ciò consente di fornire offerte mirate agli utenti delle app mobili. Adobe Experience Manager Mobili consente di creare, indirizzare e distribuire contenuti specifici per i singoli gusti.
In AEM, affinché gli autori possano iniziare a creare questo contenuto, gli amministratori e gli sviluppatori devono prima preparare l’ambiente.
Per stabilire una connessione tra AEM Mobile e il Cloud Service Adobe Target sono necessari amministratori AEM.
Nel frattempo, gli sviluppatori di AEM Mobile devono modificare gli script esistenti per facilitare l'authoring mirato dei contenuti.
Per gli amministratori for-administrators
Ci sono diversi passaggi che devono essere messi insieme prima che gli autori dei contenuti possano iniziare a generare contenuti mirati per le app mobili: è possibile ottenere il set giusto di autorizzazioni per utenti e gruppi, creare servizi cloud, configurare l’applicazione per l’attività e infine generare il contenuto.
Questo articolo illustra il processo utilizzato per configurare l'applicazione di riferimento ibrida AEM Mobile per il targeting.
Si presume che l’applicazione di riferimento ibrida AEM Mobile sia stata distribuita correttamente e sia accessibile tramite il dashboard di AEM Mobile.
Prima che gli autori possano generare contenuti mirati all'interno di un'applicazione, l'istanza AEM deve essere configurata con il Cloud Service Adobe Target.
Autorizzazioni permissions
Gli utenti che devono accedere alla console di personalizzazione devono far parte del gruppo target-activity-authors.
Nell’ambito della configurazione di utenti e gruppi, si consiglia di aggiungere il gruppo target-attività-group al gruppo apps-admins. L'aggiunta del gruppo target-activity-authors consente agli utenti di visualizzare la voce del menu di navigazione di Personalization.
Servizi cloud cloud-services
Per ottenere contenuti mirati che funzionano per le app mobili, è necessario configurare due servizi: il servizio Adobe Target e il servizio Adobe Mobile Services. Il servizio Adobe Target fornisce il motore per elaborare le richieste dei client e restituire il contenuto personalizzato. Il servizio Adobe Mobile Services fornisce la connessione tra i servizi Adobe e l’app mobile tramite il file ADBMobileConfig.json, utilizzato dal plug-in Cordova di AMS. Dal dashboard di AEM Mobile, puoi configurare l’applicazione aggiungendo i due servizi.
Dal dashboard di AEM Mobile, individua il Cloud Service Gestisci e fai clic sul pulsante +.
Dalla procedura guidata Aggiungi Cloud Service, seleziona la scheda del servizio cloud "Adobe Target" e fai clic su Avanti.
Dal menu a discesa Seleziona una configurazione, puoi creare una configurazione o selezionarne una esistente. Per creare una configurazione, seleziona "Crea configurazione" dal menu a discesa. Immetti un titolo per la configurazione Target. Immetti il codice cliente, l'e-mail e la password associati al tuo account Target. Se non conosci i valori per questi campi, contatta il supporto Adobe Target. Fai clic sul pulsante "Verifica" per convalidare le credenziali. Una volta verificato, fai clic sul pulsante Invia per creare il servizio cloud.
Al termine della procedura guidata, il riquadro Gestisci Cloud Service contiene il servizio cloud Target. Tuttavia, contiene un avviso relativo a un account Adobe Mobile Services mancante.
Adobe Mobile Services adobe-mobile-services
È necessario collegare un account Adobe Mobile Services (AMS) anche all’applicazione, il servizio AMS fornisce il file ADBMobileConfig.json richiesto che contiene le informazioni sul codice client di Target. Prima di creare un'associazione con l'account AMS, l'account AMS deve essere modificato da un utente che dispone di autorizzazioni per AMS.
Codice cliente client-code
Per accedere ai servizi AMS, visita https://mobilemarketing.adobe.com, seleziona l'app mobile e fai clic sulle impostazioni. Individua il campo Opzioni SDK Target, inserisci il codice client nel campo e fai clic su Salva.
Ora che il codice client è stato associato all’app mobile, quando il servizio cloud AMS è configurato tramite l’Adobe Dashboard per dispositivi mobili, le impostazioni del servizio verranno distribuite tramite il file ADBMobileConfig.json.
Cloud Service Adobe Mobile Services adobe-mobile-service-cloud-service
Ora che AMS è configurato, è necessario associare l’applicazione mobile all’Adobe Dashboard di Mobile. Dal dashboard di AEM Mobile, individua il Cloud Service Gestisci e fai clic sul pulsante +.
Seleziona la scheda Adobe Mobile Services e fai clic su Avanti.
Dal passaggio della procedura guidata Crea o seleziona, seleziona il menu a discesa Mobile Service, quindi seleziona la voce Create Configuration (Crea configurazione). Fornisci titolo, società, nome utente, password e seleziona il centro dati appropriato. Se non conosci questi valori, contatta l’amministratore di Adobe Mobile Services per ottenerli. Dopo aver compilato tutti i campi, fare clic su Verifica. Il processo di verifica passa ad AMS e verifica le credenziali per l’account. Una volta completata la convalida, viene popolato un elenco di applicazioni mobili in cui si seleziona l’app mobile associata dal menu a discesa. Fai clic su Invia per completare la procedura guidata. Il processo può richiedere un po’ di tempo per ottenere i dati di configurazione ed eventuali analisi associate all’applicazione. Al termine della procedura, fai clic su Fine per tornare alla dashboard di Adobe Mobile.
Tornando al dashboard di Mobile, la sezione Gestione Cloud Service contiene il servizio cloud AMS. Inoltre, il riquadro Analizza metriche è compilato con i rapporti sul ciclo di vita.
Per autori for-authors
Prerequisito: Come indicato sopra, gli amministratori devono configurare la connessione al servizio Adobe Target prima che gli autori possano generare nuovi contenuti mirati.
Dopo che l’amministratore ha configurato i due servizi cloud e lo sviluppatore ha configurato il gestore mobileapffers, gli autori di contenuto possono ora iniziare a generare esperienze mirate.
L’authoring di contenuti di destinazione all’interno di un’app AEM Mobile segue una procedura simile all’authoring di AEM Sites:
Consulta questa pagina per una panoramica completa su Creazione di contenuti con targeting in AEM
Per sviluppatori for-developers
Gli sviluppatori AEM che creano applicazioni mobili devono continuare a seguire i pattern comunemente utilizzati nell’AEM per lo sviluppo di componenti. In questo Adobe vengono descritti i passaggi necessari per consentire agli autori di contenuto di creare contenuti mirati:
Gestori ContentSync di Adobe Target adobe-target-contentsync-handlers
Per distribuire contenuti al dispositivo dell’utente, il contenuto viene generato eseguendo il rendering delle offerte create dagli autori di contenuti AEM. Per gestire il rendering delle offerte target, è disponibile un nuovo gestore di sincronizzazione dei contenuti che elabora le offerte. Utilizzando l'applicazione di riferimento ibrida come esempio, il pacchetto di contenuti en (inglese) contiene ContentSyncConfig con un gestore mobileappoffers. Il passaggio successivo è fondamentale per il rendering delle offerte al dispositivo. Il gestore mobileapffers dispone di una proprietà path che identifica il percorso dell'attività di personalizzazione da utilizzare per l'applicazione.
Ad esempio, se è presente un'attività in /content/campaigns/hybridref, copia questo percorso e incollalo come valore nella proprietà path del gestore mobileappoffers.
Dopo aver impostato il percorso delle attività nella proprietà path del gestore mobileapffers, salva il gestore. Il gestore è ora pronto per iniziare a eseguire il rendering delle offerte per dispositivi mobili.
Modalità rendering render-mode
Il gestore mobileapffers è configurato in modo diverso per le impostazioni di pubblicazione e sviluppo. Per le impostazioni di pubblicazione esiste una proprietà denominata renderMode con un valore di publish impostato sul nodo cq:ContentSyncConfig. Il gestore mobileapffers fa riferimento al renderMode e, se impostato su publish, modifica l’ID mbox creato. Per impostazione predefinita, alle mbox create dall’AEM viene aggiunto un valore —author all’ID mbox. Questo identifica che l’attività non è stata pubblicata e deve utilizzare la campagna non pubblicata per le risoluzioni delle offerte.
Quando il contenuto viene gestito tramite l’Adobe Mobile Dashboard, il contenuto gestito viene considerato pronto per la produzione e ne viene eseguito il rendering tramite la configurazione di sincronizzazione contenuti non di sviluppo. Se si esegue il rendering in questo modo, l’autore —author verrà rimosso da tutti gli ID mbox e si prevede che un’attività pubblicata sia disponibile sul server Target. Prima di testare il contenuto con staging, assicurati che l’attività sia già pubblicata.
Sviluppo di app Personalization personalization-app-development
Componenti components
La base per qualsiasi contenuto è in genere un componente pagina che estende uno dei componenti di base della pagina AEM wcm/foundation/components/page o foundation/components/page a seconda che si utilizzino HTL o JSP. La durata di questi passaggi si concentra sull’utilizzo del componente wcm/foundation/components/page. La struttura di base del componente Pagina è suddivisa in più script e ogni script fornisce lo scopo specifico di consentire allo sviluppatore di organizzare e sovrascrivere il codice, se necessario. I due script di interesse per Personalization sono head.html e body.html. Questi due script forniscono un’area in cui è possibile inserire il codice per supportare l’hub di contesto, i Cloud Service e l’authoring mobile.
Ecco una panoramica dei due script principali utilizzati per abilitare il targeting dei contenuti.
head.html head-html
Per consentire all’autore di eseguire il targeting del proprio contenuto, è necessario aggiungere alla pagina il menu di destinazione in modo che l’autore possa passare dalla modalità di modifica alla modalità di targeting. Per abilitare questa funzione, lo sviluppatore deve modificare lo script head.html in modo da includere il seguente frammento di codice nella parte superiore di head.html o il più vicino possibile all'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>
Per consentire agli autori di visualizzare in anteprima il contenuto di destinazione, l’editor deve essere in grado di individuare la configurazione del servizio cloud Adobe Target. Il blocco di codice seguente aggiunge due script importanti. La prima aggiunta della possibilità per la pagina di individuare il servizio cloud Target associato ed effettuare le chiamate ad Adobe Target. La seconda è l’aggiunta della categoria cq.apps.targeting.
La categoria cq.apps.targeting sostituisce il componente predefinito cq/personalization/component/target e utilizza il componente mobileapps/components/target che esegue il rendering delle offerte specifico per l'utilizzo delle app mobili. Maggiori dettagli al riguardo saranno discussi nella sezione Componente Target.
Il codice deve essere aggiunto nel file head.html e posizionato immediatamente prima della fine dell'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 body-html
Per consentire all’autore del contenuto di testare utenti tipo diversi, lo script body.html deve includere il seguente blocco di codice come primo elemento secondario dell’elemento body.
<div data-sly-test="${!wcmmode.disabled}">
<div data-sly-resource="${'clientcontext' @ resourceType='cq/personalization/components/clientcontext_optimized'}" data-sly-unwrap></div>
</div>
L'ultimo bit di codice richiesto si trova nella parte inferiore di body.html. Questo bit di codice cerca il servizio cloud associato e inserisce il codice del motore di targeting appropriato.
<div data-sly-test="${!wcmmode.disabled}">
<div data-sly-resource="${'cloudservices' @ resourceType='cq/cloudserviceconfigs/components/servicecomponents'}" data-sly-unwrap></div>
</div>
Applicazione di riferimento reference-application
Esempi di head.html e body.html sono disponibili in AEM Mobile Hybrid Reference Application, che mostra allo sviluppatore dove inserire i blocchi di script all'interno dei due script.
Gestori di sincronizzazione contenuti content-sync-handlers
Una volta completata la creazione del contenuto per l’app mobile, il passaggio successivo consiste nel scaricare l’origine e creare l’applicazione oppure pubblicare il contenuto nell’area intermedia. Ci sono diversi passaggi con cui lo sviluppatore è coinvolto per rendere questo accade. Per facilitare il rendering del contenuto, AEM Mobile utilizza gestori di sincronizzazione dei contenuti per eseguire il rendering e creare pacchetti del contenuto. È stato introdotto un nuovo gestore di sincronizzazione dei contenuti per il caso d’uso Personalization per eseguire il rendering di contenuti di destinazione. Il gestore "mobileapffers" è in grado di eseguire il rendering delle offerte target associate create dall’autore di contenuto. Il gestore mobileapffers estende il gestore di aggiornamento delle pagine astratte pertanto, molte delle proprietà sono simili. I dettagli del gestore mobileappoffers hanno le seguenti proprietà.
Componente di destinazione target-component
Per facilitare il rendering dei contenuti specifici per le app mobili, AEM Mobile utilizza il componente mobileapps/components/target. Il componente mobile di destinazione estende il componente cq/personalization/components/target e sostituisce lo script engine_tnt.jsp. Eseguendo l’override di engine_tnt.jsp, AEM Mobile può controllare le HTML generate per il caso d’uso delle app mobili. Per ogni componente di destinazione di un autore di contenuti, viene creata una mbox associata da engine_tnt.jsp.
Per ogni mbox, viene aggiunto un attributo di cq-targeting che consente agli sviluppatori di applicazioni di scrivere codice personalizzato da utilizzare e utilizzare come preferiscono. L'app di riferimento ibrida AEM Mobile contiene un esempio di direttiva Angular che utilizza l'attributo cq-targeting. Il concetto di sostituzione dei contenuti, quando e come viene effettuato, dipende dallo sviluppatore dell’app mobile. L’SDK di Mobile viene fornito tramite AEM /etc/clientlibs/mobileapps/js/mobileapps.js, che fornisce un’API per chiamare il servizio di targeting degli Adobi. Spetta allo sviluppatore dell’applicazione specificare quando tale chiamata deve essere effettuata in base alla progettazione dell’applicazione.