Aggiungere Adobe Target

In questa lezione, implementeremo l’estensione Adobe Target con una richiesta di caricamento pagina e parametri personalizzati.

Adobe Target è la soluzione di Adobe Experience Cloud che offre tutto il necessario per adattare e personalizzare l’esperienza dei clienti in modo da massimizzare i ricavi sui siti web e mobili, applicazioni, social media e altri canali digitali.

NOTE
Adobe Experience Platform Launch viene integrato in Adobe Experience Platform come suite di tecnologie per la raccolta dati. Nell’interfaccia sono state introdotte diverse modifiche terminologiche di cui tenere conto quando si utilizza questo contenuto:
  • Il platform launch (lato client) è ora tags
  • Platform launch Server Side è ora event forwarding
  • Le configurazioni Edge ora sono datastreams

Finalità di apprendimento

Alla fine di questa lezione, potrai:

  • Aggiungi il frammento pre-hiding utilizzato per gestire lo sfarfallio quando utilizzi Target con codici di incorporamento di tag asincroni
  • Aggiungere l’estensione Target v2
  • Attivare la richiesta di caricamento pagina (precedentemente denominata "mbox globale")
  • Aggiungere parametri alla richiesta di caricamento pagina
  • Spiegare in che modo i parametri di profilo ed entità possono essere aggiunti alla richiesta di caricamento pagina
  • Attivare la richiesta di conferma dell’ordine con i parametri richiesti
  • Spiegare come aggiungere configurazioni avanzate, ad esempio il codice Library Header e Library Footer
  • Convalidare un’implementazione di Target

Prerequisiti

Per completare le lezioni in questa sezione, devi prima completare le lezioni in Configurare i tag e Aggiungere il servizio Identity.

Aggiungere il frammento pre-hiding di Target

Prima di iniziare, è necessario aggiornare leggermente i codici di incorporamento dei tag. Quando i codici di incorporamento dei tag vengono caricati in modo asincrono, la pagina potrebbe terminare il rendering prima che la libreria di Target sia completamente caricata e abbia eseguito lo scambio di contenuto. Questo può causare il cosiddetto "sfarfallio", in cui il contenuto predefinito viene visualizzato brevemente prima di essere sostituito dal contenuto personalizzato specificato da Target. Per evitare questo sfarfallio, consigliamo vivamente di codificare un frammento pre-hiding speciale immediatamente prima dei codici di incorporamento asincroni dei tag.

Questa operazione è già stata eseguita sul sito Luma, ma continuiamo a farlo sulla pagina di esempio in modo da riuscire a capire l’implementazione. Copia le seguenti righe di codice:

<script>
   //prehiding snippet for Adobe Target with asynchronous tags deployment
   ;(function(win, doc, style, timeout) {
   var STYLE_ID = 'at-body-style';
   function getParent() {
      return doc.getElementsByTagName('head')[0];
   }
   function addStyle(parent, id, def) {
      if (!parent) {
      return;
      }
      var style = doc.createElement('style');
      style.id = id;
      style.innerHTML = def;
      parent.appendChild(style);
   }
   function removeStyle(parent, id) {
      if (!parent) {
      return;
      }
      var style = doc.getElementById(id);
      if (!style) {
      return;
      }
      parent.removeChild(style);
   }
   addStyle(getParent(), STYLE_ID, style);
   setTimeout(function() {
      removeStyle(getParent(), STYLE_ID);
   }, timeout);
   }(window, document, "body {opacity: 0 !important}", 3000));
</script>

Apri la pagina di esempio e incollala immediatamente prima del codice di incorporamento di tag come illustrato di seguito (non preoccuparti se i numeri di riga sono diversi). In questa schermata il frammento pre-hiding è stato ridotto al minimo:

Passa il puntatore sull’estensione

Ricarica la pagina di esempio. La pagina verrà nascosta per tre secondi prima della visualizzazione. Questo comportamento è temporaneo e sparirà dopo la distribuzione di Target. Questo comportamento di pre-hiding è controllato da due configurazioni alla fine del frammento, che possono essere personalizzate, ma che generalmente è meglio lasciare con le impostazioni predefinite:

  • body {opacity: 0 !important} specifica la definizione CSS da utilizzare per il pre-hiding fino al caricamento di Target. Per impostazione predefinita, l’intero corpo è nascosto. Se ad esempio disponi di una struttura DOM coerente con un elemento contenitore facilmente identificato che racchiude tutti i contenuti inclusi nella navigazione e non desideri testare o personalizzare la navigazione, potresti utilizzare questa impostazione per limitare il pre-hiding per quell’elemento contenitore.
  • 3000 specifica l’impostazione di timeout per il pre-hiding. Per impostazione predefinita, se Target non viene caricato in tre secondi, la pagina verrà visualizzata. Questo dovrebbe accadere di rado.

Per ulteriori dettagli e per ottenere il frammento pre-hiding non minimizzato, consulta l’estensione Adobe Target con implementazione asincrona.

Aggiungere l’estensione Target

L’estensione Adobe Target supporta implementazioni lato client tramite SDK JavaScript di Target per il moderno web, at.js. I clienti che usano ancora una libreria Target precedente, mbox.js, deve effettuare l’aggiornamento a at.js 2.x per utilizzare i tag.

L’estensione Target v2 consiste in due parti principali:

  1. La configurazione dell’estensione, che gestisce le impostazioni della libreria principale

  2. Azioni di regola per eseguire le operazioni seguenti:

    1. Caricare Target (at.js 2.x)
    2. Aggiungere parametri alle Richieste di caricamento pagina
    3. Aggiungere parametri a Tutte le richieste
    4. Attivare Richiesta di caricamento pagina

In questo primo esercizio aggiungeremo l’estensione ed esamineremo le configurazioni. Negli esercizi successivi utilizzeremo le azioni.

Aggiungere l’estensione

  1. Passa a Estensioni > Catalogo

  2. Digita target nel filtro per individuare rapidamente le estensioni Adobe Target. Esistono due estensioni: Adobe Target e Adobe Target v2. Questa esercitazione utilizzerà la versione v2 dell’estensione che utilizza l’ultima versione di at.js (attualmente 2.x), ideale sia per i siti web tradizionali che per le applicazioni a pagina singola (SPA).

  3. Fai clic su Installa

    Installare l’estensione Target v2

  4. Quando aggiungi l’estensione, verranno importate molte delle impostazioni at.js dall’interfaccia di Target, ma non tutte, come illustrato di seguito. Un’impostazione che non verrà importata è Timeout, che sarà sempre di 3000 ms dopo l’aggiunta dell’estensione. Per l’esercitazione, lascia le impostazioni predefinite. Tieni presente che a sinistra verrà mostrata la versione at.js fornita con la versione corrente dell’estensione.

  5. Fai clic su Salva nella libreria

    Salvare l’estensione

A questo punto, Target non esegue realmente alcuna operazione, quindi non c’è nulla da convalidare.

NOTE
Ogni versione dell’estensione Target viene fornita con una versione specifica di at.js, indicata nella descrizione dell’estensione. Aggiorna la versione at.js aggiornando l’estensione Target.

Carica Target e attiva la Richiesta di caricamento pagina

Gli esperti di marketing utilizzano Target per controllare l’esperienza dei visitatori sulla pagina durante il test e il targeting del contenuto. A causa di questo ruolo importante nella visualizzazione della pagina, Target dovrebbe essere caricato il prima possibile per ridurre al minimo l’impatto sulla visibilità delle pagine. In questa sezione, verranno caricate la libreria JavaScript di Target, at.js, nonché la richiesta di caricamento pagina (detta "mbox globale" nelle versioni precedenti di at.js).

Puoi utilizzare la regola All Pages - Library Loaded creata nella lezione "Aggiungere elementi dati, regole e librerie" per implementare Target in quanto è già stata attivata il prima possibile sui caricamenti di pagina.

Per caricare Target

  1. Vai a Regole nel menu di navigazione a sinistra, quindi fai clic su All Pages - Library Loaded per aprire l’editor di regole

    Apri All Pages - Library Loaded Rule

  2. In Azioni, fai clic su fai clic sull’icona Più per aggiungere una nuova azione.

    Fare clic sull’icona Più per aggiungere una nuova azione

  3. Seleziona Estensione > Adobe Target v2

  4. Seleziona Tipo azione > Carica Target

  5. Fai clic su Mantieni modifiche.

    Fai clic su Mantieni modifiche

Aggiungendo l’azione Load Target, at.js viene caricato sulla pagina. Tuttavia, nessuna richiesta Target verrà attivata finché non verrà aggiunta l’azione Fire Page Load Request.

Per attivare la Richiesta di caricamento pagina

  1. In Azioni, fai nuovamente clic sull’icona Clic sull’icona Più per aggiungere un’altra azione

    Fai clic sull’icona Più per aggiungere un’altra azione

  2. Seleziona Estensione > Adobe Target v2

  3. Seleziona Tipo azione > Attiva Richiesta di caricamento pagina

  4. Sono disponibili alcune configurazioni per la richiesta di caricamento pagina collegate all’operazione di nascondere la pagina e il selettore CSS da utilizzare per il pre-hiding. Queste impostazioni funzionano insieme al frammento pre-hiding codificato nella pagina. Lascia le impostazioni predefinite.

  5. Fai clic su Mantieni modifiche.

    Azione Attiva richiesta di caricamento pagina

  6. La nuova azione viene aggiunta in sequenza dopo l’azione Load Target e le azioni vengono eseguite in questo ordine. Puoi trascinare le azioni per riordinare l’ordine, ma in questo caso Load Target deve essere precedente a Fire Page Load Request.

  7. Fai clic su Salva nella libreria e genera

    Salva e genera

Convalidare la richiesta di caricamento pagina

Ora che hai aggiunto l’estensione Target v2 e hai attivato Load Target e Fire Page Load Request , deve essere effettuata una richiesta di caricamento pagina su tutte le pagine in cui viene utilizzata la proprietà tag.

Per convalidare le azioni di Carica Target e Attiva Richiesta di caricamento pagina

  1. Ricarica la pagina di esempio. Non si verifica più un ritardo di tre secondi prima che la pagina sia visibile. Se stai caricando la pagina di esempio utilizzando il protocollo file://, devi effettuare questo passaggio in un browser Firefox o Safari perché Chrome non attiverebbe una richiesta Target quando viene utilizzato il protocollo file://.

  2. Apri il sito Luma.

  3. Accertati che Debugger mappi la proprietà tag a tuo Ambiente di sviluppo, come descritto nella sezione lezione precedente

    L’ambiente di sviluppo dei tag mostrato in Debugger

  4. Vai alla scheda Riepilogo del debugger

  5. Nella sezione Launch, conferma che Target venga visualizzato sotto l’intestazione Extensions

  6. Nella sezione Target, verifica che venga visualizzata la versione della libreria at.js

    Conferma che Target venga visualizzato nella scheda Riepilogo del debugger

  7. Infine, vai alla scheda Target, espandi il codice client e conferma che venga visualizzata la richiesta di caricamento pagina:

    Conferma che la richiesta di Caricamento pagina sia stata effettuata

Congratulazioni! Hai implementato Target!

Aggiungere i parametri

Il passaggio dei parametri nella richiesta Target aggiunge funzionalità avanzate alle attività di targeting, test e personalizzazione. L’estensione tag fornisce due azioni per trasmettere i parametri:

  1. Add Params to Page Load Request, che aggiunge parametri alle richieste di caricamento di pagina (equivalente al metodo targetPageParams())

  2. Add Params to All Requests, che aggiunge parametri in tutte le richieste Target, ad esempio la richiesta di caricamento pagina più richieste aggiuntive effettuate da azioni del Codice personalizzato o di codifica fissa nel sito (equivalente al metodo targetPageParamsAll())

Queste azioni possono essere utilizzate prima dell’azione Load Target e possono impostare parametri diversi su pagine diverse in base alle configurazioni della regola. Utilizza la funzione di ordinamento delle regole utilizzata durante l’impostazione degli ID cliente con il servizio Identity per impostare parametri aggiuntivi sull’evento Library Loaded prima che la regola attivi la richiesta di caricamento pagina.

TIP
Poiché la maggior parte delle implementazioni utilizza la richiesta di caricamento pagina per la distribuzione dell’attività, in genere è sufficiente utilizzare l’azione Add Params to Page Load Requests.

Parametri di richiesta (mbox)

I parametri vengono utilizzati per trasmettere dati personalizzati a Target, arricchendo le capacità di personalizzazione. Sono ideali per gli attributi che cambiano frequentemente durante una sessione di navigazione come il nome della pagina, il modello, ecc. e che non persistono.

Aggiungiamo l’elemento dati Page Name creato in precedenza nella lezione Aggiungere elementi dati, regole e librerie come parametro della richiesta.

Per aggiungere il parametro della richiesta

  1. Vai a Regole nel menu di navigazione a sinistra, quindi fai clic su All Pages - Library Loaded per aprire l’editor di regole.

    Apri All Pages - Library Loaded Rule

  2. In Azioni, fai clic su fai clic sull’icona Più per aggiungere una nuova azione.

    Fare clic sull’icona Più per aggiungere una nuova azione

  3. Seleziona Estensione > Adobe Target v2

  4. Seleziona Tipo azione > Aggiungi parametri alla Richiesta di caricamento pagina

  5. Inserisci pageName come Nome

  6. Fai clic sull’ icona elementi dati per aprire l’elemento dati modale

  7. Fai clic sull’elemento dati Page Name

  8. Fai clic sul pulsante Seleziona.

    Fai clic sul pulsante Seleziona

  9. Fai clic su Mantieni modifiche.

    Fai clic su Mantieni modifiche

  10. Fai clic e trascina sul bordo sinistro dell’azione Add Params to Page Load Request per ridisporre le azioni eseguite prima dell’azione Fire Page Load Request (prima o dopo Load Target)

  11. Fai clic su Salva nella libreria e genera

    Fare clic su Salva nella libreria e genera

Convalidare i parametri della richiesta

Per il momento, i parametri personalizzati passati con le richieste at.js 2.x non sono facilmente visibili nel debugger, pertanto utilizzeremo gli strumenti di sviluppo del browser.

Per convalidare il parametro della richiesta pageName

  1. Ricarica il sito Luma, verificando che sia mappato sulla tua proprietà tag
  2. Apri gli strumenti per sviluppatori del browser
  3. Fai clic sulla scheda Rete
  4. Filtra le richieste in tt.omtrdc (o al dominio CNAME per le richieste Target)
  5. Espandi la sezione Headers > Request Payload > execute.pageLoad.parameters per convalidare il parametro e il valore pageName

parametro pageName nel debugger

Parametri del profilo

Analogamente ai parametri mbox, i parametri di profilo vengono trasmessi attraverso la richiesta Target. Tuttavia, i parametri di profilo vengono memorizzati nel database del profilo visitatore di Target e persistono per la sua durata. Puoi impostarli su una pagina del sito e utilizzarli nelle attività di Target su un’altra pagina. Esempio da un sito web automobilistico. Quando un visitatore va sulla pagina di un veicolo, potresti trasmettere un parametro di profilo "profile.lastViewed=sportscar" per registrare il loro interesse in quel particolare veicolo. Quando il visitatore passa ad altre pagine non collegate a veicoli, puoi eseguire il targeting del contenuto in base all’ultimo veicolo visualizzato. I parametri di profilo sono ideali per le attribuzioni che raramente si modificano o sono disponibili solo su determinate pagine

Non trasmetterai alcun parametro di profilo in questa esercitazione, ma il flusso di lavoro è quasi identico a quello che si verifica quando trasmetti il parametro pageName. L’unica differenza consiste nel fatto che devi assegnare un prefisso profile. ai nomi del parametro di profilo. Questo è l’aspetto di un parametro di profilo denominato "userType" nell’azione Add Params to Page Load Request:

Impostazione di un parametro di profilo

Parametri entità

I parametri di entità sono parametri speciali utilizzati nelle implementazioni di raccomandazioni per tre motivi principali:

  1. Come chiave per attivare raccomandazioni sui prodotti. Ad esempio, quando si utilizza un algoritmo di raccomandazioni come "People who viewed Product X, also viewed Y", "X" è la "chiave" della raccomandazione. In genere è lo SKU del prodotto (entity.id) o la categoria (entity.categoryId) attualmente visualizzata dal visitatore.
  2. Per raccogliere il comportamento dei visitatori e potenziare gli algoritmi di raccomandazioni, ad esempio "Recently Viewed Products" o "Most Viewed Products"
  3. Compilazione del catalogo Raccomandazioni. Raccomandazioni contiene un database di tutti i prodotti o articoli sul sito web, in modo che possano essere serviti nell’offerta di raccomandazione. Ad esempio, durante la raccomandazione dei prodotti, in genere si desiderano visualizzare attributi come il nome del prodotto (entity.name) e l’immagine (entity.thumbnailUrl). Alcuni clienti compilano il catalogo utilizzando i feed di backend, ma possono anche essere compilati utilizzando i parametri delle entità nelle richieste Target.

Non è necessario trasmettere parametri di entità in questa esercitazione, ma il flusso di lavoro è identico a quello eseguito in precedenza al momento del passaggio del pageName parametro di richiesta (request parameter) - assegnate al parametro un nome con il prefisso "entity". e mappalo sull’elemento dati pertinente. Tieni presente che alcune entità comuni presentano nomi riservati che devono essere utilizzati (ad esempio, entity.id per lo SKU del prodotto). Per impostare i parametri delle entità nell’azione Add Params to Page Load Request:

Aggiunta di parametri di entità

Aggiungere parametri ID cliente

La raccolta di ID cliente con il servizio Adobe Experience Platform Identity semplifica l’importazione di dati CRM in Target tramite la funzione Attributi cliente di Adobe Experience Cloud. Abilita inoltre la combinazione di visitatori su più dispositivi, per mantenere un’esperienza utente coerente quando i clienti passano da un laptop a un dispositivo mobile.

È fondamentale impostare l’ID cliente nell’azione Set Customer IDs del servizio Identity prima di attivare la richiesta di caricamento pagina. A tale fine, assicurati di disporre delle seguenti funzionalità sul sito:

  • L’ID cliente deve essere disponibile sulla pagina prima del codice di incorporamento dei tag
  • L’estensione del servizio Adobe Experience Platform Identity deve essere installata
  • Devi utilizzare l’azione Set Customer IDs in una regola che viene attivata all’evento “Library Loaded (Page Top)” (Libreria caricata (Inizio pagina))
  • Utilizza l’azione Fire Page Load Request in una regola che viene attivata dopo l’azione "Imposta ID cliente"

Nella lezione precedente, Aggiungere il servizio Adobe Experience Platform Identity, hai creato la regola All Pages - Library Loaded - Authenticated - 10 per attivare l’azione "Imposta ID cliente". Poiché questa regola presenta un’impostazione Order di 10, gli ID cliente vengono impostati prima che la nostra richiesta di caricamento pagina venga attivata dalla regola All Pages - Library Loaded con l’impostazione Order di 50. Pertanto, hai già implementato la raccolta degli ID cliente per Target!

Convalidare l’ID cliente

Per il momento, i parametri personalizzati passati con le richieste at.js 2.x non sono facilmente visibili nel debugger, pertanto utilizzeremo gli strumenti di sviluppo del browser.

Per convalidare l’ID cliente

  1. Apri il sito Luma.

  2. Accertati che Debugger mappi la proprietà tag a tuo Ambiente di sviluppo, come descritto nella sezione lezione precedente

    L’ambiente di sviluppo dei tag mostrato in Debugger

  3. Accedi al sito Luma utilizzando le credenziali test@adobe.com/test

  4. Torna alla home page di Luma

  5. Apri gli strumenti per sviluppatori del browser

  6. Fai clic sulla scheda Rete

  7. Filtra le richieste in tt.omtrdc (o al dominio CNAME per le richieste Target)

  8. Espandi la sezione Headers > Request Payload > id.customerIds.0 per convalidare le impostazioni e il valore dell’ID cliente:

impostazioni ID cliente nel debugger

WARNING
Il servizio Adobe Experience Platform Identity consente di inviare più ID al servizio. Tuttavia, solo il primo verrà inviato a Target.

Aggiungere il parametro Token di proprietà

NOTE
Questo è un esercizio facoltativo per i clienti Target Premium.

Il token di proprietà è un parametro riservato utilizzato con la funzione Autorizzazioni utente Target Premium Enterprise. Viene utilizzato per definire proprietà digitali diverse, in modo che ai diversi membri di un’organizzazione Experience Cloud possano essere assegnate autorizzazioni diverse a ciascuna proprietà. Ad esempio, potresti desiderare che un gruppo di utenti sia in grado di configurare le attività Target sul tuo sito web, ma non nell’applicazione mobile.

Le proprietà di Target sono simili alle proprietà dei tag e alle suite di rapporti di Analytics. Un’azienda con più marchi, siti web e team di marketing può utilizzare una proprietà Target diversa, una proprietà tag e una suite di rapporti Analytics per ogni sito web o app mobile. Le proprietà dei tag sono differenziate dai rispettivi codici di incorporamento, le suite di rapporti di Analytics sono differenziate dalla relativa suite di rapporti ID e le proprietà Target sono differenziate dal parametro token di proprietà.

Il token di proprietà deve essere implementato utilizzando un’azione del codice personalizzato nei tag con targetPageParams() funzione. Se implementi più siti con diversi utilizzando valori at_property diversi con una singola proprietà tag, puoi gestire il valore at_property tramite un elemento dati.

Questo è un esercizio facoltativo, se sei un cliente Target Premium e desideri implementare un token di proprietà nella proprietà Esercitazione:

  1. In una scheda separata, apri l’interfaccia utente di Target

  2. Vai a Amministrazione > Proprietà

  3. Identifica la Proprietà che desideri utilizzare e fai clic su </> (o crea una nuova proprietà)

  4. Copiare il frammento di codice all'interno di <script></script> negli Appunti

    Ottieni il token di proprietà dall’interfaccia di Adobe Target

  5. Nella scheda dei tag, vai a Regole nel menu di navigazione a sinistra, quindi fai clic su All Pages - Library Loaded per aprire l’editor di regole.

    Apri All Pages - Library Loaded Rule

  6. In Azioni, fai clic sull’azione Core - Custom Code per aprire la Action Configuration

    Aprire l’azione Aggiungi parametri a richiesta di caricamento pagina

  7. Apri l’editor di codice e incolla il codice dall’interfaccia di Target contenente targetPageParams() funzione

  8. Fai clic sul pulsante Salva pulsante

    Aprire l’azione Aggiungi parametri a richiesta di caricamento pagina

  9. Controlla la Esegui globalmente box so targetPageParams() è dichiarato nell'ambito globale

  10. Fai clic su Mantieni modifiche.

    Fai clic su Mantieni modifiche

  11. Fai clic su Salva nella libreria e genera
    Fai clic su Salva e genera nella libreria

WARNING
Se tenti di aggiungere at_property tramite il Aggiungere parametri alla richiesta di caricamento pagina azione, il parametro viene popolato nella richiesta di rete, ma il Compositore esperienza visivo di Target non sarà in grado di rilevarlo automaticamente durante il caricamento della pagina. Compila sempre at_property utilizzando targetPageParams() funzione in un'azione Custom Code.

Convalida il Token di proprietà

Per il momento, i parametri personalizzati passati con le richieste at.js 2.x non sono facilmente visibili nel debugger, pertanto utilizzeremo gli strumenti di sviluppo del browser.

Per convalidare il parametro Token di proprietà

  1. Apri il sito Luma.

  2. Accertati che Debugger mappi la proprietà tag a tuo Ambiente di sviluppo, come descritto nella sezione lezione precedente

    L’ambiente di sviluppo dei tag mostrato in Debugger

  3. Apri gli strumenti per sviluppatori del browser

  4. Fai clic sulla scheda Rete

  5. Filtra le richieste in tt.omtrdc (o al dominio CNAME per le richieste Target)

  6. Espandi la sezione Headers > Request Payload > property.token per convalidare il valore
    Il Token di proprietà deve essere visibile come parametro at_property in ogni richiesta

Aggiungere richieste personalizzate

Aggiungere una richiesta di conferma dell’ordine

La richiesta di conferma dell’ordine è un tipo speciale di richiesta utilizzata per inviare i dettagli dell’ordine a Target. L’inclusione di tre parametri di richiesta specifici: orderId, orderTotal e productPurchasedId, è ciò che trasforma una richiesta Target regolare in una richiesta di ordine. Oltre alle entrate di reporting, la richiesta dell’ordine esegue anche le seguenti operazioni:

  1. Annulla la duplicazioni di ordini riconfermati accidentalmente
  2. Filtra ordini estremi (qualsiasi ordine il cui totale era costituito da più di tre deviazioni standard dalla media)
  3. Utilizza un algoritmo diverso per calcolare la confidenza statistica
  4. Crea un rapporto Audit speciale scaricabile dei singoli dettagli dell'ordine

La best practice prevede l’utilizzo di una richiesta di conferma dell’ordine in tutti i funnel, anche sui siti non destinati alla vendita. Ad esempio, i siti di generazione di lead hanno in genere funnel lead con un "ID lead" univoco generato alla fine. Questi siti devono implementare una richiesta dell’ordine utilizzando un valore statico (ad esempio 1) per orderTotal.

I clienti che utilizzano l’integrazione Analytics for Target (A4T) per la maggior parte dei rapporti possono anche implementare la richiesta dell’ordine se utilizzano attività di Automated Personalization che non supportano A4T. Inoltre, la richiesta dell’ordine è un elemento critico nelle implementazioni delle Raccomandazioni, che potenzia gli algoritmi in base al comportamento d’acquisto. Per informazioni aggiornate sul supporto A4T, consulta la documentazione.

La richiesta di conferma dell’ordine dovrebbe attivarsi da una regola attivata solo nella pagina o nell’evento di conferma dell’ordine. Spesso può essere combinato con una regola che imposta l’evento di acquisto di Adobe Analytics. Deve essere configurato utilizzando l’azione Codice personalizzato dell’estensione Core, utilizzando gli elementi dati appropriati per impostare i parametri orderId, orderTotal e productPurchasedId.

Aggiungiamo gli elementi dati e la regola di cui abbiamo bisogno per attivare una richiesta di conferma dell’ordine sul sito Luma. Poiché hai già creato diversi elementi dati, queste istruzioni vengono abbreviate.

Per creare l’elemento dati per l’ID ordine

  1. Clic Elementi dati nel menu di navigazione a sinistra
  2. Fai clic su Aggiungi elemento dati
  3. Denomina l’elemento dati Order Id
  4. Seleziona Tipo di elemento dati > Variabile JavaScript
  5. Usa digitalData.cart.orderId come JavaScript variable name
  6. Controlla l’opzione Clean text
  7. Fai clic su Salva nella libreria
    (la libreria non verrà creata finché non verranno apportate tutte le modifiche per la richiesta di conferma dell’ordine)

Per creare l’elemento dati per l’Importo del carrello

  1. Fai clic su Aggiungi elemento dati
  2. Denomina l’elemento dati Cart Amount
  3. Seleziona Tipo di elemento dati > Variabile JavaScript
  4. Usa digitalData.cart.cartAmount come JavaScript variable name
  5. Controlla l’opzione Clean text
  6. Fai clic su Salva nella libreria

Per creare l’elemento dati per SKU carrello (Target)

  1. Fai clic su Aggiungi elemento dati

  2. Denomina l’elemento dati Cart SKUs (Target)

  3. Seleziona Tipo di elemento dati > Codice personalizzato

  4. Per Target, gli sku devono essere un elenco separato da virgole. Questo codice personalizzato riformatterà l’array di livello dati nel formato corretto. Nell’editor di codice personalizzato, incolla quanto segue:

    code language-javascript
    var targetProdSkus="";
    for (var i=0; i<digitalData.cart.cartEntries.length; i++) {
      if(i>0) {
        targetProdSkus = targetProdSkus + ",";
      }
      targetProdSkus = targetProdSkus + digitalData.cart.cartEntries[i].sku;
    }
    return targetProdSkus;
    
  5. Controlla l’opzione Force lowercase value

  6. Controlla l’opzione Clean text

  7. Fai clic su Salva nella libreria

Ora è necessario creare una regola per attivare la richiesta di conferma dell’ordine con questi elementi dati come parametri nella pagina di conferma dell’ordine.

Per creare la regola per la pagina Conferma ordine

  1. Clic Regole nel menu di navigazione a sinistra

  2. Fai clic su Aggiungi regola

  3. Denomina la regola Order Confirmation Page - Library Loaded - 60

  4. Fai clic su Eventi > Aggiungi

    1. Seleziona Tipo evento > Library Loaded (Page Top) (Libreria caricata (Inizio pagina))
    2. Sotto Opzioni avanzate, modifica il Order a 60 in modo che si attivi dopo Load Target azione (presente nel nostro All Pages - Library Loaded regola dove Order è impostato su 50)
    3. Fai clic su Mantieni modifiche.
  5. Fai clic su Condizioni > Aggiungi

    1. Seleziona Tipo condizione > Percorso senza stringa di query

    2. Per Path equals immetti thank-you.html

    3. Attiva l’opzione Regex per cambiare la logica da equals a contains (puoi usare la funzione Test per confermare che il test passerà con l’URL https://luma.enablementadobe.com/content/luma/us/en/user/checkout/order/thank-you.html

      Immetti i valori fittizi per nome e cognome

    4. Fai clic su Mantieni modifiche.

  6. Fai clic su Azioni > Aggiungi

    1. Seleziona Tipo azione > Codice personalizzato

    2. Fai clic su Apri editor

    3. Incolla il seguente codice nel modale Edit Code

      code language-javascript
      adobe.target.getOffer({
        "mbox": "orderConfirmPage",
        "params":{
           "orderId": _satellite.getVar('Order Id'),
           "orderTotal": _satellite.getVar('Cart Amount'),
          "productPurchasedId": _satellite.getVar('Cart SKUs (Target)')
        },
        "success": function(offer) {
          adobe.target.applyOffer({
            "mbox": "orderConfirmPage",
            "offer": offer
          });
        },
        "error": function(status, error) {
          console.log('Error', status, error);
        }
      });
      
    4. Fai clic su Salva per salvare il codice personalizzato

    5. Fai clic su Mantieni modifiche per mantenere l’azione

  7. Fai clic su Salva nella libreria e genera

Convalida la richiesta di conferma dell’ordine

Per il momento, i parametri personalizzati passati con le richieste at.js 2.x non sono facilmente visibili nel debugger, pertanto utilizzeremo gli strumenti di sviluppo del browser.

  1. Apri il sito Luma.

  2. Accertati che Debugger mappi la proprietà tag a tuo Ambiente di sviluppo, come descritto nella sezione lezione precedente

    L’ambiente di sviluppo dei tag mostrato in Debugger

  3. Sfoglia il sito e aggiungi più prodotti al carrello

  4. Procedi con il pagamento

  5. Durante il processo di pagamento gli unici campi obbligatori sono First Name e Last Name

    Immetti i valori fittizi per nome e cognome

  6. Sulla pagina Rivedi ordine, assicurati di fare clic sul pulsante Place Order

  7. Apri gli strumenti per sviluppatori del browser

  8. Fai clic sulla scheda Rete

  9. Filtra le richieste in tt.omtrdc (o al dominio CNAME per le richieste Target)

  10. Fai clic sulla seconda richiesta

  11. Espandi la sezione Headers > Request Payload > execute.mboxes.0 per convalidare il nome della richiesta e i parametri dell’ordine:

impostazioni della richiesta dell’ordine nel debugger

Richieste personalizzate

Esistono alcune rare istanze in cui devi effettuare richieste Target diverse dalla richiesta di caricamento pagina e di conferma dell’ordine. Ad esempio, a volte i dati importanti che desideri utilizzare per la personalizzazione non vengono definiti sulla pagina prima dei codici di incorporamento dei tag; potrebbero essere codificati in modo fisso nella parte inferiore della pagina o restituiti da una richiesta API asincrona. Questi dati possono essere inviati a Target utilizzando una richiesta aggiuntiva, anche se non sarebbe ottimale utilizzare questa richiesta per la distribuzione di contenuto, in quanto la pagina è già visibile. Questi dati possono essere utilizzati per arricchire il profilo visitatore per un uso successivo (utilizzando i parametri di profilo) o per popolare il catalogo Recommendations.

In queste circostanze, utilizza l’azione Codice personalizzato nell’estensione Core per attivare una richiesta utilizzando i metodi getOffer()/applyOffer() e trackEvent(). Si tratta di un processo simile a quello dell’esercizio Richiesta di conferma dell’ordine, ma utilizzerai un nome di richiesta diverso e non i parametri dell’ordine speciali. Assicurati di utilizzare l’azione Carica Target prima di effettuare richieste Target dal codice personalizzato.

La schermata Edit at.js nell’interfaccia utente di Target dispone delle posizioni in cui puoi incollare JavaScript personalizzato che viene eseguito immediatamente prima o dopo il file at.js. Talvolta, il Library Header viene utilizzato per sostituire le impostazioni at.js tramite la funzione targetGlobalSettings() o per trasmettere dati da terze parti tramite la funzione Data Provider. A volte, il Library Footer viene utilizzato per aggiungere listener di eventi personalizzati at.js.

Per replicare questa funzionalità nei tag, utilizza l’azione Custom Code nell’estensione Core e metti in sequenza l’azione prima (Library Header) o dopo (Library Footer) l’azione Load Target. Questa operazione può essere eseguita nella stessa regola dell’azione Load Target (come illustrato di seguito) oppure in regole separate con eventi o impostazioni d’ordine che in modo affidabile si attivino prima o dopo la regola che contiene Load Target:

Library Header e Library Footer nella sequenza Azioni

Per ulteriori informazioni su casi di utilizzo per header e footer personalizzati, consulta le risorse seguenti:

Avanti “Aggiungere Adobe Analytics” >

recommendation-more-help
45774420-d03e-4a6b-94b5-cd639ae825b2