Guida rapida ai modelli personalizzati

I modelli personalizzati ti consentono di scrivere definizioni di tag e variabili personalizzate in modo che altri utenti della tua organizzazione possano utilizzarle insieme ai modelli di tag e variabili integrati. I modelli personalizzati si basano su sandbox e autorizzazioni, per consentire di scrivere tag e variabili personalizzati in un modo più sicuro ed efficiente rispetto a quando utilizzi tag HTML personalizzati e variabili JavaScript personalizzate.

I modelli di tag e variabili personalizzati vengono definiti nella sezione Modelli di Google Tag Manager. La schermata principale Modelli elenca tutti i modelli di tag o variabili già definiti nel contenitore. In questa schermata puoi anche creare nuovi modelli.

Puoi esportare un modello e condividerlo con altri utenti della tua organizzazione ed è possibile sviluppare modelli per una distribuzione più ampia nella Galleria modelli della community.

Nota: i modelli personalizzati e della community sono attualmente disponibili solo per le proprietà web e lato server. Il supporto dei modelli per le piattaforme mobile verrà aggiunto in un secondo momento.

Editor dei modelli

L'editor dei modelli consente di creare, visualizzare in anteprima e testare i modelli personalizzati. Ha quattro aree principali di input che ti aiutano a definire il modello di tag:

• Informazioni: consente di definire le proprietà di base del modello, come il nome e l'icona del tag o della variabile.
• Campi: si tratta di un editor visivo che consente di 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 limiti per le operazioni consentite al tag o alla variabile.

Creare il 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 i dati dell'account corretti ai server del fornitore di tag.

1. Per iniziare il primo modello, fai clic su Modelli nel riquadro di navigazione a sinistra e poi 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 è quello che verrà presentato agli utenti quando dovranno implementare questo tag nell'interfaccia utente di Tag Manager.

La descrizione è esattamente quello che sembra: una breve descrizione (200 caratteri o meno) della funzione di questo tag.

Icona 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 quadrati in formato PNG, JPEG o GIF di dimensioni non superiori a 50 kB e di almeno 64 x 64 pixel.

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

A destra dei campi di immissione è presente la finestra Anteprima modello. Ogni volta che viene apportata una modifica nell'editor, viene visualizzato il pulsante Aggiorna. Fai clic su Aggiorna per verificare l'effetto delle 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, ad esempio un ID account. Puoi aggiungere elementi del modulo standard come campi di testo, menu a discesa, pulsanti di opzione e caselle di controllo.

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

Accanto al campo verrà visualizzata un'icona del selettore di variabili familiari (). 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 () 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 un'etichetta di testo chiamata "Account ID".

7. Fai clic sulla scheda Codice e inserisci il codice 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;, riceve il valore di 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);, configura 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 richiesti e invia una richiesta all'URL specificato. I valori data.gtmOnSuccess e data.gtmOnFailure indicano a Google Tag Manager quando l'attività del tag ha completato o meno l'attività e vengono quindi utilizzati da Google Tag Manager per funzionalità quali la sequenza tag o la modalità di anteprima.

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

Ad alcune API Template sono associate autorizzazioni che stabiliscono 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 () 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 URL consentito sotto l'autorizzazione associata per limitare la destinazione di invio dei dati. Se l'URL specificato nel codice non corrisponde a un pattern di corrispondenza dell'URL consentito, la chiamata a sendPixel avrà esito negativo.

Un pattern di corrispondenza dell'URL deve utilizzare HTTPS e specificare sia i pattern host che i pattern del 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 "/". 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 individua i vari pattern possibili, ad es. "shop.example.com\*.example.com/", deve corrispondere a www.example.com,https://example.com/blog.example.com\*https://example.com/\*

Specifica pattern di corrispondenza degli URL aggiuntivi su righe separate.

10. Fai clic su Esegui codice e controlla la finestra della console per individuare eventuali problemi.

Gli eventuali errori rilevati verranno visualizzati nella finestra Console.

11. Fai clic su Salva e chiudi l'editor dei modelli.

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

Utilizza 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 sul modello 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 l'attivazione del tag.
5. Salva il tag e pubblica il contenitore.

Creare il primo modello di variabile personalizzata

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

• I modelli di variabili personalizzate devono restituire un valore.

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

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

• Anziché andare a Tag > Nuova per creare una nuova variabile basata sulla tua variabile personalizzata, vai a Variabili > Nuova.

Consulta Creazione di 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 esportarlo e importarlo in altri contenitori di Tag Manager. Per esportare un modello:

1. In Tag Manager, fai clic su Modelli.
2. Nell'elenco, fai clic sul nome del modello che desideri esportare. Il modello verrà aperto nell'editor dei 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 viene aperto un modello vuoto.
3. Fai clic sul menu Altre azioni () e seleziona Importa.
4. Seleziona il file .tpl che vuoi importare.