Integrare il Trustbadge
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. La base per il tuo codice personale del Trustbadge è il seguente codice di integrazione:
<script async
data-desktop-y-offset="0"
data-mobile-y-offset="0"
data-desktop-disable-reviews="false"
data-desktop-enable-custom="false"
data-desktop-position="right"
data-desktop-custom-width="156"
data-desktop-enable-fadeout="false"
data-disable-mobile="false"
data-disable-trustbadge="false"
data-mobile-custom-width="156"
data-mobile-disable-reviews="false"
data-mobile-enable-custom="false"
data-mobile-position="left"
data-mobile-enable-topbar="false"
data-mobile-enable-fadeout="true"
data-color-scheme="light"
charset="UTF-8"
src="//widgets.trustedshops.com/js/YOUR_TSID.js">
</script>
Individua la seguente riga di codice:
src="//widgets.trustedshops.com/js/YOUR_TSID.js">
Sostituisci la sezione in grassetto YOUR_TSID con il tuo ID Trusted Shops.
In questo modo hai creato il tuo codice Trustbadge. Se non effettui ulteriori modifiche, il Trustbadge...
...mostrerà le recensioni che hai raccolto e, dopo aver superato la certificazione, il Sigillo di Qualità.
...sarà visibile sul lato destro nella visualizzazione desktop e su quello sinistro nella visualizzazione mobile.
...sarà mostrato 54 pixel sopra il bordo inferiore dello schermo nella visualizzazione desktop e 10 pixel sopra il bordo inferiore in quella mobile.
A questo punto sono disponibili due opzioni:
- queste impostazioni ti soddisfano? Passa quindi direttamente ai passaggi successivi illustrati su questa guida.
- vuoi mostrare il Trustbadge in modo diverso o in un'altra posizione nel tuo negozio? Allora continua con la configurazione del codice Trustbadge con l'aiuto di questo articolo: Come posso adattare il Trustbadge® alle mie esigenze? Torna infine su questa pagina e segui i passaggi successivi.
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.
I passaggi successivi variano a seconda che tu raccolga con Trusted Shops sia le recensioni dei prodotti che del servizio o esclusivamente quelle del servizio. Seleziona uno dei seguenti link:
- Raccolgo solo le recensioni del servizio.
- Raccolgo sia le recensioni dei prodotti che quelle del servizio.
Raccogliere le recensioni del servizio
Passaggio 1
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"). La tua clientela vedrà aprirsi automaticamente la Trustcard sulla quale sono visibili le informazioni per la protezione dell'ordine e/o il consenso per l'invio di un invito di recensione.
Per rendere il lavoro per la tua clientela il più facile possibile, i dati necessari per l'attivazione della Protezione Acquirenti e per l'invito di recensione devono essere trasmessi direttamente dal template del tuo negozio al Trustbadge di modo che i clienti non debbano inserire nuovamente i dettagli del loro ordine. 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 2
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 il seguente elenco per denominare le variabili di Google Tag Manager in base ai nomi delle variabili del livello di dati:
| Nome variabile di Google Tag Manager | Nome variabile del livello dati |
| tsCheckoutOrderNr | ts_checkout.tsCheckoutOrderNr |
| tsCheckoutOrderAmount | ts_checkout.tsCheckoutOrderAmount |
| tsCheckoutBuyerEmail | ts_checkout.tsCheckoutBuyerEmail |
| tsCheckoutOrderPaymentType | ts_checkout.tsCheckoutOrderPaymentType |
| tsCheckoutOrderCurrency | ts_checkout.tsCheckoutOrderCurrency |
Passaggio 3
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 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);
if ("undefined" !== typeof trustbadge) {
trustbadge.remove();
trustbadge.reInitialize();
}
</script>
Ricordati di spuntare nuovamente la voce “Supporto document.write” (). 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 - Pronto per DOM” () come tipo di attivatore. Tuttavia il tag Trustcard non deve essere riprodotto su tutte le pagine. Seleziona pertanto l’opzione “Alcuni eventi pronti per DOM” (
). 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.
Raccogliere le recensioni del servizio e dei prodotti
Passaggio 1
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"). La tua clientela vedrà aprirsi automaticamente la Trustcard sulla quale sono visibili le informazioni per la protezione dell'ordine e/o il consenso per l'invio di un invito di recensione.
Per rendere il lavoro per la tua clientela il più facile possibile, i dati necessari per l'attivazione della Protezione Acquirenti e per l'invito di recensione devono essere trasmessi direttamente dal template del tuo negozio al Trustbadge di modo che i clienti non debbano inserire nuovamente i dettagli del loro ordine. 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',
'tsCheckoutProducts': [{
'tsCheckoutProductUrl': 'http://www.shop.url/product1_page.html',
'tsCheckoutProductImageUrl': 'http://www.shop.url/image1.png',
'tsCheckoutProductName': 'Product Name 1',
'tsCheckoutProductSKU': '0123456789',
'tsCheckoutProductGTIN': '0123456789',
'tsCheckoutProductBrand': 'Mega Corp.',
},
{
'tsCheckoutProductUrl': 'http://www.shop.url/product2_page.html',
'tsCheckoutProductImageUrl': 'http://www.shop.url/image2.png',
'tsCheckoutProductName': 'Product Name 2',
'tsCheckoutProductSKU': '987654321',
'tsCheckoutProductGTIN': '987654321',
'tsCheckoutProductBrand': 'Mega Corp.',
}
]
}});
</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.
'tsCheckoutProducts'
Questo parametro riassume i seguenti elementi necessari per raccogliere le recensioni dei prodotti.
'tsCheckoutProductUrl': 'http://www.shop.url/product1_page.html',
Questo parametro viene utilizzato per trasferire il link completo alla pagina di dettaglio del prodotto.
'tsCheckoutProductImageUrl': 'http://www.shop.url/image1.png',
Questo parametro consente di trasferire l’URL di un’immagine del prodotto. L'immagine del prodotto è riportata nel questionario di recensione e consente alla tua clientela di ricordare più facilmente il prodotto. Consigliamo di inviare URL corrispondenti perché le conversioni risultano più elevate, in base alla nostra esperienza.
'tsCheckoutProductName': 'Product Name 1',
Questo parametro trasferisce il nome del prodotto.
'tsCheckoutProductSKU': '0123456789',
Questo parametro viene utilizzato per trasferire il codice SKU (Stock Keeping Unit), ovvero il numero assegnato all’articolo dal tuo negozio.
'tsCheckoutProductGTIN': '0123456789',
Questo parametro trasferisce il Global Trade Item Number (GTIN). Poiché il GTIN identifica un prodotto in modo univoco a livello mondiale, la trasmissione del GTIN consente a Google di assegnare le recensioni raccolte al prodotto giusto. Quindi, se sfrutti la nostra integrazione Google e hai delle campagne attive su Google Shopping o Ads, dovrai usare questo parametro.
'tsCheckoutProductBrand': 'Mega Corp.',
Questo parametro trasferisce la marca del prodotto. Proprio come i codici GTIN e MPN, questo parametro consente di identificare chiaramente i prodotti e di trasferire correttamente le recensioni raccolte.
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 2
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 il seguente elenco per denominare le variabili di Google Tag Manager in base ai nomi delle variabili del livello di dati:
| Nome variabile di Google Tag Manager | Nome variabile del livello dati |
| tsCheckoutOrderNr | ts_checkout.tsCheckoutOrderNr |
| tsCheckoutOrderAmount | ts_checkout.tsCheckoutOrderAmount |
| tsCheckoutBuyerEmail | ts_checkout.tsCheckoutBuyerEmail |
| tsCheckoutOrderPaymentType | ts_checkout.tsCheckoutOrderPaymentType |
| tsCheckoutOrderCurrency | ts_checkout.tsCheckoutOrderCurrency |
| tsCheckoutProducts | ts_checkout.tsCheckoutProducts |
Passaggio 3
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 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>';
var list = {{tsCheckoutProducts}}
list.forEach(function perProduct(product) {
strOut += '<span class="tsCheckoutProductItem">';
strOut += '<span class="tsCheckoutProductUrl">' + product.tsCheckoutProductUrl + '</span>';
strOut += '<span class="tsCheckoutProductImageUrl">' + product.tsCheckoutProductImageUrl + '</span>';
strOut += '<span class="tsCheckoutProductName">' + product.tsCheckoutProductName + '</span>';
strOut += '<span class="tsCheckoutProductSKU">' + product.tsCheckoutProductSKU + '</span>';
strOut += '<span class="tsCheckoutProductGTIN">' + product.tsCheckoutProductGTIN + '</span>';
strOut += '<span class="tsCheckoutProductBrand">' + product.tsCheckoutProductBrand + '</span>';
strOut += '</span>';
});
strOut += '</div>';
document.write(strOut);
if ("undefined" !== typeof trustbadge) {
trustbadge.remove();
trustbadge.reInitialize();
}
</script>
Ricordati di spuntare nuovamente la voce “Supporto document.write” (). 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 - Pronto per DOM” () come tipo di attivatore. Tuttavia il tag Trustcard non deve essere riprodotto su tutte le pagine. Seleziona pertanto l’opzione “Alcuni eventi pronti per DOM” (
). 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.