Show Menu
TOPICS×

Utilizzo livello dati client Adobe per integrare componenti core e lancio del Adobe

I componenti core possono essere integrati con Adobe Launch utilizzando il Adobe Client Data Layer. Questo documento descrive come configurare lancio Adobe per tenere traccia degli eventi clic 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 Adobe Launch deve essere integrato con il sito AEM.

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

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

Passaggio 2 - Creazione di una configurazione IMS in AEM

In AEM è necessario definire l'integrazione che è stata avviata la configurazione in I/O Adobe.
  1. Vai alla home page AEM, fai clic su
    Strumenti > Protezione > Adobi IMS Configurations
    .
  2. Fai clic su
    Crea
    .
  3. Come soluzione
    ​Cloud, seleziona
    lancio
    Adobe.
  4. Check
    Create new certificate
    .
  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 - Termina configurazione I/O Adobe

Con il certificato e la chiave creati AEM configurazione IMS, potete completare la configurazione I/O Adobe.
  1. Tornate alla console I/O Adobe come nel passaggio 1.
  2. Nella finestra
    Crea una nuova integrazione
    , immetti un nome e una descrizione, ad esempio
    AEM livello
    dati di avvio.
  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. Successivamente, per completare la configurazione IMS nell’istanza AEM, è necessario disporre di questi dettagli.

Passaggio 4 - Completare la configurazione IMS

Con i dettagli di integrazione I/O Adobe, potete completare la configurazione AEM IMS.
  1. Nella scheda AEM, nel
    Adobe IMS Scheda Configurazione
    account tecnico IMS dal passaggio 2, fate clic su
    Avanti
    .
  2. Inserite un titolo come la configurazione
    IMS per lancio
    Adobe.
  3. Nella scheda I/O Adobe, copiate la chiave
    API (ID client)
    .
  4. Nella scheda AEM, incollate la chiave precedentemente copiata nel campo
    Chiave
    API.
  5. In I/O Adobe, fate clic su
    Recupera Segreto
    cliente e copiatelo.
  6. Nella scheda AEM incollarla nel campo Segreto
    cliente
    .
  7. Nella scheda I/O Adobe, selezionate la scheda
    JWT
    e copiate l’URL come
    https://ims-na1.adobelogin.com
    .
  8. Nella scheda AEM, incollate l’URL nel campo Server
    ​autorizzazione.
  9. Nella scheda I/O 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 - Crea una proprietà in lancio Adobe

Una proprietà definisce le funzioni che Launch può inserire nel sito.
  1. Vai a Adobe Launch all'indirizzo
    https://launch.adobe.com
    .
  2. Effettuate l'accesso utilizzando il vostro Adobe ID .
  3. Fate clic su
    Nuova proprietà
    .
  4. Immettete un nome, ad esempio
    Avvia AEM Livello
    dati.
  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
    Lancio AEM Livello
    dati.
  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 Lancio
    Adobe
    , selezionate la scheda
    Pubblicazione
    .
  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, deve essere assegnata 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: crea un'integrazione di Launch con il tuo sito in AEM

Per poter AEM con Launch è necessaria un’integrazione Launch
  1. Nella console AEM, fate clic su
    Strumenti > Cloud Services > configurazioni
    di avvio Adobe.
  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 - Collegare il sito AEM all'integrazione Launch

Per AEM utilizzare l'integrazione Launch, è necessario assegnarla 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. Fai clic su
    Salva e chiudi
    .

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.

Integrazione di Launch con AEM e livello dati

Ora che l'integrazione tra AEM e Launch è configurata, possiamo integrarci con il Livello dati.

Passaggio 1 - Crea una regola in lancio Adobe

Ripetete i passaggi del passaggio 5 per aggiungere una nuova regola lancio Adobe utilizzando i seguenti valori.
  • 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 sul 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: