Show Menu
TOPICS×

Utilizzo di Adobe Client Data Layer per integrare i componenti core e Adobe Launch

I componenti core possono essere integrati con Adobe Launch utilizzando Adobe Client Data Layer. Questo documento descrive come configurare Adobe Launch per tenere traccia degli eventi click per i componenti immagine come esempio.
Quando è configurata, Launch genera il seguente output nella console del browser quando si fa clic su un componente Immagine principale.

Integrazione di Launch con AEM

Primo avvio Adobe deve essere integrato con il sito AEM.

Passaggio 1 - Creazione di un'integrazione in Adobe I/O

Effettuate prima l'accesso ad Adobe I/O per avviare la configurazione di un'integrazione.
  1. Passa a
    https://console.adobe.io
    .
  2. Effettuate l'accesso con il vostro Adobe ID.
  3. Nella sezione Avvio rapido, fate clic su
    Crea integrazione
    .
  4. Select
    Access an API
    and click
    Continue
    .
  5. Seleziona l’API
    di avvio della piattaforma
    Experience
    sotto Adobe Experience Platform e fai clic su
    Continue (Continua).

Passaggio 2 - Creazione di una configurazione IMS in AEM

In AEM è necessario definire l’integrazione che hai iniziato a configurare in Adobe I/O.
  1. Vai alla home page di AEM, fai clic su
    Strumenti > Protezione > Configurazioni
    Adobe IMS.
  2. Fai clic su
    Crea
    .
  3. Come soluzione
    ​Cloud, seleziona
    Adobe Launch
    .
  4. Selezionare
    Crea nuovo certificato
    .
  5. Inserite un alias per il certificato, ad esempio
    aem-launch-certificate
    .
  6. Fate clic su
    Crea certificato
    e, nella finestra a comparsa, fate clic su
    OK
    per creare il certificato.
  7. Fate clic su
    Scarica chiave
    pubblica e, nel menu a comparsa, fate clic su
    Scarica
    .

Passaggio 3 - Fine della configurazione di I/O Adobe

Con il certificato e la chiave creati nella configurazione AEM IMS, potete completare la configurazione di I/O Adobe.
  1. Tornate alla console Adobe I/O come nel passaggio 1.
  2. Nella finestra
    Crea nuova integrazione
    , immetti un nome e una descrizione come il livello
    dati di avvio
    AEM.
  3. In Certificati
    di chiavi
    pubbliche caricate il certificato creato al passaggio 2.
  4. Selezionate il profilo
    Launch - Prod
    .
  5. Click
    Create integration
    .
  6. Fate clic su
    Continua per visualizzare i dettagli
    dell'integrazione. In seguito, per completare la configurazione IMS nell’istanza di AEM, saranno necessari i seguenti dettagli.

Passaggio 4 - Fine della configurazione IMS

Con i dettagli di integrazione I/O di Adobe, puoi completare la configurazione di AEM IMS.
  1. Nella scheda AEM, nella scheda Configurazione
    account tecnico
    Adobe IMS del passaggio 2, fate clic su
    Avanti
    .
  2. Immetti un titolo come la configurazione
    IMS per Adobe Launch
    .
  3. Nella scheda I/O di Adobe, copiate la chiave
    API (ID client)
    .
  4. Nella scheda AEM, incollate la chiave precedentemente copiata nel campo
    Chiave
    API.
  5. In Adobe I/O, fate clic su
    Recupera Segreto
    cliente e copiatelo.
  6. Nella scheda AEM incollatela nel campo Segreto
    cliente
    .
  7. Nella scheda Adobe I/O, selezionate la scheda
    JWT
    e copiate l’URL come
    https://ims-na1.adobelogin.com
    .
  8. Nella scheda AEM, incollate l’URL nel campo
    Server
    di autorizzazione.
  9. Nella scheda I/O di Adobe, copiate il payload JWT (il codice tra le parentesi).
  10. Nella scheda AEM, incollatela nel campo
    Payload
    .
  11. Fate clic su
    Crea
    per creare la configurazione IMS in AEM.

Passaggio 5a - Creazione di una proprietà in Adobe Launch

Una proprietà definisce le funzioni che Launch può inserire nel sito.
  1. Vai ad Adobe Launch all'indirizzo
    https://launch.adobe.com
    .
  2. Effettuate l'accesso con il vostro Adobe ID.
  3. Fate clic su
    Nuova proprietà
    .
  4. Immettete un nome, ad esempio
    Avvia livello
    dati AEM.
  5. Immettete il vostro dominio.
  6. Fai clic su
    Salva
    .

Passaggio 5b - Crea una regola in Launch

Utilizzando la proprietà creata, è possibile definire una regola che specifica cosa deve accadere quando si verifica un'azione.
  1. Fai clic sulla nuova proprietà aggiunta dal passaggio 5
    Avvia livello
    dati AEM.
  2. Selezionate la scheda
    Regole
    e fate clic su
    Crea nuova regola
    .
  3. Immettete un nome, ad esempio fate clic
    sull’
    immagine.
  4. Fate clic sul pulsante
    +
    sotto
    Eventi
    .
  5. Selezionate
    Core
    as
    Extension
    ,
    fate clic
    come tipo
    di
    evento e immettete
    .cmp-image
    ​come selettore CSS.
  6. Fare clic su
    Mantieni modifiche
    .
  7. Fare clic sul pulsante
    +
    sotto
    Azioni
    .
  8. Selezionate
    Core
    as
    Extension
    ,
    Custom Code
    as
    Action Type
    (Core
    come estensione) e fate clic su
    Open Editor (Apri editor).
  9. Nell’editor, immettete il seguente codice:
    console.log("DOM click event tracked by Launch for image: ", event.target.src);
  10. Fai clic su
    Salva
    .
  11. Fare clic su
    Mantieni modifiche
    .
  12. Fate clic su
    Salva
    per creare la nuova regola.

Passaggio 6 - Pubblicare la regola di avvio

Per rendere disponibile la nuova regola per il sito AEM, è necessario pubblicarla.
  1. Nella scheda
    Adobe Launch
    , selezionate la scheda
    Publishing
    .
  2. Fate clic su
    Aggiungi nuova libreria
    .
  3. Immettete un
    nome
    come appropriato, ad esempio
    demo-1
    .
  4. In
    Ambiente
    , selezionate le opzioni appropriate, ad esempio
    Sviluppo (sviluppo)
    .
  5. Fate clic su
    Aggiungi una risorsa
    .
  6. Selezionare
    Regole -> Image-click -> Ultime
    e fare clic su
    Seleziona e crea una nuova revisione
    .
  7. Fai clic su
    Salva e genera per sviluppo
    .
  8. Nella finestra a comparsa, fate clic su
    Applica aggiornamenti e continua
    .
  9. Quando la libreria è generata, fate clic sull'icona con i puntini di sospensione e selezionate
    Invia per approvazione
    .
  10. Nella finestra a comparsa, fate clic su
    Invia
    .
  11. Fate clic sull'icona con i puntini di sospensione e selezionate
    Genera per l'area di visualizzazione
    .
  12. Al termine della creazione, fate clic sull'icona con i puntini di sospensione e selezionate
    Approva per la pubblicazione
    .
  13. Fare clic su
    Approva
    nella finestra a comparsa.
  14. Fate clic sull'icona con i puntini di sospensione e selezionate
    Genera e pubblica in produzione
    .
  15. Nella finestra a comparsa fate clic su
    Pubblica
    .

Passaggio 7 - Abilita configurazioni cloud per il tuo sito

Per utilizzare l’integrazione, è necessario assegnarla in AEM come configurazione cloud.
  1. Nella console AEM, fate clic su
    Strumenti > Generale > Browser
    di configurazione.
  2. Controllare gli esempi
    dei componenti
    core e fare clic su
    Proprietà
    .
  3. Controlla le configurazioni
    ​cloud e fai clic su
    Salva e chiudi
    .

Passaggio 8 - Creare un’integrazione di Launch con il sito in AEM

Per poter utilizzare AEM con Launch, è necessaria un’integrazione Launch
  1. Nella console AEM, fai clic su
    Strumenti > Servizi cloud > Configurazioni
    di Adobe Launch.
  2. Selezionate Esempi
    di componenti
    core e fate clic su
    Crea
    .
  3. Immettete un
    titolo
    , ad esempio la configurazione
    ​Launch.
  4. Selezionate la configurazione IMS creata al punto 4.
  5. Come
    Azienda
    seleziona il caso.
  6. Come
    proprietà
    , seleziona la nuova proprietà Launch creata al punto 5.
  7. Spostate il cursore
    Includi codice produzione sull'autore
    a destra e fate clic su
    Avanti
    .
  8. Fai clic su
    Avanti
    .
  9. Fai clic su
    Avanti
    .
  10. Fai clic su
    Crea
    .

Passaggio 9 - Collegate il sito AEM all'integrazione Launch

Per poter utilizzare l’integrazione Launch, AEM deve essere assegnato come configurazione cloud.
  1. Nella console AEM, fate clic su
    Siti
    e selezionate il sito
    ​Componenti di base.
  2. Fate clic su
    Proprietà
    .
  3. Select the
    Advanced
    tab.
  4. Come Configurazione
    ​cloud, seleziona gli esempi
    di componenti
    core e fai clic su
    Seleziona
    .
  5. Click
    Save & Close
    .

Passaggio 10 - Verificare che la logica di avvio sia applicata alla pagina

Verificate che i passaggi finora eseguiti siano stati efficaci.
  1. Aprite la pagina Immagine della Libreria componenti core in modalità di anteprima:
    http://<lhost&gt;:<port&gt;/editor.html/content/core-components-examples/library/page-authoring/image.html
  2. Fate clic su un’immagine e verificate che il messaggio
    A Core Image was clicked
    sia visualizzato nella console del browser.

Avvia l’integrazione con AEM e il livello dati

Ora che è stata configurata l’integrazione tra AEM e Launch, possiamo effettuare l’integrazione con il livello dati.

Passaggio 1 - Creazione di una regola in Adobe Launch

Ripetete i passaggi del passaggio 5 per aggiungere una nuova regola in Adobe Launch utilizzando i valori seguenti.
  • Nome:
    image-click-data-layer
  • EVENTI:
    • Estensione: Core
    • Tipo evento: DOM Ready
  • AZIONI:
    • Estensione: Core
    • Tipo azione: Codice personalizzato
    • Codice:
      function onImageClick(event) { console.log("Data layer click event tracked by Launch for image: " + event.info.path); console.log("dataLayer.getState(): ", adobeDataLayer.getState()); } adobeDataLayer.addEventListener('image clicked', onImageClick);

Passaggio 2 - Pubblicate la regola di avvio per renderla disponibile nel sito AEM

Ripetete i passaggi del passaggio 6 per pubblicare la nuova regola.

Passaggio 3 - Verificare che la logica di avvio sia applicata alla pagina

  1. Aprite la pagina Immagine della Libreria componenti core in modalità di anteprima:
    http://<host&gt;:<port&gt;/editor.html/content/core-components-examples/library/page-authoring/image.html
  2. Fate clic su un’immagine e verificate che nella console del browser sia visualizzato il seguente messaggio: