Utilizar Trusted Shops con el Google Tag Manager

Paso 1

Accede a la configuración de tu cuenta en Google Tag Manager y selecciona "Etiquetas" (01_16x16.png) en el menú principal, en el margen izquierdo de la pantalla. Haz clic en el botón "Nueva" (02_16x16.png) en la vista general que se abrirá.

01_Tags_Neu_es.png

Ponle primero un nombre (01_16x16.png) a la nueva etiqueta (por ejemplo:"Trustbadge"). Luego haz clic en "Configuración de la etiqueta" (02_16x16.png). A continuación se abre otro menú.  En él, selecciona la opción "HTML personalizado" (03_16x16.png).

02_NeuesTag_Benutzerdefiniertes-HTML_es.png

Paso 2

Para el siguiente paso, necesitas el código del Trustbadge®correspondiente a tu tienda. Para esto, debes generar  en primer lugar este código en este sitio web.

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.

Copia el código completo del Trustbadge y vuelve a Google Tag Manager. Introduce el código en el campo "HTML" (01_16x16.png) y marca la opción "compatible con document.write" (02_16x16.png). A continuación, haz clic en "Activación" (03_16x16.png).

03_NeuesTag_Code-einf_gen_es.png

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.

04_Trigger_AllPages_es.png

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.

Paso 3

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 abrirá automáticamente la Trustcard para tus clientes, la cual incluye la protección del pedido y/o el consentimiento para recibir recordatorios de valoración.

Para facilitar las cosas al máximo a tus clientes, evitando que tengan que introducir a mano innecesariamente sus propios datos para el pedido, los datos requeridos para la Protección al Comprador

y para la solicitud de valoración deberían trasladarse directamente al Trustbadge desde la plantilla de tu tienda. 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 4

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" (01_16x16.png) y haz clic en el botón "Nueva" (02_16x16.png) en la sección "Variables definidas por el usuario".

05_Variablen_es.png

Ahora, introduce un nombre (01_16x16.png) para la variable (p. ej., "tsCheckoutOrderNr") y, a continuación, haz clic en "Configuración de la variable" (02_16x16.png). Luego, selecciona en el menú que se abrirá el punto "Variable de capa de datos" (03_16x16.png).

06_NeueVariable_Variablekonfigurieren_es.png

Introduce ahora en el campo "Nombre devariable de capa de datos" (01_16x16.png) 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" (02_16x16.png) para crear la variable.

07_Datenschichtvariable_Konfiguration_es.png

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. Para ello, introduce los siguientes bloques de texto como nombre de las variables de capa de datos:

  • ts_Checkout.tsCheckoutOrderAmount
  • ts_Checkout.tsCheckoutBuyerEmail
  • ts_Checkout.tsCheckoutOrderPaymentType
  • ts_Checkout.tsCheckoutOrderCurrency

Paso 5

Ahora puedes usar en las etiquetas las variables definidas en el paso anterior y renderizar el Checkout-DIV. Para ello, selecciona "Etiquetas" (01_16x16.png) en el  menú principal y haz clic en el botón "Nueva" (02_16x16.png). 

08_Tags_Neu2_es.png

Ponle  un nombre a la nueva etiqueta (por ejemplo"Trustcard") (01_16x16.png) y luego haz clic en "Configuración de la etiqueta" (02_16x16.png). Selecciona ahora, como lo hiciste en el paso 1, el punto del menú "HTML personalizado" (03_16x16.png).

09_NeuesTag2_Benutzerdefiniertes-HTML_es.png

Luego copia el siguiente código HTML e introdúcelo en el campo "HTML" (01_16x16.png).

<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>

Además, marca de nuevo la opción "compatible con document.write" (02_16x16.png) para activarlo. Luego haz clic en "Configuración avanzada" (03_16x16.png).

10_Trustcard_Konfiguration_es.png

Para que todo funcione correctamente, es importante que la etiqueta recién creada se pueda reproducir antes de la etiqueta del Trustbadge en la página de confirmación del pedido. Esto lo puedes configurar en la "configuración avanzada". Para ello, haz clic  en "Secuenciación de etiquetas" (01_16x16.png) para desplegar más opciones. A continuación, activa la opción "Activar una etiqueta después de que se active la Trustcard" (02_16x16.png) y elige como "Etiqueta de eliminación" (03_16x16.png) la etiqueta "Trustbadge" creada en el paso 1.

11_Tag-Reihenfolge_es.png

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 "Página Vista" (01_16x16.png) 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 "Algunas páginas vistas" (02_16x16.png). A continuación, puedes definir una regla (03_16x16.png). 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" (04_16x16.png).

12_NeuerTrigger_Konfiguration_es.png

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.


¿Ha sido útil el artículo?

Usuarios a los que les pareció útil: 3 de 3