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.
- Crearemos un TAG para un producto de HTML Personalizado dando clic en el menú izquierdo ETIQUETAS como se en la siguiente imagen:
-
En el campo de Configuración de la etiqueta agregaremos el tipo de etiqueta,
-
En el campo *Personalizado > HTML de la configuración debemos pegar el código HTML que realiza el llamado al código que realiza,
-
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ás cercana.</li><li>Indica en caja que quieres realizar un pago de <b>OXXOPay.</b></li><li>Dicta al cajero el número de referencia de esta ficha para que la tecleé 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á un comprobante impreso. <b>En él podrá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>
- Recuerda que deberás configurar el momento en que se dispara la etiqueta:
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 Conekta | Transferencias con Conekta |
Updated over 2 years ago