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.
- Il platform launch (lato client) è ora tags
- Platform Launch Server Side è ora event forwarding
- Le configurazioni di Edge sono ora 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:
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, devono effettuare l'aggiornamento ad at.js 2.x per poter utilizzare i tag.
L’estensione Target v2 consiste in due parti principali:
-
La configurazione dell’estensione, che gestisce le impostazioni della libreria principale
-
Azioni di regola per eseguire le operazioni seguenti:
- Caricare Target (at.js 2.x)
- Aggiungere parametri alle Richieste di caricamento pagina
- Aggiungere parametri a Tutte le richieste
- 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
-
Vai a Estensioni > Catalogo
-
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). -
Fai clic su Installa
-
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.
-
Fai clic su Salva nella libreria
A questo punto, Target non esegue realmente alcuna operazione, quindi non c’è nulla da convalidare.
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
-
Vai a Regole nel menu di navigazione a sinistra, quindi fai clic su
All Pages - Library Loaded
per aprire l'editor di regole -
In Azioni, fai clic su per aggiungere una nuova azione.
-
Seleziona Estensione > Adobe Target v2
-
Seleziona Tipo azione > Carica Target
-
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
-
In Azioni, fai nuovamente clic sull’icona per aggiungere un’altra azione
-
Seleziona Estensione > Adobe Target v2
-
Seleziona Tipo azione > Attiva Richiesta di caricamento pagina
-
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.
-
Fai clic su Mantieni modifiche
-
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 casoLoad Target
deve essere precedente aFire Page Load Request
. -
Fai clic su Salva nella libreria e genera
Convalidare la richiesta di caricamento pagina
Dopo aver aggiunto l'estensione Target v2 e aver avviato le azioni Load Target
e Fire Page Load Request
, è necessario eseguire 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
-
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 protocollofile://
. -
Apri il sito Luma.
-
Accertati che Debugger mappi la proprietà tag nell'ambiente di sviluppo your, come descritto nella lezione precedente
-
Vai alla scheda Riepilogo del debugger
-
Nella sezione
Launch
, conferma cheTarget
venga visualizzato sotto l’intestazioneExtensions
-
Nella sezione
Target
, verifica che venga visualizzata la versione della libreria at.js -
Infine, vai alla scheda
Target
, espandi il codice client e conferma che venga visualizzata la richiesta di caricamento pagina:
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:
-
Add Params to Page Load Request
, che aggiunge parametri alle richieste di caricamento di pagina (equivalente al metodo targetPageParams()) -
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 Identity Service per impostare parametri aggiuntivi sull’evento Library Loaded
prima che la regola attivi la richiesta di caricamento pagina.
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
-
Vai a Regole nel menu di navigazione a sinistra, quindi fai clic su
All Pages - Library Loaded
per aprire l'editor di regole. -
In Azioni, fai clic su per aggiungere una nuova azione.
-
Seleziona Estensione > Adobe Target v2
-
Seleziona Tipo azione > Aggiungi parametri alla Richiesta di caricamento pagina
-
Immetti
pageName
come Nome -
Fai clic sull’ per aprire l’elemento dati modale
-
Fai clic sull’elemento dati
Page Name
-
Fai clic sul pulsante Seleziona
-
Fai clic su Mantieni modifiche
-
Fai clic e trascina sul bordo sinistro dell’azione
Add Params to Page Load Request
per ridisporre le azioni eseguite prima dell’azioneFire Page Load Request
(prima o dopoLoad Target
) -
Fai 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
- Ricarica il sito Luma, verificando che sia mappato sulla tua proprietà tag
- Apri gli strumenti per sviluppatori del browser
- Fai clic sulla scheda Rete
- Filtra le richieste in
tt.omtrdc
(o al dominio CNAME per le richieste Target) - Espandi la sezione
Headers
>Request Payload
>execute.pageLoad.parameters
per convalidare il parametro e il valorepageName
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
:
Parametri entità
I parametri di entità sono parametri speciali utilizzati nelle implementazioni di raccomandazioni per tre motivi principali:
- 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. - Per raccogliere il comportamento dei visitatori e potenziare gli algoritmi di raccomandazioni, ad esempio "Recently Viewed Products" o "Most Viewed Products"
- 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 parametro della richiesta pageName
; assegna 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
:
Aggiungere parametri ID cliente
La raccolta di ID cliente con Adobe Experience Platform Identity Service 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
di Identity Service 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 di Adobe Experience Platform Identity Service 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 Adobe Experience Platform Identity Service, 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
-
Apri il sito Luma.
-
Accertati che Debugger mappi la proprietà tag nell'ambiente di sviluppo your, come descritto nella lezione precedente
-
Accedi al sito Luma utilizzando le credenziali
test@adobe.com
/test
-
Torna alla home page di Luma
-
Apri gli strumenti per sviluppatori del browser
-
Fai clic sulla scheda Rete
-
Filtra le richieste in
tt.omtrdc
(o al dominio CNAME per le richieste Target) -
Espandi la sezione
Headers
>Request Payload
>id.customerIds.0
per convalidare le impostazioni e il valore dell’ID cliente:
Aggiungere il parametro Token di proprietà
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 di codice personalizzato nei tag con la funzione targetPageParams()
. 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:
-
In una scheda separata, apri l’interfaccia utente di Target
-
Vai a Amministrazione > Proprietà
-
Identificare la proprietà che si desidera utilizzare e fare clic su </> (o creare una nuova proprietà)
-
Copia il frammento di codice all'interno di
<script></script>
negli Appunti -
Nella scheda Tag, vai a Regole nel menu di navigazione a sinistra, quindi fai clic su
All Pages - Library Loaded
per aprire l'editor di regole. -
In Azioni, fai clic sull’azione
Core - Custom Code
per aprire laAction Configuration
-
Aprire l'editor di codice e incollare il codice dall'interfaccia di Target contenente la funzione
targetPageParams()
-
Fai clic sul pulsante Salva
-
Seleziona la casella Esegui globalmente in modo che
targetPageParams()
sia dichiarato nell'ambito globale -
Fai clic su Mantieni modifiche
-
Fai clic su Salva nella libreria e genera
at_property
tramite l'azione Aggiungi parametri alla richiesta di caricamento pagina, il parametro verrà 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 la funzione targetPageParams()
in un'azione Codice personalizzato.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à
-
Apri il sito Luma.
-
Accertati che Debugger mappi la proprietà tag nell'ambiente di sviluppo your, come descritto nella lezione precedente
-
Apri gli strumenti per sviluppatori del browser
-
Fai clic sulla scheda Rete
-
Filtra le richieste in
tt.omtrdc
(o al dominio CNAME per le richieste Target) -
Espandi la sezione
Headers
>Request Payload
>property.token
per convalidare il valore
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:
- Annulla la duplicazioni di ordini riconfermati accidentalmente
- Filtra ordini estremi (qualsiasi ordine il cui totale era costituito da più di tre deviazioni standard dalla media)
- Utilizza un algoritmo diverso per calcolare la confidenza statistica
- 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 di Recommendations, 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
- Fai clic su Elementi dati nel menu di navigazione a sinistra
- Fai clic su Aggiungi elemento dati
- Denomina l’elemento dati
Order Id
- Seleziona Tipo elemento dati > Variabile JavaScript
- Usa
digitalData.cart.orderId
comeJavaScript variable name
- Controlla l’opzione
Clean text
- 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
- Fai clic su Aggiungi elemento dati
- Denomina l’elemento dati
Cart Amount
- Seleziona Tipo elemento dati > Variabile JavaScript
- Usa
digitalData.cart.cartAmount
comeJavaScript variable name
- Controlla l’opzione
Clean text
- Fai clic su Salva nella libreria
Per creare l’elemento dati per SKU carrello (Target)
-
Fai clic su Aggiungi elemento dati
-
Denomina l’elemento dati
Cart SKUs (Target)
-
Seleziona Tipo elemento dati > Codice personalizzato
-
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;
-
Controlla l’opzione
Force lowercase value
-
Controlla l’opzione
Clean text
-
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
-
Fai clic su Regole nel menu di navigazione a sinistra
-
Fai clic su Aggiungi regola
-
Denomina la regola
Order Confirmation Page - Library Loaded - 60
-
Fai clic su Eventi > Aggiungi
- Seleziona Tipo evento > Libreria caricata (Pagina in alto)
- In Opzioni avanzate, modifica
Order
in60
in modo che venga attivato dopo l'azioneLoad Target
(che si trova nella regolaAll Pages - Library Loaded
in cuiOrder
è impostato su50
) - Fai clic su Mantieni modifiche
-
Fai clic su Condizioni > Aggiungi
-
Seleziona Tipo condizione > Percorso senza stringa di query
-
Per
Path equals
immettithank-you.html
-
Attiva l’opzione Regex per cambiare la logica da
equals
acontains
(puoi usare la funzioneTest
per confermare che il test passerà con l’URLhttps://luma.enablementadobe.com/content/luma/us/en/user/checkout/order/thank-you.html
-
Fai clic su Mantieni modifiche
-
-
Fai clic su Azioni > Aggiungi
-
Seleziona Tipo azione > Codice personalizzato
-
Fai clic su Apri editor
-
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); } });
-
Fai clic su Salva per salvare il codice personalizzato
-
Fai clic su Mantieni modifiche per mantenere l'azione
-
-
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.
-
Apri il sito Luma.
-
Accertati che Debugger mappi la proprietà tag nell'ambiente di sviluppo your, come descritto nella lezione precedente
-
Sfoglia il sito e aggiungi più prodotti al carrello
-
Procedi con il pagamento
-
Durante il processo di pagamento gli unici campi obbligatori sono
First Name
eLast Name
-
Sulla pagina Rivedi ordine, assicurati di fare clic sul pulsante
Place Order
-
Apri gli strumenti per sviluppatori del browser
-
Fai clic sulla scheda Rete
-
Filtra le richieste in
tt.omtrdc
(o al dominio CNAME per le richieste Target) -
Fai clic sulla seconda richiesta
-
Espandi la sezione
Headers
>Request Payload
>execute.mboxes.0
per convalidare il nome della richiesta e i parametri dell’ordine:
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 verrà utilizzato 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.
Library Header e Library Footer
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
:
Per ulteriori informazioni su casi di utilizzo per header e footer personalizzati, consulta le risorse seguenti:
Avanti "Aggiungere Adobe Analytics" >