Integrar o Trustbadge
Passo 1
Aceda às configurações da sua conta no Gestor de Etiquetas do Google 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. A base para o seu código Trustbadge pessoal é o seguinte código de integração:
<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>
Encontre a seguinte linha de código dentro do código de integração:
src="//widgets.trustedshops.com/js/YOUR_TSID.js">
Substitua a secção a negrito YOUR_TSID pela sua ID Trusted Shops.
Desta forma, cria o seu código Trustbadge. Se não efetuar mais ajustes, o Trustbadge…
… mostra as suas avaliações acumuladas e – depois de obter com sucesso a certificação – o seu selo de qualidade.
… é apresentado à direita na vista Desktop e à esquerda na vista móvel.
… é apresentado na vista Desktop, 54 píxeis acima da margem inferior do ecrã, e na vista móvel, 10 píxeis acima da margem inferior do ecrã.
Aqui, tem duas possibilidades:
- Concorda com estas definições? Depois, avance diretamente para os passos seguintes neste guia.
- Pretende apresentar o Trustbadge de outra forma ou integrá-lo noutro local na sua loja? Continue a configurar o Código Trustbadge através deste artigo: Como posso adaptar o Trustbadge® às minhas necessidades? Posteriormente, regresse a este artigo e continue com os passos seguintes.
Copie o código completo do Trustbadge e volte ao Gestor de Etiquetas do Google. Introduza o código no campo "HTML" () e selecione a opção "Suportar document.write" (
). Em seguida, clique em "Acionadores" (
).
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.
Os passos seguintes diferem conforme recolha apenas avaliações de serviço ou avaliações de serviço e produto com a Trusted Shops. Agora clique no link que corresponde ao seu site para continuar:
Recolher avaliações de serviço
Passo 1
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). De seguida, o Trustbadge abre automaticamente o Trustcard para os seus clientes nesta página, incluindo uma proteção do pedido e/ou uma autorização para o envio de um convite de avaliação.
Para facilitar o processo para os seus clientes, os dados necessários para a ativação da Proteção ao Comprador e para o convite de avaliação devem ser transmitidos diretamente do template da sua loja para o Trustbadge, para que não tenham de introduzir novamente os dados do respetivo pedido. Agora o Gestor de Etiquetas do Google poderá aceder a todos os dados necessários para contratar a Proteção ao Comprador, se ampliar o código no Gestor de Etiquetas do Google 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': 'o.meu.cliente@mail.pt',
'tsCheckoutOrderAmount': 4005.95,
'tsCheckoutOrderCurrency': 'EUR',
'tsCheckoutOrderPaymentType': 'PAGAMENTO ANTECIPADO',
}});
</script>
Antes de poder usá-lo no Gestor de Etiquetas do Google, 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': 'o.meu.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 ANTECIPADO',
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 2
Com as variáveis personalizadas, o Gestor de Etiquetas do Google permite que os dados da Data Layer estejam acessíveis. Para isso, escolha dentro do menu principal do Gestor de Etiquetas do Google 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. Utilize a seguinte lista para nomear as variáveis do Gestor de Etiquetas do Google com base nos nomes das variáveis da camada de dados:
| Nome variável do Gestor de Etiquetas do Google | Nome variável da camada de dados |
| tsCheckoutOrderNr | ts_checkout.tsCheckoutOrderNr |
| tsCheckoutOrderAmount | ts_checkout.tsCheckoutOrderAmount |
| tsCheckoutBuyerEmail | ts_checkout.tsCheckoutBuyerEmail |
| tsCheckoutOrderPaymentType | ts_checkout.tsCheckoutOrderPaymentType |
| tsCheckoutOrderCurrency | ts_checkout.tsCheckoutOrderCurrency |
Passo 3
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 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);
if ("undefined" !== typeof trustbadge) {
trustbadge.remove();
trustbadge.reInitialize();
}
</script>
Além disso, selecione de novo a opção "Suportar document.write" () para ativá-lo. Em seguida, clique em "Acionadores" (
).
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 "Visualização de página - DOM preparado" () 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 "Alguns eventos preparados para DOM" (
). 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 Gestor de Etiquetas do Google 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.
Recolher avaliações de serviços e produto
Passo 1
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). De seguida, o Trustbadge abre automaticamente o Trustcard para os seus clientes nesta página, incluindo uma proteção do pedido e/ou uma autorização para o envio de um convite de avaliação.
Para facilitar o processo para os seus clientes, os dados necessários para a ativação da Proteção ao Comprador e para o convite de avaliação devem ser transmitidos diretamente do template da sua loja para o Trustbadge, para que não tenham de introduzir novamente os dados do respetivo pedido. Agora o Gestor de Etiquetas do Google poderá aceder a todos os dados necessários para contratar a Proteção ao Comprador, se ampliar o código no Gestor de Etiquetas do Google 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': 'o.meu.cliente@mail.pt',
'tsCheckoutOrderAmount': 4005.95,
'tsCheckoutOrderCurrency': 'EUR',
'tsCheckoutOrderPaymentType': 'PAGAMENTO ANTECIPADO',
'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>
Antes de poder usá-lo no Gestor de Etiquetas do Google, 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': 'o.meu.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 ANTECIPADO',
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.
'tsCheckoutProducts'
Este parâmetro resume os seguintes parâmetros necessários para recolher avaliações de produto.
'tsCheckoutProductUrl': 'http://www.shop.url/product1_page.html',
Este parâmetro é utilizado para transferir o link completo para a página de detalhes do produto.
'tsCheckoutProductImageUrl': 'http://www.shop.url/image1.png',
Este parâmetro permite-lhe transferir o URL de uma imagem do produto. A imagem do produto é exibida no questionário de opinião e permite que os seus clientes se recordem mais facilmente do produto. Recomendamos o envio de URL correspondentes, uma vez que, de acordo com a nossa experiência, a conversão é significativamente superior.
'tsCheckoutProductName': 'Product Name 1',
Este parâmetro transfere o nome do produto.
'tsCheckoutProductSKU': '0123456789',
Este parâmetro é utilizado para transferir a unidade de manutenção de stock (SKU) – o número de referência atribuído pela sua loja.
'tsCheckoutProductGTIN': '0123456789',
Este parâmetro transfere o Número Global de Artigo Comercial (GTIN). Uma vez que o GTIN identifica um produto de forma única a nível mundial, a transferência do GTIN facilita particularmente a atribuição pelo Google das suas avaliações de produto recolhidas ao produto certo. Assim, se reservou a nossa Integração com Google e está a promover campanhas no Google Shopping e no Google Ads, é necessário utilizar este parâmetro.
'tsCheckoutProductBrand': 'Mega Corp.',
Este parâmetro transfere a marca do produto. Tal como o GTIN, também ajuda a identificar os produtos com clareza e a transferir corretamente as opiniões recolhidas para o Google.
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 2
Com as variáveis personalizadas, o Gestor de Etiquetas do Google permite que os dados da Data Layer estejam acessíveis. Para isso, escolha dentro do menu principal do Gestor de Etiquetas do Google 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. Utilize a seguinte lista para nomear as variáveis do Gestor de Etiquetas do Google com base nos nomes das variáveis da camada de dados:
| Nome variável do Gestor de Etiquetas do Google | Nome variável da camada de dados |
| tsCheckoutOrderNr | ts_checkout.tsCheckoutOrderNr |
| tsCheckoutOrderAmount | ts_checkout.tsCheckoutOrderAmount |
| tsCheckoutBuyerEmail | ts_checkout.tsCheckoutBuyerEmail |
| tsCheckoutOrderPaymentType | ts_checkout.tsCheckoutOrderPaymentType |
| tsCheckoutOrderCurrency | ts_checkout.tsCheckoutOrderCurrency |
| tsCheckoutProducts | ts_checkout.tsCheckoutProducts |
Passo 3
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 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>';
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>
Além disso, selecione de novo a opção "Suportar document.write" () para ativá-lo. Em seguida, clique em "Acionadores" (
).
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 "Visualização de página - DOM preparado" () 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 "Alguns eventos preparados para DOM" (
). 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 Gestor de Etiquetas do Google 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.