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.

Finalità di apprendimento

Alla fine di questa lezione, potrai:

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:

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:

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

Aggiungere l’estensione

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

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

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

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:

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.

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

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

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:

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:

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

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:

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à

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:

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

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

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

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

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.

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" >