Vtex Custom - fingerprint

Configuración del device fingerprint utilizando Google tag manager

El device fingerprint es un dato importante en el flujo transaccional, por lo que es necesario configurarlo si estás utilizando Vtex.

Para configurar el device fingerprint en Vtex se requiere:

Paso 1: Crear cuenta en Google tag manager

Paso 2: Dar clic en el botón "Crear cuenta"

Paso 3: Configurar la cuenta

  • Agrega el nombre de la cuenta
  • Selecciona el país.
  • Escribe el nombre del contenedor
  • Selecciona la plataforma objetivo "Sitio web"

Paso 4: Acepta el acuerdo de servicios de Google tag manager

Se mostrará una pantalla como la siguiente, simplemente da clic en Aceptar.

Paso 5: Clic en Etiquetas y en el botón Nueva.

Paso 6: Elige el tipo de etiqueta "HTML personalizado"

Paso 7: Coloca el siguiente código en el área de "HTML" y activa Compatible con "document.write".

<script>
  window.vtex.deviceFingerprint = '';

  var netpay_total = 0;
  var _this = this;
  vtexjs.checkout.getOrderForm().done(function(orderForm) {
    for (var key in orderForm.totalizers) {
      var item = orderForm.totalizers[key];
      netpay_total=netpay_total+item.value/100;
    }
    _this.loadJS("https://cdn.netpay.mx/js/latest/netpay3ds-noConflict.js", false);
  });

  var deviceFingerprint = getuuid();
  window.vtex.deviceFingerprint = deviceFingerprint;
  initDFP(deviceFingerprint);
  var localSessionId = null;

  function doProfile(orgId, sessionId, hostname){
    var head = document.getElementsByTagName("head").item(0);
    var url = "https://" + hostname + "/tags.js?org_id=" + orgId + "&session_id=" + sessionId + "&page_id=1&allow_reprofile=1";
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", url);
    head.appendChild(script); console.log('Profile should have started...');
    body = document.getElementsByTagName("body").item(0);
    noscript = document.createElement("noscript");
    iframe = document.createElement("iframe");
    iframe.setAttribute("style", "width: 100px; height: 100px; border: 0; position:absolute; top: -5000px;");
    iframe.setAttribute("src", url);
    noscript.appendChild(iframe);
    body.insertBefore(noscript, body.childNodes[0]);
  }

  function initDFP(sessionId) {
    localSessionId = sessionId;
    console.log('Init profiling ', Math.floor(Date.now() / 1000))
    var timeout = 3000;
    var sasOrgId = "9ozphlqx";
    var csOrgId = "9ozphlqx";
    var merchantId = "netpaymx_retail";
    var hostname = "h.online-metrix.net/fp";
    doProfile(sasOrgId, sessionId, hostname);
    setTimeout(startOnTimer(sessionId) , timeout);
  }

  function startOnTimer(sessionId) {
    var csOrgId = "9ozphlqx";
    var merchantId = "netpaymx_retail";
    var hostname = "h.online-metrix.net/fp";
    doProfile(csOrgId, merchantId + sessionId, hostname);
  }

  function getuuid() {
    var dt=new Date().getTime();
    var uuid='xxxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g,function(c){
      var r = (dt + Math.random()*16)%16 | 0;
      dt = Math.floor(dt/16);
      return (c=='x' ? r : (r&0x3|0x8)).toString(16);
    });
    return uuid;
  }

  function tmx_profiling_complete(sessionId) {
    console.log('Finished ', sessionId, '-', Math.floor(Date.now() / 1000));
  }

  function loadJS(FILE_URL, async) {
    console.log("Loading library.");
    var scriptEle = document.createElement("script");

    scriptEle.setAttribute("src", FILE_URL);
    scriptEle.setAttribute("type", "text/javascript");
    scriptEle.setAttribute("async", async);

    document.body.appendChild(scriptEle);

    scriptEle.addEventListener("load", function(){
      _this.callbackLoadJs();
    });

    scriptEle.addEventListener("error", function(ev) {
      console.log("Error on loading file", ev);
    });

  }

  function callbackLoadJs() {
    var _this = this;
    netpay3ds.setSandboxMode(false);
    netpay3ds.init(function () {
      netpay3ds.config(_this, netpay_total, _this.callbackReferenceId);
    });
  }

  function callbackReferenceId(_this, referenceId) {
    window.vtex.deviceFingerprint = window.vtex.deviceFingerprint + '_' + referenceId;
  }
</script>

Paso 8: En Activación selecciona "All pages".

Paso 9: Clic en el menú "Activadores" y clic en el botón "Nuevo".

Paso 10: Configura el activador

  • Selecciona el tipo de activador: Evento personalizado.
  • En el nombre del evento: .*
  • Verifica "Utilizar una expresión regular que coincida con".
  • Selecciona "Todos los eventos personalizados".
  • Clic en el botón "Guardar".

Paso 11: Clic en Enviar

Paso 12: Escribe el nombre de la versión y clic en el botón "Publicar".

Paso 13: Copia el ID de Google tag manager.

Paso 14: Ve a la página admin de tu cuenta de Vtex y da clic en el menú "Checkout" que se encuentra en "Store Settings".

Da clic en el engrade del checkout "NetPay".

Paso 15: Selecciona la opción del meú "Checkout".

Paso 16: Pega el ID de Google Tag manager.

Con esto queda configurado el device fingerprint para el plugin de NetPay Custom.

*El código tiene configurado el org_id de producción, si se desea hacer pruebas en sandbox, es necesario cambiar el valor del org_id según corresponda.

Live: 9ozphlqx
Sandbox: 45ssiuz3

Live:

netpay3ds.setSandboxMode(false);

Sandbox:

netpay3ds.setSandboxMode(true);