Paso 7: Configuración del thank you page

Para realizar la configuración del device fingerprint es necesario contar con una cuenta de Google con acceso al Google Tag Manager del sitio VTEX que se está configurando.

2160 2160 2160
  1. Crearemos un TAG para un producto de HTML Personalizado dando clic en el menú izquierdo ETIQUETAS como se en la siguiente imagen:
1200
  1. En el campo de Configuración de la etiqueta agregaremos el tipo de etiqueta,

  2. En el campo *Personalizado > HTML de la configuración debemos pegar el código HTML que realiza el llamado al código que realiza,

  3. A continuación se muestra el código HTML que se debe ingresar durante la configuración de la etiqueta dentro de Google Tag Manager.

<script type="text/javascript">
	var orderNumber;
    var params = window.location.search.split('&');
    for (var i = 0; i < params.length; i++) {
      if (params[i].indexOf('og=') != -1) {
        orderNumber = params[i].split('=')[1];
      }
    }
    $.get('/api/checkout/pub/orders/order-group/' + orderNumber, function(data) {
      var acquirer = data[0].paymentData.transactions[0].payments[0].connectorResponses.acquirer;
      var nsu = data[0].paymentData.transactions[0].payments[0].connectorResponses.nsu;
      var paymentSystemName = data[0].paymentData.transactions[0].payments[0].paymentSystemName;
      if (acquirer.indexOf('Conekta') != -1) {
        if (paymentSystemName.indexOf('OXXO') != -1) {
          if ($('.cconf-payment div p span.mb1.db:first-child'))
          	$('.cconf-payment div p span.mb1.db:first-child').text('Conekta | Pago en Efectivo - OXXO Pay');
          nsu = nsu.split('|');
          $('.cf.br2.pa4.cconf-alert.ba.b--light-silver.bg-washed-green').prepend('<div style="text-align: center; margin-bottom: 16px"><img src="https://conektamx.vteximg.com.br/arquivos/OXXO-PAY-2019-01.png" style="max-width:30%" /></div>');
          $('.cf.br2.pa4.cconf-alert.ba.b--light-silver.bg-washed-green div div').append('<div style="margin-top: 16px;text-align: center"><h4>REFERENCIA</h4><div style="display:inline-block; padding: 8px 48px; border: 1px solid #AAA"><h4>' + nsu[0].match(/.{1,4}/g).join('-') + '</h4><img style="width: 150px" src="' + (nsu.length > 1 ? nsu[1] : '') + '" /></div></div><div style="margin-top: 16px"><h5>INSTRUCCIONES</h5><ol><li>Acude a la tienda OXXO m&aacute;s cercana.</li><li>Indica en caja que quieres realizar un pago de <b>OXXOPay.</b></li><li>Dicta al cajero el n&uacute;mero de referencia de esta ficha para que la tecle&eacute; directamente en la pantalla de venta.</li><li>Realiza el pago correspondiente con dinero en efectivo.</li><li>Al confirmar tu pago, el cajero te entregar&aacute; un comprobante impreso. <b>En &eacute;l podr&aacute;s verificar que se haya realizado correctamente. </b> Conserva este comprobante de pago.</li></ol></div>');

        }
        if (paymentSystemName.indexOf('SPEI') != -1) {
          $('.cf.br2.pa4.cconf-alert.ba.b--light-silver.bg-washed-green').prepend('<div style="text-align: center; margin-bottom: 16px"><img src="https://conektamx.vtexcommercestable.com.br//arquivos/spei-brand.png" /></div>');
          $('.cf.br2.pa4.cconf-alert.ba.b--light-silver.bg-washed-green div div').append('<div style="margin-top: 16px;text-align: center"><h4>CLABE</h4><div style="display:inline-block; padding: 8px 48px; border: 1px solid #AAA"><h4>' + nsu + '</h4></div></div><div style="margin-top: 16px"><h5>INSTRUCCIONES</h5><ol><li>Accede a tu banca en línea.</li><li>Da de alta la CLABE en esta ficha. <strong>El banco deberá de ser STP</strong>.</li><li>Realiza la transferencia correspondiente por la cantidad exacta en esta ficha, <strong>de lo contrario se rechazará el cargo</strong>.</li><li>Al confirmar tu pago, el portal de tu banco generará un comprobante digital.</li></ol></div>');
        }
      }
    });
</script>
1440

Vista de la configuración + el código HTML

  1. Recuerda que deberás configurar el momento en que se dispara la etiqueta:
912

Vista de la configuración del disparador del evento.

1440

Vista general de la configuración del evento


Ejemplo de configuración de Thank you page en efectivo y SPEI.

Podrás ver un ejemplo de como se muestran las páginas de agradecimiento una vez que están configuradas.

Efectivo con ConektaTransferencias con Conekta