Guida rapida ai modelli personalizzati

I modelli personalizzati consentono di scrivere definizioni e tag personalizzati in modo che altri utenti della tua organizzazione possano utilizzarli insieme ai modelli di tag e variabili integrati. La natura sandbox e incentrata sull'autorizzazione dei modelli personalizzati consente di scrivere tag e variabili personalizzati in modo più sicuro ed efficiente rispetto a quando utilizzi tag HTML personalizzati e variabili JavaScript personalizzate.

I modelli di tag e variabili personalizzati sono definiti nella sezione Modelli di Google Tag Manager. Nella schermata Modelli principale sono elencati tutti i modelli di tag o variabili già definiti nel tuo contenitore. Da questa schermata puoi anche creare nuovi modelli.

Puoi esportare un modello e condividerlo con altri utenti della tua organizzazione. Inoltre, i modelli possono essere sviluppati per una distribuzione più ampia nella Galleria modelli della community.

Editor modelli

L'Editor modelli ti consente di creare, personalizzare e visualizzare in anteprima i modelli. Sono disponibili quattro aree principali per l'inserimento che ti aiutano a definire il tuo modello di tag:

  • Informazioni: definisci le proprietà di base del modello, ad esempio il nome e l'icona del tag o della variabile.
  • Campi: si tratta di un editor visivo per aggiungere campi di immissione al modello di tag.
  • Codice: inserisci JavaScript con sandbox per definire il comportamento del tag o della variabile.
  • Autorizzazioni: visualizza e imposta i limiti per le operazioni consentite dal tag o dalla variabile.

Crea il tuo primo modello di tag personalizzato

Questo esempio illustra come creare un tag di pixel di esempio di base. Quando questo tag viene attivato su una pagina web, invia un hit con le informazioni corrette dell'account ai server del fornitore del tag.

1. Per iniziare il tuo primo modello, fai clic su Modelli nel riquadro di navigazione a sinistra, quindi fai clic sul pulsante Nuovo nella sezione Modelli di tag.

2. Fai clic su Informazioni e definisci il Nome (obbligatorio), la Descrizione e l'icona del tag.

Il nome verrà mostrato agli utenti quando implementeranno questo tag nell'interfaccia utente di Tag Manager.

Descrizione è come dovrebbe essere: una breve descrizione (massimo 200 caratteri) del funzionamento del tag.

L'opzione Icona ti consente di scegliere un'immagine da visualizzare quando il tag viene visualizzato negli elenchi che supportano la proprietà dell'icona. Le immagini delle icone devono essere file in formato PNG, JPEG o GIF quadrati di dimensioni non superiori a 50 kB e di almeno 64 x 64 px.

3. Fai clic su Aggiorna per visualizzare l'anteprima del modello.

A destra dei campi del campo, è presente una finestra Anteprima modello. Ogni volta che viene apportata una modifica nell'editor, viene visualizzato il pulsante Aggiorna. Fai clic su Aggiorna per vedere come vengono apportate le modifiche all'aspetto del tag.

4. Fai clic su Campi per aggiungere campi al modello di tag.

La scheda Campi dell'editor dei modelli consente di creare e modificare i campi nel modello di tag. I campi vengono utilizzati per inserire dati personalizzati, come l'ID account. Puoi aggiungere elementi standard del modulo, come campi di testo, menu a discesa, pulsanti di opzione e caselle di controllo.

5. Fai clic su Aggiungi campo e seleziona Input di testo. Sostituisci il nome predefinito (ad es. "text1") con "accountId". In Anteprima modello, fai clic su Aggiorna.

Accanto al campo è presente l'icona del selettore di variabili (Icona del selettore di variabili) che già conosci. Gli utenti di questo modello possono fare clic sull'icona del selettore di variabili per scegliere le variabili attive in questo contenitore.

Il passaggio successivo consiste nell'aggiungere un'etichetta al campo:

6. Fai clic sull'icona Espandi (icona Espandi) accanto al campo di testo per aprire altre opzioni per questo campo. Inserisci "ID account" nel campo Nome visualizzato. In Anteprima modello, fai clic su Aggiorna.

Sopra il campo dovrebbe essere visualizzata l'etichetta di testo "ID account".

7. Fai clic sulla scheda Codice e inserisci JavaScript con sandbox nell'editor:

// require relevant API
const sendPixel = require('sendPixel');
const encodeUriComponent = require('encodeUriComponent');

// capture values of template fields
const account = data.accountId;

// use the provided APIs to do things like send pixels
const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);
sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure);

La prima riga di codice, const sendPixel = require('sendPixel'), importa l'API sendPixel.

La seconda riga di codice, const encodeUriComponent = require('encodeUriComponent'), importa l'API encodeUriComponent.

La riga successiva, const account = data.accountId;, ottiene il valore accountId creato nel passaggio 5 e lo memorizza in una costante denominata account.

La terza riga di codice, const url = 'https://endpoint.example.com/?account=' + encodeUriComponent(account);, imposta una costante url che concatena un endpoint URL fisso che registra i dati di analisi e l'ID account codificato con cui è stato configurato il tag.

L'ultima riga, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), esegue la funzione sendPixel() con i parametri obbligatori e invia una richiesta all'URL specificato. I valori data.gtmOnSuccess e data.gtmOnFailure indicano Google Tag Manager quando il tag ha completato o meno l'attività e vengono poi utilizzati da Google Tag Manager per funzionalità quali sequenze di tag o modalità di anteprima.

8. Fai clic su Salva per salvare i tuoi progressi. In questo modo, tutte le autorizzazioni rilevate verranno caricate nell'Editor modelli.

Ad alcune API modello sono associate autorizzazioni che determinano cosa possono o non possono fare. Quando utilizzi un'API modello come sendPixel nel tuo codice, Tag Manager mostrerà le autorizzazioni pertinenti nella scheda Autorizzazioni.

9. Fai clic su Autorizzazioni per perfezionare i domini a cui sendPixel è autorizzato a inviare dati. Per la voce Invia pixel, fai clic sull'icona di espansione (icona Espandi) e inserisci https://endpoint.example.com/ in Pattern di corrispondenza degli URL consentiti.

Quando un modello di tag è configurato per inviare dati, devi specificare un pattern di corrispondenza degli URL consentito sotto l'autorizzazione associata per limitare la destinazione a cui possono essere inviati i dati. Se l'URL specificato nel codice non corrisponde a un pattern di corrispondenza dell'URL consentito, la chiamata sendPixel non andrà a buon fine.

Un pattern di corrispondenza degli URL deve utilizzare HTTPS e specificare pattern host e di percorso. L'host può essere un dominio (ad es. "https://example.com/") o un sottodominio specifico (ad es. "https://sub.example.com/"). Il percorso deve contenere almeno un carattere "/". Utilizza un asterisco (*) come carattere jolly per indicare un sottodominio o un pattern di percorso di qualsiasi lunghezza (ad es. "https://\*.example.com/test/"). L'asterisco è un carattere jolly che individuerà i vari pattern possibili, ad es. ".

Specifica pattern di corrispondenza URL aggiuntivi su righe separate.

10. Fai clic su Esegui codice e cerca eventuali problemi nella finestra Console.

Eventuali errori rilevati verranno visualizzati nella finestra Console.

11. Fai clic su Salva e chiudi l'Editor modelli.

Il modello di tag ora dovrebbe essere pronto per l'uso.

Utilizzare il nuovo tag

La procedura per creare un nuovo tag che utilizza il modello di tag personalizzato appena definito è simile a qualsiasi altro tag:

  1. In Google Tag Manager, fai clic su Tag > Nuovo.
  2. Il nuovo tag verrà visualizzato nella sezione Personalizzato della finestra Nuovo tag. Fai clic sulla creatività per aprire il modello di tag.
  3. Compila i campi necessari per la configurazione del modello di tag.
  4. Fai clic su Attivazione e seleziona un attivatore appropriato per quando il tag deve essere attivato.
  5. Salva il tag e pubblica il contenitore.

Crea il tuo primo modello di variabile personalizzata

I modelli di variabili personalizzate sono simili ai modelli di tag, con alcune differenze significative:

  • I modelli di variabile personalizzata devono restituire un valore.

    Invece di chiamare data['gtmOnSuccess'] per indicare il completamento, le variabili restituiscono direttamente un valore.

  • I modelli di variabili personalizzate vengono utilizzati in diverse parti dell'interfaccia utente di Tag Manager.

  • Anziché creare un'altra variabile basata su quella personalizzata, vai a Tag > Nuova, poi vai a Variabili > Nuova

Consulta Creare una variabile personalizzata per una guida completa alla creazione di un modello di variabile personalizzata.

Esportazione e importazione

Per condividere un modello personalizzato con la tua organizzazione, puoi esportare il modello personalizzato e importarlo in altri contenitori di Tag Manager. Per esportare un modello:

  1. In Tag Manager, fai clic su Modelli.
  2. Fai clic sul nome del modello che vuoi esportare dall'elenco. In questo modo, si aprirà il modello nell'Editor modelli.
  3. Fai clic sul menu Altre azioni () e seleziona Esporta.

Per importare un modello:

  1. In Tag Manager, fai clic su Modelli.
  2. Fai clic su Nuova. Nell'editor dei modelli verrà aperto un modello vuoto.
  3. Fai clic sul menu Altre azioni () e seleziona Importa.
  4. Seleziona il file .tpl da importare.