Integra el Trustbadge
Paso 1
Accede a la configuración de tu cuenta en Google Tag Manager y selecciona "Etiquetas" () en el menú principal, en el margen izquierdo de la pantalla. Haz clic en el botón "Nueva" (
) en la vista general que se abrirá.
Ponle primero un nombre () a la nueva etiqueta (por ejemplo:"Trustbadge"). Luego haz clic en "Configuración de la etiqueta" (
). A continuación se abre otro menú. En él, selecciona la opción "HTML personalizado" (
).
Paso 2
Para el siguiente paso, necesitas el código del Trustbadge®correspondiente a tu tienda. La base de tu código Trustbadge personal es el siguiente código de integración:
<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>
Encuentra la siguiente línea de código dentro del código de integración:
src="//widgets.trustedshops.com/js/YOUR_TSID.js">
Sustituye la sección en negrita YOUR_TSID con tu ID de Trusted Shops.
Puedes encontrar tu ID de Trusted Shops (que empieza por X...) en tu dashboard en el backend de My Trusted Shops. Para ello, incia sesión en My Trusted Shops aquí. Después de iniciar sesión, serás redirigido al dashboard. En la columna de la derecha, tus tiendas registradas en Trusted Shops aparecen con el respectivo ID de Trusted Shops.
Con esto ya has creado tu código del Trustbadge. Si no realizas más ajustes, el Trustbadge...
... muestra tus valoraciones recopiladas y, tras la certificación, tu Sello de Calidad de forma automática.
... tu Trustbadge será visible en la vista de escritorio, en la esquina inferior derecha 54 píxeles por encima del borde inferior de la pantalla y en la vista móvil, a la izquierda 10 píxeles por encima del borde inferior de la pantalla.
Llegados a este punto, tienes dos opciones:
- ¿Estás de acuerdo con estos ajustes? A continuación, vete directamente a los siguientes pasos de esta guía.
- ¿Quieres mostrar el Trustbadge de otra forma o integrarlo en otro lugar de tu tienda? Entonces, continúa con la configuración del código del Trustbadge con la ayuda de este artículo: ¿Cómo adapto el Trustbadge® a mis necesidades? Después, vuelve a este artículo y continúa con los siguientes pasos.
Copia el código completo del Trustbadge y vuelve a Google Tag Manager. Introduce el código en el campo "HTML" () y marca la opción "Compatible con document.write" (
). A continuación, haz clic en "Activación" (
).
En el siguiente paso, se define en qué páginas de tu tienda aparecerá la etiqueta recién creada que contiene el Trustbadge. Selecciona "All Pages". Finalmente, serás redirigido a la vista general de etiquetas. Haz clic aquí en el botón "Guardar" en la esquina superior derecha.
De este modo, el Trustbadge estará disponible en cada página de tu tienda; también, en la página de confirmación del pedido.
Los siguientes pasos varían en función de si solo recopilas valoraciones de servicio o tanto valoraciones de producto como de servicio con Trusted Shops. Ahora haz clic en el enlace que coincida con tu sitio web para continuar:
Recopilación de valoraciones de servicio
Paso 1
A través del Trustbadge, puedes enviar peticiones de valoración a tus clientes, en caso de que tu tienda esté certificada, ofrecerles la Protección al Comprador; pero antes tienes que realizar una pequeña adaptación en el Trustbadge. Se ha de incluir un elemento DIV para reconocer tu página de confirmación del pedido (página de agradecimiento). El Trustbadge abre automáticamente la Trustcard de tus clientes en esta página, incluida una protección del pedido y/o el consentimiento para el envío de una invitación de valoración.
Para simplificarles las cosas a tus clientes, los datos necesarios para la activación de la Protección al Comprador y para la invitación de valoración deben transferirse directamente de tu modelo de tienda al Trustbadge para que no tengan que volver a introducir sus datos de pedido. Ahora Google Tag Manager podrá acceder a todos los datos necesarios para contratar la Protección al Comprador, si amplías el código en Google Tag Manager en la página de confirmación del pedido con un objeto Javascript adicional, el objeto DataLayer.
Para ello, necesitarás el siguiente código.
<script>
dataLayer.push({
ts_checkout: {
'tsCheckoutOrderNr': '2020-05-21-001',
'tsCheckoutBuyerEmail': 'mi.cliente@mail.es',
'tsCheckoutOrderAmount': 4005.95,
'tsCheckoutOrderCurrency': 'EUR',
'tsCheckoutOrderPaymentType': 'PAGO ADELANTADO',
}});
</script>
Antes de poder usarlo en Google Tag Manager, debes reemplazar primero los valores contenidos en el código por las variables correspondientes, de tal manera que los datos se puedan rellenar dinámicamente. Para ello, te explicamos brevemente su funcionamiento a continuación.
'tsCheckoutOrderNr': '2020-05-21-001',
A través de este parámetro se transfiere el número del pedido. Este es necesario para poder asignar una valoración emitida, al proceso de pedido real. Si no se dispone de un número del pedido, también se puede transferir la hora del respectivo pedido, siempre que esta referencia sea única.
'tsCheckoutBuyerEmail': 'mi.cliente@mail.es',
Este parámetro transmite la dirección de correo electrónico de tu cliente. Este es necesario para poder enviar a tus clientes, días después del pedido, una invitación de valoración o un correo de confirmación sobre la Protección al Comprador contratada.
tsCheckoutOrderAmount': 4005.95,
Mediante este parámetro se transfiere el importe total del pedido. Como se puede reconocer en el ejemplo 4005.95, el separador decimal es un punto. También se transfieren dos decimales.
'tsCheckoutOrderCurrency': 'EUR',
Este parámetro transfiere el código de la moneda del pedido de acuerdo con la Norma ISO estándar 4217. Si solo se ofrece una moneda se puede introducir este valor en el código fijo.
'tsCheckoutOrderPaymentType': 'PAGO ADELANTADO',
A través de este parámetro se transfiere el método de pago utilizado. Aquí basta con una simple cadena de texto. Si el método de pago (ya) no está disponible en el momento de completar el pedido, puedes utilizar la palabra OTHER como valor codificado para este parámetro.
Dado que a través del elemento se transmiten los datos dinámicos del pedido, el ejemplo del código anterior no se debe copiar tal cual en la página de confirmación del pedido. En su lugar, sustituye los valores en negrita de cada parámetro de transferencia por las correspondientes variables en el lenguaje de programación utilizado por tu plataforma de ecommerce. En el lenguaje de programación PHP, la transferencia de la dirección de correo electrónico podría ser así, por ejemplo:
'tsCheckoutBuyerEmail': '<?php echo $customer_email; ?>'
$customer_email corresponde a la dirección de correo electrónico del cliente definida en el sistema de tu tienda. Por favor, consulta la documentación de tu sistema de tienda para saber la definición exacta de las variables a utilizar, ya que estas varían de un sistema a otro y nosotros no podemos dar información general al respecto.
En cuanto se haya preparado el código anterior, podrás copiarlo. A continuación, introdúcelo en la plantilla de tu página de confirmación de pedidos dentro de tu tienda.
De esta manera, se trasmiten los datos del pedido en concreto al objeto DataLayer.
Paso 2
Con las variables personalizadas, Google Tag Manager permite que los datos del Data Layer sean accesibles. Para ello, elige dentro del menú principal de Google Tag Manager el punto "Variables" () y haz clic en el botón "Nueva" (
) en la sección "Variables definidas por el usuario".
Ahora, introduce un nombre () para la variable (p. ej., "tsCheckoutOrderNr") y, a continuación, haz clic en "Configuración de la variable" (
).
Luego, selecciona en el menú que se abrirá el punto "Variable de capa de datos" ().
Introduce ahora en el campo "Nombre de variable de capa de datos" () el nombre de las variables de capa de datos que debe ser leído. En nuestro ejemplo, queremos leer el valor a partir del parámetro de número de pedido. Para ello, usamos como nombre "ts_checkout.tsCheckoutOrderNr". A continuación, haz clic en "Guardar" (
) para crear la variable.
De esta manera, los datos del parámetro de número de pedido serán accesibles. Repite este paso para los otros parámetros también. Utiliza la siguiente lista para nombrar las variables de Google Tag Manager en función de los nombres de las variables de la capa de datos:
| Nombre de la variable de Google Tag Manager | Nombre de la variable de la capa de datos |
| tsCheckoutOrderNr | ts_checkout.tsCheckoutOrderNr |
| tsCheckoutOrderAmount | ts_checkout.tsCheckoutOrderAmount |
| tsCheckoutBuyerEmail | ts_checkout.tsCheckoutBuyerEmail |
| tsCheckoutOrderPaymentType | ts_checkout.tsCheckoutOrderPaymentType |
| tsCheckoutOrderCurrency | ts_checkout.tsCheckoutOrderCurrency |
Paso 3
Ahora puedes usar en las etiquetas las variables definidas en el paso anterior y renderizar el Checkout-DIV. Para ello, selecciona "Etiquetas" () en el menú principal y haz clic en el botón "Nueva" (
).
Ponle un nombre a la nueva etiqueta (por ejemplo"Trustcard") () y luego haz clic en "Configuración de la etiqueta" (
). Selecciona ahora el punto del menú "HTML personalizado" (
).
Luego copia el siguiente código HTML e introdúcelo en el 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>
Además, marca de nuevo la opción "Compatible con document.write" () para activarlo. Luego haz clic "Activador" (
).
Para que la etiqueta Trustcard que acabas de crear aparezca también en la página de confirmación de pedidos, se debe configurar un nuevo activador.Para ello, haz clic en "+".
Elige "Vista de una página - DOM preparado" () como tipo de activador. Sin embargo, la etiqueta de la Trustcard no se debe reproducir en todas las páginas. Ahora, elige la opción "Algunos eventos preparados DOM" (
). A continuación, puedes definir una regla (
). A través de los dos menús desplegables, determina primero la "Page URL" y "contiene" como primeros componentes de tu regla. Luego introduce en el campo un componente de la URL de tu página de confirmación de pedidos mediante el cual Google Tag Manager pueda reconocer sin margen de error la página de confirmación de pedidos y active la etiqueta Trustcard en ella. Finalmente, haz clic en "Guardar" (
).
Después se te redirigirá a la vista general de la etiqueta. Haz clic en "Guardar" para terminar la creación de la etiqueta Trustcard.
Recopilación de valoraciones de servicio y de productos
Paso 1
A través del Trustbadge, puedes enviar peticiones de valoración a tus clientes, en caso de que tu tienda esté certificada, ofrecerles la Protección al Comprador; pero antes tienes que realizar una pequeña adaptación en el Trustbadge. Se ha de incluir un elemento DIV para reconocer tu página de confirmación del pedido (página de agradecimiento). El Trustbadge abre automáticamente la Trustcard de tus clientes en esta página, incluida una protección del pedido y/o el consentimiento para el envío de una invitación de valoración.
Para simplificarles las cosas a tus clientes, los datos necesarios para la activación de la Protección al Comprador y para la invitación de valoración deben transferirse directamente de tu modelo de tienda al Trustbadge para que no tengan que volver a introducir sus datos de pedido. Ahora Google Tag Manager podrá acceder a todos los datos necesarios para contratar la Protección al Comprador, si amplías el código en Google Tag Manager en la página de confirmación del pedido con un objeto Javascript adicional, el objeto DataLayer.
Para ello, necesitarás el siguiente código.
<script>
dataLayer.push({
ts_checkout: {
'tsCheckoutOrderNr': '2020-05-21-001',
'tsCheckoutBuyerEmail': 'mi.cliente@mail.es',
'tsCheckoutOrderAmount': 4005.95,
'tsCheckoutOrderCurrency': 'EUR',
'tsCheckoutOrderPaymentType': 'PAGO ADELANTADO',
'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 usarlo en Google Tag Manager, debes reemplazar primero los valores contenidos en el código por las variables correspondientes, de tal manera que los datos se puedan rellenar dinámicamente. Para ello, te explicamos brevemente su funcionamiento a continuación.
'tsCheckoutOrderNr': '2020-05-21-001',
A través de este parámetro se transfiere el número del pedido. Este es necesario para poder asignar una valoración emitida, al proceso de pedido real. Si no se dispone de un número del pedido, también se puede transferir la hora del respectivo pedido, siempre que esta referencia sea única.
'tsCheckoutBuyerEmail': 'mi.cliente@mail.es',
Este parámetro transmite la dirección de correo electrónico de tu cliente. Este es necesario para poder enviar a tus clientes, días después del pedido, una invitación de valoración o un correo de confirmación sobre la Protección al Comprador contratada.
tsCheckoutOrderAmount': 4005.95,
Mediante este parámetro se transfiere el importe total del pedido. Como se puede reconocer en el ejemplo 4005.95, el separador decimal es un punto. También se transfieren dos decimales.
'tsCheckoutOrderCurrency': 'EUR',
Este parámetro transfiere el código de la moneda del pedido de acuerdo con la Norma ISO estándar 4217. Si solo se ofrece una moneda se puede introducir este valor en el código fijo.
'tsCheckoutOrderPaymentType': 'PAGO ADELANTADO',
A través de este parámetro se transfiere el método de pago utilizado. Aquí basta con una simple cadena de texto. Si el método de pago (ya) no está disponible en el momento de completar el pedido, puedes utilizar la palabra OTHER como valor codificado para este parámetro.
'tsCheckoutProducts'
Este parámetro resume los siguientes parámetros necesarios para recopilar valoraciones de productos.
'tsCheckoutProductUrl': 'http://www.shop.url/product1_page.html',
Este parámetro se utiliza para transferir el enlace completo a la página de ficha de producto.
'tsCheckoutProductImageUrl': 'http://www.shop.url/image1.png',
Este parámetro te permite transferir la URL de una imagen de producto. La imagen del producto se muestra en el cuestionario de opinión y permite a tus clientes recordar el producto de manera más sencilla. Recomendamos enviar las URL correspondientes porque, por experiencia propia, la conversión es significativamente mayor.
'tsCheckoutProductName': 'Product Name 1',
Este parámetro transfiere el nombre del producto.
'tsCheckoutProductSKU': '0123456789',
Este parámetro se utiliza para transferir el SKU (Stock Keeping Unit) - el número de artículo asignado por tu tienda.
'tsCheckoutProductGTIN': '0123456789',
Este parámetro transfiere el número global de artículo comercial (GTIN). Dado que el GTIN identifica de forma exclusiva un producto en todo el mundo, la transferencia del GTIN permite a Google asignar fácilmente las valoraciones de producto recopiladas al producto correcto. Si has contratado nuestra Integración con Google y realizas campañas en Google Shopping y en Google Ads, el uso de este parámetro es obligatorio.
'tsCheckoutProductBrand': 'Mega Corp.',
Este parámetro transfiere la marca del producto. Al igual que el GTIN, también ayuda a identificar claramente los productos y a transferir correctamente a Google las opiniones recopiladas.
Dado que a través del elemento se transmiten los datos dinámicos del pedido, el ejemplo del código anterior no se debe copiar tal cual en la página de confirmación del pedido. En su lugar, sustituye los valores en negrita de cada parámetro de transferencia por las correspondientes variables en el lenguaje de programación utilizado por tu plataforma de ecommerce. En el lenguaje de programación PHP, la transferencia de la dirección de correo electrónico podría ser así, por ejemplo:
'tsCheckoutBuyerEmail': '<?php echo $customer_email; ?>'
$customer_email corresponde a la dirección de correo electrónico del cliente definida en el sistema de tu tienda. Por favor, consulta la documentación de tu sistema de tienda para saber la definición exacta de las variables a utilizar, ya que estas varían de un sistema a otro y nosotros no podemos dar información general al respecto.
En cuanto se haya preparado el código anterior, podrás copiarlo. A continuación, introdúcelo en la plantilla de tu página de confirmación de pedidos dentro de tu tienda.
De esta manera, se trasmiten los datos del pedido en concreto al objeto DataLayer.
Paso 2
Con las variables personalizadas, Google Tag Manager permite que los datos del Data Layer sean accesibles. Para ello, elige dentro del menú principal de Google Tag Manager el punto "Variables" () y haz clic en el botón "Nueva" (
) en la sección "Variables definidas por el usuario".
Ahora, introduce un nombre () para la variable (p. ej., "tsCheckoutOrderNr") y, a continuación, haz clic en "Configuración de la variable" (
).
Luego, selecciona en el menú que se abrirá el punto "Variable de capa de datos" ().
Introduce ahora en el campo "Nombre de variable de capa de datos" () el nombre de las variables de capa de datos que debe ser leído. En nuestro ejemplo, queremos leer el valor a partir del parámetro de número de pedido. Para ello, usamos como nombre "ts_checkout.tsCheckoutOrderNr". A continuación, haz clic en "Guardar" (
) para crear la variable.
De esta manera, los datos del parámetro de número de pedido serán accesibles. Repite este paso para los otros parámetros también. Utiliza la siguiente lista para nombrar las variables de Google Tag Manager en función de los nombres de las variables de la capa de datos:
| Nombre de la variable de Google Tag Manager | Nombre de la variable de la capa de datos |
| tsCheckoutOrderNr | ts_checkout.tsCheckoutOrderNr |
| tsCheckoutOrderAmount | ts_checkout.tsCheckoutOrderAmount |
| tsCheckoutBuyerEmail | ts_checkout.tsCheckoutBuyerEmail |
| tsCheckoutOrderPaymentType | ts_checkout.tsCheckoutOrderPaymentType |
| tsCheckoutOrderCurrency | ts_checkout.tsCheckoutOrderCurrency |
| tsCheckoutProducts | ts_checkout.tsCheckoutProducts |
Paso 3
Ahora puedes usar en las etiquetas las variables definidas en el paso anterior y renderizar el Checkout-DIV. Para ello, selecciona "Etiquetas" () en el menú principal y haz clic en el botón "Nueva" (
).
Ponle un nombre a la nueva etiqueta (por ejemplo"Trustcard") () y luego haz clic en "Configuración de la etiqueta" (
). Selecciona ahora el punto del menú "HTML personalizado" (
).
Luego copia el siguiente código HTML e introdúcelo en el 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>
Además, marca de nuevo la opción "Compatible con document.write" () para activarlo. Luego haz clic "Activador" (
).
Para que la etiqueta Trustcard que acabas de crear aparezca también en la página de confirmación de pedidos, se debe configurar un nuevo activador.Para ello, haz clic en "+".
Elige "Vista de una página - DOM preparado" () como tipo de activador. Sin embargo, la etiqueta de la Trustcard no se debe reproducir en todas las páginas. Ahora, elige la opción "Algunos eventos preparados DOM" (
). A continuación, puedes definir una regla (
). A través de los dos menús desplegables, determina primero la "Page URL" y "contiene" como primeros componentes de tu regla. Luego introduce en el campo un componente de la URL de tu página de confirmación de pedidos mediante el cual Google Tag Manager pueda reconocer sin margen de error la página de confirmación de pedidos y active la etiqueta Trustcard en ella. Finalmente, haz clic en "Guardar" (
).
Después se te redirigirá a la vista general de la etiqueta. Haz clic en "Guardar" para terminar la creación de la etiqueta Trustcard.