Guida rapida ai modelli personalizzati

I modelli personalizzati ti consentono di scrivere le tue definizioni di tag e variabili in modo che le altre persone all'interno della tua organizzazione possono utilizzarli insieme al tag integrato e modelli di variabili. La natura dei modelli personalizzati basata su sandbox e autorizzazioni permette di scrivere tag e variabili personalizzati in modo più sicuro ed efficiente rispetto all'utilizzo di 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 principale Modelli sono elencati tutti i tag o le variabili che sono già stati definiti nel contenitore. Puoi anche creare nuovi modelli da questa schermata.

Puoi esportare un modello e condividerlo con altre persone della tua organizzazione. sviluppare modelli per una distribuzione più ampia Galleria modelli della community.

Nota: i modelli personalizzati e della community sono disponibili solo per il web e lato server proprietà al momento. Il supporto dei modelli per le piattaforme mobile sarà aggiunto all'indirizzo in una data successiva.

Editor dei modelli

L'editor dei modelli consente di creare, visualizzare in anteprima e testare i modelli personalizzati. Dispone di quattro aree principali di input per aiutarti a definire il modello di tag:

• Informazioni: stabilisci le proprietà di base del modello, come tag o il nome e l'icona della variabile.
• Campi: un editor visivo che consente di aggiungere campi di immissione al modello di tag.
• Codice: inserisci JavaScript con sandbox per definire in che modo il tag o la variabile che deve comportarsi.
• Autorizzazioni: visualizza e imposta limiti per il tag o la variabile. per i quali è consentita l'esecuzione.

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, invierà un hit con l'account corretto le informazioni ai server del provider di tag.

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

2. Fai clic su Informazioni e definisci il Nome (obbligatorio), la Descrizione e Icona.

Il nome è quello che verrà mostrato agli utenti quando implementano il tag dell'intera interfaccia utente di Tag Manager.

Descrizione: è esattamente quello che dice il suo nome: una breve (200 caratteri al massimo) descrizione di ciò che fa questo tag.

Icona ti consente di scegliere un'immagine da visualizzare quando il tag viene visualizzato in che supportano la proprietà icona. Le immagini delle icone devono essere in formato PNG, JPEG o quadrato File GIF 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 degli input dei campi, c'è una finestra Anteprima modello. Ogni evento Quando viene apportata una modifica all'editor, viene visualizzato il pulsante Aggiorna. Clic 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 di modelli consente di creare e modificare i campi nel tag modello. I campi vengono utilizzati per inserire dati personalizzati, come un 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 Inserimento testo. Sostituisci il nome predefinito (ad es. "text1") con "accountId". In Anteprima modello, fai clic su Aggiorna.

Il campo avrà un'icona del selettore di variabili familiare () accanto. Gli utenti di questo modello possono fare clic sull'icona del selettore di variabili per scegli le variabili attive nel contenitore.

Nel passaggio successivo viene aggiunta un'etichetta al campo:

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

Un'etichetta di testo dal titolo "ID account" deve essere visualizzato sopra il campo.

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 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 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 e l'ID account codificato con cui il tag è stato configurato.

L'ultima riga, sendPixel(url, data.gtmOnSuccess, data.gtmOnFailure), esegue sendPixel() con i parametri richiesti ed invia una richiesta alla all'URL specificato. I valori data.gtmOnSuccess e data.gtmOnFailure indicano Google Tag Manager quando l'attività del tag ha completato o meno l'attività e successivamente usato da Google Tag Manager per funzionalità quali sequenza tag o modalità di anteprima.

8. Fai clic su Salva per salvare i tuoi progressi. Verranno caricate le autorizzazioni rilevate nell'editor dei modelli.

Alcune API Template sono associate ad autorizzazioni che determinano quali che possono o non possono fare. Quando utilizzi un'API del modello come sendPixel nelle del codice, Tag Manager mostrerà le autorizzazioni pertinenti nella scheda Autorizzazioni.

9. Fai clic su Autorizzazioni per specificare quali domini sendPixel è autorizzato a inviare a cui inviare i 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 l'invio di dati, devi specificare un'opzione Consentito Pattern di corrispondenza degli URL sotto l'autorizzazione associata per limitare dove i dati possono a cui inviare il messaggio. Se l'URL specificato nel codice non corrisponde a un URL consentito la sequenza di corrispondenza, la chiamata a sendPixel non andrà a buon fine.

Un pattern di corrispondenza degli URL deve utilizzare HTTPS e specificare sia i pattern dell'host che del percorso. La 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 del percorso di qualsiasi lunghezza (ad es. "https://\*.example.com/test/"). L'asterisco è un carattere jolly che rilevi i vari pattern possibili, ad esempio "\*.example.com/" corrisponderà a www.example.com, shop.example.com, blog.example.com e così via. L'asterisco deve essere preceduto da una barra rovesciata. carattere: "\*". Un URL senza caratteri aggiuntivi (ad es. "https://example.com/") viene considerato come finale con un carattere jolly (ossia equivalente a "https://example.com/\*".

Specifica ulteriori pattern di corrispondenza degli URL su righe separate.

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

Gli eventuali errori rilevati verranno visualizzati nella finestra della 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 è come 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 pulsante per aprire il modello di tag.
3. Compila i campi necessari per la configurazione dei modelli di tag.
4. Fai clic su Attivazione e seleziona un attivatore appropriato per quando il tag dovrebbe attivarsi.
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, ma ne esistono alcuni differenze:

• I modelli di variabili personalizzate 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 di Tag Manager nell'interfaccia utente.

• Invece di selezionare Tag > Novità per creare una nuova variabile in base a variabile personalizzata, vai in Variabili > Nuovo

Per una guida completa alla creazione di una variabile personalizzata, consulta Creare una variabile personalizzata. modello.

Esporta e importa

Per condividere un modello personalizzato con la tua organizzazione, puoi esportare il modello 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. In questo modo apri 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 Nuovo. Nell'editor dei modelli si aprirà un modello vuoto.
3. Fai clic sul menu Altre azioni () e seleziona Importa.
4. Seleziona il file .tpl da importare.