Utilizzare Google Tag Manager per trasferire valori ai tag Floodlight

Quando implementi tag Floodlight in Google Tag Manager, consigliamo di trasferire valori dal tuo sito ai tag per acquisire importanti parametri di marketing che in seguito puoi utilizzare per creare segmenti di pubblico o generare rapporti su specifiche metriche personalizzate.

dataLayer è un oggetto JavaScript in Google Tag Manager che fornisce un'interfaccia per il passaggio di valori obbligatori all'interno di macro, che in seguito puoi utilizzare per completare i tag designati. Questo articolo spiega come utilizzare dataLayer per comunicare in modo specifico con Campaign Manager 360 e trasmettere tutti i valori obbligatori per i tag Floodlight. Per una spiegazione più approfondita, ti invitiamo a visitare la pagina di Google Developers sulle implementazioni di Google Tag Manager per il Web.

Tradizionalmente, i nuovi tag Floodlight contengono segnaposto che gli sviluppatori web sostituiscono con i valori obbligatori nel momento in cui il tag viene chiamato. Considera questo frammento di esempio:

...
document.write('<iframe
    src="http://XXXXXXX.fls.doubleclick.net/activityi;src=XXXXXXXX;type=;cat=;u1=[item];u2=[quantity];u3=[price];u4=[postage];u5=[seller];ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
...

Gli elementi in grassetto (item, quantity, price, postage e seller) dovrebbero essere sostituiti dai valori effettivi che vuoi trasferire al tag Floodlight. In genere è possibile sostituirli utilizzando il sistema di gestione dei contenuti; in caso contrario, chiedi al tuo team di sviluppo di codificarli.

Per configurare Google Tag Manager al fine di utilizzare variabili per inserire i valori quando vengono richiamati i tag, procedi nel seguente modo. Questi passaggi presuppongono che il tuo account Campaign Manager 360 sia già stato collegato all'account Google Tag Manager pertinente e che sei in grado di inviare tag a Google Tag Manager, nonché di approvarli. Una volta apportate le modifiche in Google Tag Manager, puoi svolgere la tua normale procedura di test e pubblicazione.

Configurazione

1. In Google Tag Manager, crea macro per ciascun valore da trasmettere.

   1. Assegna alla macro un nome descrittivo. Ad esempio, se stai acquisendo il nome di un prodotto ordinato, potresti nominare la macro "product_name".

   2. Imposta il tipo di macro su Variabile di livello dati.

   3. Indica il nome della variabile esattamente come sarà dichiarato nella chiamata a dataLayer.

   4. Per il numero di versione, seleziona Versione 2.

2. In Campaign Manager 360, crea un tag Floodlight e abilita le variabili standard u.

3. Invia il tag Floodlight a Google Tag Manager e approvalo.

4. Modifica il tag in Google Tag Manager e assegna le macro appropriate alle diverse variabili u. Ad esempio, se vuoi acquisire il nome del prodotto all'interno della variabile u "u1", procedi nel seguente modo:

   1. Passa alla sezione Variabili personalizzate.

   2. Fai clic sul menu a discesa e seleziona "u1".

   3. Fai clic sull'icona della macro accanto alla casella di testo e scegli la macro "{{product_name}}" creata nel passaggio 1 (tieni presente che le parentesi graffe "{{}}" sono utilizzate per indicare che si tratta di una macro e non del testo specifico "product_name").

   4. Ripeti la procedura per tutte le altre macro e variabili u che vuoi acquisire.

Implementazione

Sono diversi i modi per implementare l'oggetto dataLayer e dipendono da quale delle seguenti situazioni è vera.

Metodo 1. La pagina di conferma contiene tutti i valori necessari

Alcuni siti web utilizzano un Content Management System (CMS) o altro metodo simile per creare le pagine man mano che vengono richieste. Il CMS è in grado di passare valori impostati su una pagina precedente o provenienti da un database back-end.

In questi casi, è possibile effettuare le seguenti operazioni:

1. Definisci una regola per il tag Floodlight quando l'URL equivale a quello della pagina di conferma.

2. Inserisci una definizione di dataLayer nel tuo sito web prima che il tag di Google Tag Manager, simile al seguente, sostituisca tutti gli elementi tra parentesi con i valori che stai cercando di trasferire (ciò presuppone che nei nomi di tutte le macro sia presente _value):

   <script>
    var dataLayer = [{“item_value”:item_value,
        “quantity_value”:quantity_value,
        “price_value”: price_value,
        “postage_value”: postage_value,
        “seller_value”: seller_value}];
</script>

   Esempio di tag completato:

   <script>
    var dataLayer = [{“item_value”:”great shoes”,
        “quantity_value”: 1,
        “price_value”: 20,
        “postage_value”: 8,
        “seller_value”: “shoemaker”}];
</script>

Quando Google Tag Manager attiva i tag Floodlight, le macro specificate saranno sostituite dai valori specificati nella definizione di dataLayer.

Metodo 2. La pagina di conferma e quella del pagamento hanno lo stesso URL oppure la pagina utilizza AJAX (metodo JavaScript)

1. Crea una regola per attivare il tag dopo un evento. Ad esempio, potresti creare un evento di nome "purchase_complete".

   Nome regola: fire_floodlight_tag
   Condizioni: {{event}} equals purchase_complete
   Tag con questa regola: nessuno

2. Utilizza JavaScript per attivare l'evento e passare tutte le informazioni necessarie al tag Floodlight:

   dataLayer.push = ({ “event”: “purchase_complete”,
    “item_value”:item_value,
    “quantity_value”: quantity_value,
    “price_value”: price_value,
    “postage_value”: postage_value,
    “seller_value”: seller_value});

   Esempio di chiamata JavaScript completata:

   dataLayer.push = ({ “event”: “purchase_complete”,
    “item_value”:”great shoes”,
    “quantity_value”: 1,
    “price_value”: 20,
    “postage_value”: 8,
    “seller_value”: “shoemaker”});

   Tieni presente che il valore dell'evento aggiunto (indicato sopra in grassetto) viene utilizzato per segnalare l'evento utilizzato da Google Tag Manager per attivare il tag Floodlight.

Metodo 3. La pagina di conferma e quella del pagamento hanno lo stesso URL oppure la pagina utilizza AJAX (metodo di monitoraggio evento automatico)

Il tracciamento eventi automatico utilizza listener di eventi, un particolare tipo di tag che rimane su una pagina in attesa del verificarsi di eventi utente, quindi crea un evento programmatico che può essere utilizzato per attivare altri tag. Gli eventi utente possono includere azioni come il clic su un pulsante o un link, l'invio di un modulo o un timer che deve raggiungere un intervallo definito.

Il seguente esempio descrive come utilizzare un listener dei clic su un link per attivare un tag. In questo scenario, l'evento si verifica quando l'utente seleziona un prodotto facendo clic in un elenco oppure selezionandolo da un elenco a discesa e viene trasferito a una pagina da cui può scaricare una brochure PDF. Questa pagina contiene un link alla brochure ed è proprio questa azione di fare clic sul link che desideriamo registrare come conversione.

Vai nel tuo account Google Tag Manager e procedi nel seguente modo:

1. Imposta un listener dei clic su link.

   1. Seleziona Nuovo tag.

   2. Specifica un nome descrittivo, come "downloadLinkListener" (questo può essere il nome utilizzato nel link per scaricare la brochure PDF).

   3. Nell'elenco a discesa "Tipo di tag", posiziona il puntatore del mouse sulla sezione "Listener di eventi", quindi seleziona Listener clic link dall'elenco a discesa espanso a destra.

   4. Se il link deve indirizzare il visitatore a una pagina diversa, controlla che sia selezionata l'opzione Attendi i tag. Non modificare il campo "Tempo max di attesa" se non hai un motivo specifico per farlo (ad esempio, stai attivando molti tag e vuoi assicurarti che tutti siano stati eseguiti).

2. Imposta una macro per acquisire l'URL quando si fa clic sul link.

   1. Seleziona Nuova macro.

   2. Specifica un nome descrittivo, ad esempio "linkUrl".

   3. Seleziona Variabile evento automatico dall'elenco a discesa "Tipo di macro".

   4. Seleziona URL elemento dall'elenco a discesa "Tipo di variabile" (ricorda che questa opzione funziona solamente con i link che impiegano il formato standard HREF, al posto di link JavaScript).

3. Imposta una macro per acquisire il prodotto che l'utente seleziona. Ai fini di questo esempio, si suppone che il nome del prodotto sia riportato in un menu a discesa e che il tag ID HTML per tale menu sia "productName". Consulta il team di sviluppatori web se ti serve assistenza per trovare questo ID.

   1. Seleziona Nuova macro.

   2. Specifica un nome descrittivo, ad esempio "selectedProduct".

   3. Seleziona Elemento DOM dall'elenco a discesa "Tipo di macro".

   4. Nel campo "ID elemento", inserisci l'ID del campo. In questo caso, l'ID è "productName" (senza le virgolette).

   5. Inserisci value nel campo "Nome attributo", in quanto recupereremo il contenuto dell'attributo value quando viene selezionato l'elenco a discesa.

4. Imposta una regola per attivare il tag listener di eventi.

   1. Seleziona Nuova regola.

   2. Specifica un nome descrittivo, ad esempio "downloadLinkClicked".

   3. In "Condizioni", imposta il primo elenco a discesa su {{event}}, il secondo su equals e la casella di testo su gtm.linkClick.

   4. Fai clic sul segno più (+).

   5. Imposta il primo elenco a discesa nella nuova riga sulla macro {{linkURL}} creata nel passaggio 2, il secondo su equals e, nella casella di testo, inserisci l'URL del PDF da scaricare (ad esempio, http://www.site.com/pdfs/brochure1.pdf).

5. Imposta un tag Floodlight per acquisire la conversione (se hai già creato questo tag o lo hai condiviso da Campaign Manager 360, vai al passaggio E).

   1. Seleziona Nuovo tag.

   2. Specifica un nome descrittivo, ad esempio "brochureDownloadTag".

   3. Scegli il tipo di tag appropriato alle tue esigenze, come "Contatore Floodlight".

   4. Imposta "ID inserzionista", "Tag gruppo" e "Stringa tag attività" con i valori identificativi del tag, configurando eventuali altri valori di tag standard secondo necessità.

   5. Dal menu a discesa in Variabili personalizzate, scegli u1 o altra variabile personalizzata che vuoi utilizzare per il monitoraggio.

   6. Fai clic sul pulsante della macro accanto alla casella di testo e seleziona la macro {{selectedProduct}} creata al passaggio 3.

6. Esegui i test e pubblica secondo necessità.