Passaggio 1
Vai nell’area “Area di lavoro” del tuo account all’interno di Google Tag Manager e seleziona la voce “Tag” (
) dalla barra di navigazione laterale a sinistra. Si aprirà una nuova schermata. Qui, fai clic su “Nuovo” (
).
Per prima cosa, assegna un nome () al nuovo tag (ad es. “Trustbadge”). Successivamente fai clic su “Configurazione tag” (). Si aprirà un altro menu. Seleziona l’opzione “HTML personalizzato” (
).
Passaggio 2
Per il prossimo passaggio hai bisogno del codice Trustbadge® corrispondente. Puoi generare il codice con l’ausilio del tuo ID Trusted Shops o dell’URL del tuo negozio online. A tal fine ti basta inserire l’uno o l’altra nel campo di immissione di questo sito web. Dopodiché la generazione del tuo codice Trustbadge avviene in automatico.
Copia tutto il codice Trustbadge e torna al Google Tag Manager. Inserisci il codice nel campo “HTML” () e spunta la casella “Supporto document.write” (). Successivamente fai clic sul campo “Attivazione” ().
Nel prossimo passaggio, puoi definire su quale pagina del negozio deve comparire il nuovo tag creato contenente il Trustbadge. Seleziona “All Pages”. Successivamente verrai reindirizzato alla panoramica dei tag. Qui, fai clic sul pulsante “Salva” nell’angolo in alto a destra.
Il Trustbadge sarà così visibile su ogni pagina del tuo negozio online, anche sulla pagina di conferma d’ordine.
Passaggio 3
Per inviare una richiesta di recensione ai tuoi clienti attraverso il Trustbadge e, una volta superata la certificazione, offrire la garanzia di acquisto , il Trustbadge necessita di un piccolo aiuto. Devi inserire un elemento div che renda riconoscibile la pagina di conferma dell’ordine ("Thank-you-page"). Su questa pagina, il Trustbadge si aprirà in un pop-up (la Trustcard) che consente ai clienti di attivare la garanzia per l’ordine con un solo clic e/o di dare il proprio consenso all’invio della richiesta di recensione.
Per far sì che i tuoi clienti non debbano inserire di nuovo i dati, i dati necessari per l’attivazione della garanzia e l’invio di una richiesta di recensione devono essere trasferiti direttamente dal template del tuo negozio al Trustbadge. Google Tag Manager potrà accedere a tutti i dati necessari per l’attivazione della garanzia se completi il codice Google Tag Manager della pagina di conferma dell’ordine con l’oggetto JavaScript chiamato DataLayer.
A tale scopo, hai bisogno del seguente codice.
<script>
dataLayer.push({
ts_checkout: {
'tsCheckoutOrderNr': '2020-05-21-001',
'tsCheckoutBuyerEmail': 'mio.cliente@mail.it',
'tsCheckoutOrderAmount': 4005.95,
'tsCheckoutOrderCurrency': 'EUR',
'tsCheckoutOrderPaymentType': 'PAGAMENTO ANTICIPATO',
}});
</script>
Prima di poter utilizzare Google Tag Manager, devi sostituire i valori esemplificativi contenuti nel codice con le rispettive variabili reali, per compilare i dati in modo dinamico. A tale scopo, vogliamo spiegarti brevemente le rispettive funzioni.
'tsCheckoutOrderNr': '2020-05-21-001',
Questo parametro trasferisce il numero d’ordine. Questo è necessario al fine di poter associare una transazione reale alla recensione ricevuta. Se un numero d’ordine non è disponibile, è possibile trasferire il timestamp del relativo ordine a condizione che questo riferimento sia univoco.
'tsCheckoutBuyerEmail': 'mio.cliente@mail.it',
Questo parametro trasferisce l’indirizzo e-mail del cliente. Questo è necessario al fine di poter inviare ai tuoi clienti, qualche giorno dopo l’ordine, un invito a rilasciare una recensione oppure una mail di conferma sulla garanzia stipulata.
'tsCheckoutOrderAmount': 4005.95,
Questo parametro trasferisce l’importo totale dell’ordine. Come puoi vedere nell’esempio 4005.95, il carattere di separazione dei decimali è il punto. Inoltre il numero di posizioni decimali trasferite è due.
'tsCheckoutOrderCurrency': 'EUR',
Questo parametro trasferisce la sigla della valuta dell’ordine secondo la codifica ISO standard 4217. Se offri una sola valuta, hai anche la possibilità di codificare tale valore in modo fisso (hard).
'tsCheckoutOrderPaymentType': 'PAGAMENTO ANTICIPATO',
Questo parametro trasferisce il metodo di pagamento utilizzato. Qui una semplice stringa di testo è più che sufficiente. Se alla conclusione dell’ordine il metodo di pagamento non è (più) disponibile, hai la possibilità di codificare hard la parola OTHER come valore di questo parametro.
Dato che l’elemento serve al trasferimento di dati d’ordine dinamici, non devi copiare nella pagina di conferma d’ordine l’esempio di codice presentato sopra senza prima averlo modificato. Sostituisci invece i valori, evidenziati in grassetto, di ciascun parametro di trasferimento con appropriate variabili nel linguaggio di programmazione del sistema del tuo negozio online. Ecco un esempio in linguaggio di programmazione PHP per il trasferimento dell’indirizzo PHP:
'tsCheckoutBuyerEmail': '?php echo $customer_email; ?'
$customer_email rinvia all’indirizzo e-mail del cliente presente nel sistema del tuo negozio online. Per l’esatta definizione delle variabili da usare, ti preghiamo di consultare la documentazione del sistema del tuo negozio online poiché queste variano da sistema a sistema e non è possibile qui dare dei valori generalmente validi.
Appenahai finito di preparare il codice, puoi copiarlo. Inseriscilo nel tuo negozio nel template della pagina di conferma d’ordine.
In questo modo, i dati dell’ordine effettivo vengono trasmessi all’oggetto DataLayer.
Passaggio 4
Grazie alle sue variabili personalizzabili, Google Tag Manager offre la possibilità di rendere accessibili i dati dal Data Layer. A tale scopo, seleziona la voce “Variabili” () dal menu principale del Google Tag Manager e fai clic su sul pulsante “Nuova” () nell’area “Variabili definite dall’utente”.
Inserisci prima un nome () per la variabile (ad es. “tsCheckoutOrderNr”), quindi fai clic su “Configurazione variabile” (). Dal menu che si apre, seleziona la voce “Variabile di livello dati” ().
Ora inserisci il nome della variabile del Data Layer nel campo di immissione “Nome variabile livello dati” (). Nel nostro esempio, vogliamo prendere il valore dal parametro relativo al numero d’ordine. Per questo motivo, utilizzeremo il nome “ts_Checkout.tsCheckoutOrderNr”. Fai clic su “Salva” () per registrare la variabile.
In questo modo hai reso accessibile i dati dal parametro relativo al numero d’ordine. Ripeti questo passaggio anche per gli altri parametri. Utilizza i seguenti testi estesi come nome delle variabili livello dati:
- ts_Checkout.tsCheckoutOrderAmount
- ts_Checkout.tsCheckoutBuyerEmail
- ts_Checkout.tsCheckoutOrderPaymentType
- ts_Checkout.tsCheckoutOrderCurrency
Passaggio 5
Adesso è possibile utilizzare nei tag le variabili definite nel passaggio precedente e restituire il Checkout-DIV. A tale scopo, dal menu principale seleziona prima la voce “Tag” (), quindi fai clic sul pulsante “Nuovo” ().
Per prima cosa, assegna un nome al nuovo tag (ad es. “Trustcard”) (), quindi fai clic su “Configurazione tag” (). Adesso, come già fatto nel Passaggio 1, seleziona la voce del menu “HTML personalizzato” ().
Copia il seguente codice HTML e inseriscilo nel campo di immissione “HTML” ().
<script>
var strOut = '';
strOut += '<div id="trustedShopsCheckout" style="display: none;">';
strOut += '<span id="tsCheckoutOrderNr">' + {{tsCheckoutOrderNr}} + '</span>';
strOut += '<span id="tsCheckoutBuyerEmail">' + {{tsCheckoutBuyerEmail}} + '</span>';
strOut += '<span id="tsCheckoutOrderAmount">' + {{tsCheckoutOrderAmount}} + '</span>';
strOut += '<span id="tsCheckoutOrderCurrency">' + {{tsCheckoutOrderCurrency}} + '</span>';
strOut += '<span id="tsCheckoutOrderPaymentType">' + {{tsCheckoutOrderPaymentType}} + '</span>';
strOut += '</div>';
document.write(strOut);
</script>
Ricordati di spuntare nuovamente la voce “Supporto document.write” (). Infine, fai clic su “Impostazioni avanzate” ().
Per un corretto funzionamento, è importante che il tag appena creato venga riprodotto sulla pagina di conferma d’ordine prima del tag del Trustbadge. È possibile definire questa opzione attraverso le impostazioni avanzate. Per prima cosa, fai clic su “Sequenza tag” () per aprire le ulteriori modalità di selezione. Infine attiva la selezione “Attiva un tag dopo l'attivazione di Trustcard” () e come “Tag di cleanup” () seleziona il tag “Trustbadge” creato nel passaggio 1.
Successivamente fai clic sull’area “Attivazione”. Affinché il tag Trustcard che si sta creando compaia effettivamente solo sulla pagina di conferma d’ordine, è necessario definire un nuovo attivatore (trigger). Fai clic sul segno “+”. Seleziona “Visualizzazione di pagina” () come tipo di attivatore. Tuttavia il tag Trustcard non deve essere riprodotto su tutte le pagine. Seleziona pertanto l’opzione “Alcune visualizzazioni di pagina” (). Successivamente puoi definire una regola (). Nei due menu a discesa, seleziona prima “Page URL” e “contiene” come parte integrante della regola. Nel campo di immissione, inserisci la parte dell’URL della pagina di conferma d’ordine. In questo modo, Google Tag Manager riconoscerà in modo univoco la pagina di conferma d’ordine in questione e attiverà solo su di essa il tag Trustcard. Quindi fai clic su “Salva” (
).
Successivamente verrai reindirizzato alla panoramica dei tag. Fai clic su “Salva” per completare la creazione del tag Trustcard.