Creazione di banner e banner dinamici per le pagine di ricerca

Un banner è un elemento che viene visualizzato nella pagina di ricerca di una raccolta. Esistono due tipi di banner:

Banner di base – Un banner di base è un'immagine che viene visualizzata nella pagina di ricerca. Se si tocca un banner è possibile che non venga eseguita alcuna operazione o che si attivi un'azione. Ad esempio, toccando un banner potrebbe essere avviata una pagina Web, un collegamento a un altro articolo oppure a un'altra raccolta, essere inviata un'email, un messaggio di testo oppure una telefonata. I banner possono essere utilizzati anche per visualizzare il branding o fornire un separatore visivo in una pagina di ricerca.

Banner dinamici – Un banner dinamico mostra il contenuto HTML in una pagina di ricerca. Ad esempio, i banner dinamici possono visualizzare quote azionarie, caroselli di presentazioni o feed di social media. Sfruttando i plug-in Cordova potete avvalervi di funzionalità specifiche di AEM Mobile, come offrire agli utenti la possibilità di sfiorare una diapositiva in un banner per passare a un articolo o visualizzare il prompt di accesso all'adesione.  

Banner di base

L'aspetto del banner è determinato dalla scheda a cui è assegnato. L'immagine del banner viene centrata, ridimensionata e ritagliata in modo da adattarla all'area della scheda alla quale è associata. Create un'immagine banner di larghezza sufficiente a consentirne la corretta visualizzazione all'interno della scheda. Consultate Ottimizzazione del contenuto per AEM Mobile.

  1. In Contenuti e layout, fate clic su Contenuto, quindi fate clic su Aggiungi > Aggiungi banner.

  2. Specificate un nome banner univoco per il progetto.

  3. Specificate i metadati per il banner.  

    Potete anche decidere di aggiungere metadati per distinguere il banner dall'altro contenuto quando utilizzate le regole di mapping per il mapping del contenuto alle schede.

  4. Indicate cosa accade quando viene toccato il banner.

    Selezionate Nessuna se toccando il banner non viene eseguita alcuna operazione.

    Se desiderate che toccando il banner venga eseguita un'azione, scegliete una delle seguenti opzioni:

    http:// – Apre la pagina Web specificata (http: o https:) in un browser in-app quando l'utente tocca il banner.

    Esempio: http://www.adobe.com/it

    navto:// – Passa all'articolo o alla raccolta specificata. I collegamenti ai numeri di pagina all'interno di un articolo non sono supportati. Per informazioni sui formati navto, consultate Collegamenti ipertestuali negli articoli AEM Mobile.

    Esempio: navto://collection/coffeeProducts

    mailto: – Utilizza l'app di posta elettronica predefinita del dispositivo per inviare i messaggi e-mail.

    Esempio semplice: mailto:jane@example.com

    Esempio dettagliato: mailto:jane@example.com?cc=maria@example.com&subject=Thanks%20Again&body=Thank%20you%20for%20your%20support.%0D%0A%0D%0ANew%20line.

    sms: – Utilizza l'app di messaggistica del dispositivo per inviare un messaggio di testo.

    Esempio semplice: sms:1-206-555-2323

    Esempio dettagliato (iOS): sms:+1206-555-2323&body=Text%20message

    Esempio dettagliato (Android): sms:+1206555-2323?body=Text%20message

    tel: – Utilizza l'app del telefono del dispositivo per effettuare una chiamata.

    Esempio: tel:1-206-555-2323

    Passate alla raccolta principale – Ritorna al primo articolo o alla prima raccolta nella raccolta di livello principale.

    Spostamento all'indietro – Ritorna alla pagina o all'articolo precedente del browser che l'utente ha toccato o sul quale ha fatto clic, per passare alla pagina di ricerca corrente (i gesti di scorrimento sui dispositivi mobili non sono inclusi nella navigazione all'indietro).

    Le azioni mailto, sms e tel sono supportate solo sui dispositivi mobili. Non hanno alcun effetto in Desktop Web Viewer.

  5. Utilizzate la scheda Immagini per caricare l'immagine del banner.

    Se non desiderate utilizzare un'immagine per il banner, ad esempio, se desiderate visualizzare solo il titolo del banner o un colore, potete caricare qualsiasi file di immagine e quindi creare una scheda nella quale l'immagine non viene visualizzata.

  6. Aggiungete il banner a una raccolta. Accertatevi che sia posizionato correttamente all'interno della raccolta (ad esempio in alto) in modo da essere visualizzato nella posizione appropriata nella pagina di ricerca.

  7. Se necessario, modificate un modello di layout in modo da includere una scheda che visualizzerà il banner.

    Ad esempio, potete creare una scheda che copre la larghezza del dispositivo e una regola che esegue la mappatura della scheda a qualsiasi banner. Consultate Creazione di schede e layout.

Banner dinamici

I banner dinamici consentono di visualizzare il contenuto HTML nelle pagine di ricerca.

  • Se usate più banner dinamici in una pagina di ricerca, sperimentate l'esperienza eseguendone il test sui dispositivi di destinazione per essere certi che le prestazioni siano affidabili. Se il caricamento della pagina di ricerca richiede troppo tempo o se si verificano altri problemi, prendere in considerazione l'idea di utilizzare un numero ridotto di banner dinamici nella pagina di ricerca.
  • L'utilizzo di immagini in miniatura per i banner è facoltativo. Le immagini possono essere utili se l'utente è offline o se viene visualizzato dietro il contenuto HTML trasparente.
  • Se utilizzate i plug-in Cordova personalizzati nei banner dinamici, accertatevi di selezionare Abilitare le funzioni di estensibilità nelle proprietà dei banner dinamici.
  • Quando si fa riferimento al contenuto esterno nei file HTML, è consigliabile utilizzare il protocollo HTTPS anziché HTTP. Desktop Web Viewer richiede i protocolli HTTPS.
  • Potete utilizzare l'elemento <video playsinline autoplay> per la riproduzione automatica di un video nel banner dinamico. Se la riproduzione automatica del video parte prima che venga visualizzato il banner, prendete in considerazione l'utilizzo di JavaScript che riproduce il video nel momento in cui si verifica l'evento window.onAppear e lo mette in pausa nel momento in cui si verifica l'evento window.onDisappear.

 

Video banner dinamici

Video banner dinamici

Banner di adesione di esempio

Utilizzate questo contenuto HTML per creare un banner dinamico di adesione. Se l'utente non ha effettuato l'accesso, nel banner viene visualizzato un prompt di accesso. Se l'utente ha effettuato l'accesso, nel banner viene visualizzato il pulsante Disconnetti. Quando create il banner dinamico, accertatevi di selezionare Abilitare le funzioni di estensibilità per abilitare i plug-in Cordova.

Scarica

Creazione di banner dinamici

  1. Creare contenuto HTML e generare un file di articolo.

  2. In Contenuti e layout, fate clic su Contenuto, quindi fate clic su Aggiungi > Aggiungi banner dinamico.

  3. Specificate un nome banner univoco per il progetto.

  4. Specificate i metadati per il banner.  

    Potete anche decidere di aggiungere metadati per distinguere il banner dall'altro contenuto quando utilizzate le regole di mapping per il mapping del contenuto alle schede.

    Nota:

    se il contenuto HTML include riferimenti ai plug-in Cordova, accertatevi di selezionare Abilitare le funzionalità di estensibilità.

  5. Utilizzate la scheda Immagini per caricare l'immagine del banner.

    L'utilizzo di un'immagine banner è facoltativa. Un'immagine banner può essere utile se il dispositivo è offline o in sfondo per il contenuto HTML trasparente.

  6. Utilizzate la scheda File di contenuto per caricare il file di articolo con il contenuto HTML.

  7. Se il banner dinamico è un annuncio, utilizzate la scheda Annuncio per specificare le informazioni per i dati dell'analisi.

  8. Aggiungete il banner a una raccolta. Accertatevi che sia posizionato correttamente all'interno della raccolta (ad esempio in alto) in modo da essere visualizzato nella posizione appropriata nella pagina di ricerca.

  9. Se necessario, modificate un modello di layout in modo da includere una scheda che visualizzerà il banner.

    Ad esempio, potete creare una scheda che copre la larghezza del dispositivo e una regola che esegue la mappatura della scheda a qualsiasi banner. Consultate Creazione di schede e layout.

Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online