Aggiungere un elemento dati, una regola e una libreria

In questa lezione, creerai i tuoi primi elemento dati, regola e libreria.

Elementi dati e regole sono gli elementi costitutivi di base dei tag. Gli elementi dati memorizzano gli attributi che desideri inviare alle tue soluzioni di marketing e pubblicitarie, mentre le richieste a tali soluzioni vengono inviate dalle Regole in giuste condizioni. Le librerie sono file JavaScript caricati nella pagina per eseguire tutto il lavoro. In questa lezione, utilizzerai tutti e tre per fare in modo che la nostra pagina di esempio esegua un’operazione.

Finalità di apprendimento

Alla fine di questa lezione, potrai:

• Creare un elemento dati
• Creare una regola
• Creare una libreria
• Aggiungere modifiche a una libreria
• Convalidare il caricamento della libreria nel browser Web
• Utilizzare la funzione “Working Library” per lavorare in modo più efficiente

Creare elementi dati per Nome pagina

Gli elementi dati sono versioni dei tag di un livello dati. Essi possono memorizzare i valori del tuo oggetto livello dati, dei cookie, degli oggetti di memorizzazione locali, dei parametri delle stringhe query, degli elementi pagina, dei metatag, ecc. In questo esercizio, creerai un elemento dati per Nome pagina, che utilizzerai successivamente nelle implementazioni di Target e Analytics.

Per creare un elemento dati

1. Nel menu di navigazione a sinistra, fai clic su Elementi dati

2. Poiché in questa proprietà non hai ancora creato elementi dati, viene visualizzato un breve video con informazioni aggiuntive su questo argomento. Se lo desideri, guarda questo video.

3. Fai clic sul pulsante Crea nuovo elemento dati:

   

4. Denomina l’elemento dati, ad es. Page Name

5. Utilizza il tipo di elemento dati Variabile JavaScript per puntare a un valore nel livello dati della pagina di esempio: digitalData.page.pageInfo.pageName

6. Seleziona le caselle per Forza valori minuscoli e Pulisci testo per standardizzare l’uso di maiuscole/minuscole e rimuovere spazi estranei

7. Lascia Nessuno come impostazione di Durata memorizzazione, poiché questo valore è in genere diverso su ogni pagina

8. Fai clic sul pulsante Salva per salvare l’elemento dati

   .

Creare una regola

Successivamente, utilizzerai questo elemento dati in una regola semplice. Le regole sono una delle funzioni più potenti dei tag e consentono di specificare cosa deve accadere quando il visitatore interagisce con il sito web. Quando i criteri descritti nelle regole vengono soddisfatti, la regola attiva l’azione specificata.

Genererai una regola che restituisce il valore dell’elemento Nome pagina alla console del browser.

Per creare una regola

1. Nel menu di navigazione a sinistra, fai clic su Regole

2. Poiché non hai ancora creato regole in questa proprietà, viene visualizzato un breve video con ulteriori informazioni sull’argomento. Se lo desideri, guarda questo video.

3. Fai clic sul pulsante Crea nuova regola:

   

4. Denomina la regola All Pages - Library Loaded. Questa convenzione di denominazione indica dove e quando verrà attivata la regola, facilitando l’identificazione e il riutilizzo alla scadenza della proprietà del tag.

5. In Eventi, fai clic su Aggiungi. L'evento indica ai tag quando la regola dovrebbe attivarsi e può essere molte cose, inclusi il caricamento di una pagina, un clic, un evento JavaScript personalizzato, ecc.

   

   1. In Tipo evento, seleziona Libreria caricata (Pagina in alto). Quando selezioni Tipo evento , i tag precompilano un nome per l’evento utilizzando la selezione. Inoltre, l’ordine predefinito per l’evento è 50. L’ordinamento è una funzione potente nei tag che offre un controllo preciso sulla sequenza di azioni in presenza di più regole attivate dallo stesso evento. Questa funzione verrà utilizzata più avanti nell’esercitazione.

   2. Fai clic sul pulsante Mantieni modifiche

   

6. Poiché questa regola deve essere attivata su tutte le pagine, lascia vuoto il campo Condizioni. Se apri la modale Condizioni, vedrai che le condizioni possono aggiungere restrizioni ed esclusioni in base a un’ampia gamma di opzioni, inclusi URL, valori degli elementi dati, intervalli di date e molto altro.

7. In Azioni, fai clic su Aggiungi.

8. Seleziona Tipo azione > Codice personalizzato, che a questo punto rimane l’unica opzione. Più avanti nell’esercitazione, quando si aggiungono estensioni saranno disponibili più opzioni.

9. Seleziona </> Apri editor per aprire l’editor di codice.

   

10. Aggiungi quanto segue all’editor di codice. Questo codice invia il valore dell’elemento dati Nome pagina alla console del browser, in modo da permetterti di confermare il funzionamento:

    console.log('The page name is '+_satellite.getVar('Page Name'));
    

11. Salva l’editor di codice.

    

12. Mantieni modifiche

13. Fai clic su Salva per salvare la regola.

Nella pagina Regole dovrebbe essere visualizzata la nuova regola:

Salvare le modifiche in una libreria

Dopo aver configurato una raccolta di estensioni, elementi dati e regole nell’interfaccia di raccolta dati, devi creare un pacchetto di tali funzionalità e logica in un set di codice JavaScript da distribuire sul sito web, in modo che i tag di marketing vengano attivati quando i visitatori accedono al sito. Una libreria è il set di codice JavaScript che esegue questa operazione.

In una lezione precedente, hai implementato il codice di incorporamento dell’ambiente di sviluppo nella pagina di esempio. Quando si caricava la pagina di esempio, veniva restituito un errore 404 per l’URL del codice di incorporamento, perché una libreria di tag non era ancora stata generata e assegnata all’ambiente. Ora, inserirai il nuovo elemento dati e la regola in una libreria in modo che la pagina di esempio possa fare qualcosa.

Aggiungere e creare una libreria

1. Nel menu di navigazione a sinistra, fai clic su Flusso di pubblicazione

2. Fai clic su Aggiungi nuova libreria.

   

3. Assegna un nome alla libreria, ad esempio Initial Setup

4. Seleziona Ambiente > Sviluppo.

5. Fai clic su Aggiungi tutte le risorse modificate.

   

6. Dopo aver fatto clic su Aggiungi tutte le risorse modificate i tag riepilogano le modifiche appena apportate.

7. Fai clic su Salva e genera per sviluppo.

   

Dopo alcuni istanti, il punto dello stato diventa verde per indicare che la libreria è stata creata correttamente.

Convalidare il lavoro

Ora verifica che la regola funzioni come previsto.

Ricarica la pagina di esempio. Se si guarda la scheda Strumenti per sviluppatori > Rete, è ora necessario visualizzare una risposta 200 per la libreria dei tag!

Se osservi Strumenti per sviluppatori > Console, è necessario visualizzare il testo "Il nome della pagina è home"

Congratulazioni, hai creato il tuo primo elemento dati e la prima regola e generato la tua prima libreria di tag!

Usare la funzione Working Library

Quando apporti numerose modifiche ai tag, è scomodo passare alla scheda Pubblicazione, aggiungere modifiche e generare la libreria ogni volta che desideri visualizzare il risultato. Ora che hai creato la libreria “Initial Setup”, puoi utilizzare la funzione Working Library per salvare rapidamente le modifiche e ricrearle in un singolo passaggio.

Effettua una piccola modifica alla regola “All Pages - Library Loaded”. Nel menu di navigazione a sinistra, fai clic su Regole, quindi fai clic sulla regola All Pages - Library Loaded per aprirla.

Nella pagina Edit Rule, fai clic sul menu a discesa Working Library e seleziona la tua libreria Initial Setup.

Dopo aver selezionato la libreria, il pulsante Salva viene ora impostato automaticamente su Salva nella libreria. Quando apporti una modifica ai tag, puoi utilizzare questa opzione per aggiungere automaticamente la modifica direttamente nella libreria di lavoro e/o ricrearla.

Esegui il test. Apri l’azione Codice personalizzato e aggiungi un due punti dopo il testo "Il nome della pagina è", in modo che l’intero blocco di codice reciti:

console.log('The page name is: '+_satellite.getVar('Page Name'));

Salva il codice, mantieni le modifiche nell’azione, quindi fai clic sul pulsante Salva nella libreria e genera.

Attendi che il punto verde venga nuovamente visualizzato accanto al menu a discesa Working Library. A questo punto, ricarica la pagina di esempio e dovresti visualizzare le modifiche riportate nel messaggio della console (per visualizzare la modifica alla pagina potrebbe essere necessario cancellare la cache del browser e ricaricare):

Si tratta di un metodo di lavoro molto più veloce: userai questo approccio per il resto dell’esercitazione.

Successivo “Cambiare ambienti con Experience Cloud Debugger” >