Passo 1
Aceda às configurações da sua conta no Google Tag Manager e selecione "Etiquetas" (
) no menu principal, na margem esquerda do ecrã. Clique no botão "Nova" (
) na vista geral que se abrirá.
Coloque primeiro um nome () na etiqueta (por exemplo, "Trustbadge"). Em seguida, clique em "Configuração da etiqueta" (). Verá que depois se abre outro menu. Nele, selecione a opção "HTML personalizado" (
).
Passo 2
Para o passo seguinte, precisa do código do Trustbadge® correspondente à sua loja. Para isso, deve gerar em primeiro lugar este código neste site web.
Copie o código completo do Trustbadge e volte ao Google Tag Manager. Introduza o código no campo "HTML" () e selecione a opção "compatível com document.write" (). Em seguida, clique em "Ativação" ().
No passo seguinte, define-se em que páginas da sua loja aparecerá a etiqueta recentemente criada que contém o Trustbadge. Selecione "All Pages". Por fim, será redirecionado para a vista geral de etiquetas. Clique aqui no botão "Guardar" no canto superior direito.
Desta forma, o Trustbadge estará disponível em todas as páginas da sua loja; e na página de confirmação do pedido.
Passo 3
Através do Trustbadge pode enviar solicitações de avaliação aos seus clientes, caso a sua loja esteja certificada, oferecer-lhes a Proteção ao Comprador; mas antes tem que realizar uma pequena adaptação no Trustbadge. Deve incluir um elemento DIV para reconhecer a sua página de confirmação do pedido (página de agradecimento). O Trustbadge® abrirá automaticamente o Trustcard para os seus clientes, o qual inclui a proteção do pedido e/ou a autorização para receber lembretes de avaliação.
Para facilitar as coisas ao máximo para os seus clientes, evitando que tenham que introduzir desnecessariamente à mão os seus próprios dados para o pedido, os dados necessários para a Proteção ao Comprador e para a solicitação de avaliação devem ser transferidos diretamente para o Trustbadge a partir do modelo da sua loja. Agora o Google Tag Manager poderá aceder a todos os dados necessários para contratar a Proteção ao Comprador, se ampliar o código no Google Tag Manager na página de confirmação do pedido com um objeto Javascript adicional, o objeto DataLayer.
Para isso, necessitará do seguinte código.
<script>
dataLayer.push({
ts_checkout: {
"tsCheckoutOrderNr": '2020-05-21-001',
'tsCheckoutBuyerEmail': “mi.cliente@mail.es',
tsCheckoutOrderAmount': 4005.95,
"tsCheckoutOrderCurrency": 'EUR',
'tsCheckoutOrderPaymentType': 'PAGAMENTO ADIANTADO”,
}});
</script>
Antes de poder usá-lo no Google Tag Manager, deve substituir primeiro os valores contidos no código pelas variantes correspondentes, de tal forma que os dados possam ser preenchidos dinamicamente. Para o efeito, explicamos resumidamente o seu funcionamento a seguir.
"tsCheckoutOrderNr": '2020-05-21-001',
Através deste parâmetro, o número do pedido é transferido. Isto é necessário para poder atribuir uma avaliação emitida ao processo do pedido real. Caso não possua um número do pedido, também pode transferir a hora do respetivo pedido, desde que esta referência seja única.
'tsCheckoutBuyerEmail': 'mi.cliente@mail.pt',
Este parâmetro transmite o endereço de correio eletrónico do seu cliente. É necessário para poder enviar aos seus clientes, dias após o pedido, um convite de avaliação ou um e-mail de confirmação sobre a Proteção ao Comprador contratada.
tsCheckoutOrderAmount': 4005.95,
Através deste parâmetro transfere-se o montante total do pedido. Como se pode reconhecer no exemplo 4005.95, o separador decimal é um ponto. Os dois decimais também são transferidos.
"tsCheckoutOrderCurrency": 'EUR',
Este parâmetro transfere o código da moeda do pedido de acordo com a norma padrão ISO 4217. Se apenas se oferecer uma moeda, pode introduzir-se este valor no código fixo.
'tsCheckoutOrderPaymentType': 'PAGAMENTO ADIANTADO”,
Através deste parâmetro é transferido o método de pagamento utilizado. Uma cadeia de texto simples é suficiente aqui. Se o método de pagamento (já) não estiver disponível no momento da conclusão do pedido, pode usar a palavra OTHER como o valor codificado para este parâmetro.
Uma vez que os dados dinâmicos do pedido são transmitidos através do elemento, o exemplo do código anterior não deve ser copiado como está na página de confirmação do pedido. Em vez disso, substitua os valores em negrito de cada parâmetro de transferência pelas variáveis correspondentes na linguagem de programação usada pela sua plataforma de ecommerce. Na linguagem de programação PHP, a transferência do endereço de correio eletrónico poderia ser assim, por exemplo:
'tsCheckoutBuyerEmail': '?php echo $customer_email; ?'
$customer_email corresponde ao endereço de correio eletrónico do cliente definido no sistema da sua loja. Consulte a documentação do seu sistema de loja para saber a definição exata das variáveis a utilizar, pois variam de um sistema para outro e nós não podemos fornecer informações gerais sobre isso.
Logo que o código anterior esteja preparado, poderá copiá-lo. Em seguida, introduza-o no modelo da sua página de confirmação do pedido dentro da sua loja.
Desta forma, os dados específicos do pedido são especificamente transmitidos ao objeto DataLayer.
Passo 4
Com as variáveis personalizadas, o Google Tag Manager permite que os dados da Data Layer estejam acessíveis. Para isso, escolha dentro do menu principal do Google Tag Manager o item "Variáveis" (
) e clique no botão "Nova" (
) na secção "Variáveis definidas pelo utilizador".
Agora, introduza um nome () para a variável (p. ex., "tsCheckoutOrderNr") e, em seguida, clique em "Configuração da variável" (). Depois, selecione no menu que abrirá o item "Variável da camada de dados" (
).
Introduza agora no campo "Nome da variável da camada de dados" () o nome das variáveis da camada de dados que deve ser lido. No nosso exemplo, queremos ler o valor a partir do parâmetro do número do pedido. Para ello, usamos como nombre "ts_Checkout.tsCheckoutOrderNr". Em seguida, clique em "Guardar" () para criar a variável.
Desta forma, os dados do parâmetro do número do pedido estarão acessíveis. Repita este passo para os outros parâmetros também. Para isso, introduza os seguintes blocos de texto como o nome das variáveis da camada de dados:
- tsCheckoutOrderAmount
- tsCheckoutBuyerEmail
- tsCheckoutOrderPaymentType
- tsCheckoutOrderCurrency
Passo 5
Agora pode usar nas etiquetas as variáveis definidas no passo anterior e renderizar o Checkout-DIV. Para isso, selecione "Etiquetas" () no menu principal e clique no botão "Nova" ().
Coloque um nome na nova etiqueta (por exemplo, "Trustcard") () e depois clique nas "Configurações da etiqueta" (). Selecione agora, como fez no passo 1, o item do menu "HTML personalizado" ().
Depois, copie o seguinte código HTML e introduza-o no campo "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>
Além disso, selecione de novo a opção "compatível com document.write" () para ativá-lo. Depois, clique em "Configurações avançadas" ().
Para que tudo funcione corretamente, é importante que a etiqueta que criou recentemente possa ser reproduzida antes da etiqueta do Trustbadge na página de confirmação do pedido. Isto pode ser configurado nas "configurações avançadas". Para isso, clique em "Sequenciação de etiquetas" () para abrir mais opções. Seguidamente, ative a opção "Ativar uma etiqueta depois de ativar o Trustcard" () e escolha como "Etiqueta de eliminação" () a etiqueta "Trustbadge" criada no passo 1.
Em seguida, clique em "Ativador". Para que a etiqueta Trustcard que acaba de criar apareça também na página de confirmação dos pedidos, deve-se configurar um novo ativador. Para isso, clique em "+". Escolha "Página Vista" () como tipo de ativador. No entanto, a etiqueta do Trustcard não deve ser reproduzida em todas as páginas. Agora, selecione a opção "Algumas páginas vistas" (). Em seguida, pode definir uma regra (). Através dos dois menus suspensos, primeiro determine a "Page URL" e "contém" como primeiros componentes da sua regra. Depois, introduza no campo um componente do URL da página de confirmação dos pedidos através do qual o Google Tag Manager possa reconhecer sem margem para erros a página de confirmação dos pedidos e ative a etiqueta Trustcard nela. Por fim, clique em "Guardar" (
).
Depois, será redirecionado para a vista geral da etiqueta. Clique em "Guardar" para terminar a criação da etiqueta Trustcard.