Script de seguimiento t.js

t.js es un script pequeño, de unos 2,4 KB, para tu página de ventas. Guarda el origen de la visita (UTMs, IDs de clic y código de vendedor) y agrega esos datos a los enlaces que llevan al checkout de Vipter, en el momento del clic. Sin él, los parámetros quedan en la dirección de la página de ventas y se pierden cuando el visitante hace clic para comprar.

La versión para el dueño de la tienda, con el paso a paso en el panel y el informe de origen de las ventas, está en Script de UTM y origen de las ventas.

El códigoCopiar enlace de la sección

Copia el código en General›Conversiones›Ajustes, en la tarjeta Script de UTMs para tu página de ventas. Sin dominio propio, es:

<script src="https://pay.vipter.com/t.js" async></script>

Con un dominio propio activo, el código copiado ya viene con data-hosts="<tu dominio>".

El archivo se sirve con Content-Type: application/javascript, Cache-Control: public, max-age=3600 y Access-Control-Allow-Origin: *. Una versión nueva llega a los visitantes en hasta una hora.

Qué hace el scriptCopiar enlace de la sección

1. Al cargarCopiar enlace de la sección

1. Encuentra su propia etiqueta <script>: document.currentScript o, si no existe, el primer <script> cuyo src contiene /t.js.
2. Arma la lista de hosts del checkout: pay.vipter.com más los valores de data-hosts, separados por comas, sin espacios en los extremos y en minúsculas.
3. Lee la dirección de la página actual y busca estos parámetros:

4. Si encontró alguno, lo graba en el localStorage de tu dominio, en la clave vpt_attr, con el formato {"at": <milisegundos>, "v": {<parámetro>: <valor>}}. Cada valor se corta en 500 caracteres.

Las reglas de grabación:

• Campaña, primer toque en bloque. Si lo que está guardado ya tiene algún parámetro de campaña, los parámetros de campaña de la visita nueva se ignoran, todos juntos. Si no tiene, entran los de la visita nueva.
• IDs de clic y vendedor, último valor. Cada uno que viene en la visita nueva reemplaza al guardado.
• Validez de 30 días desde la primera grabación. at es el momento de la primera grabación y no cambia en las visitas siguientes. Después de 30 días, lo guardado se descarta y la próxima visita con parámetros empieza de cero.
• Una visita sin ninguno de estos parámetros no graba nada.

2. Al hacer clic en un enlaceCopiar enlace de la sección

El script escucha mousedown, touchstart y la tecla Enter en toda la página, en la fase de captura. Cuando el destino es un <a href>, o está dentro de uno, y el host del enlace está en la lista, reescribe el href antes de la navegación:

1. Agrega cada parámetro guardado en vpt_attr que el enlace todavía no tiene.
2. Lee las cookies de tu página y las agrega, si el enlace todavía no las tiene:

Un parámetro que el enlace ya tiene nunca se cambia. El checkout lee estos parámetros como se describe en Parámetros de URL del checkout.

Como el cambio ocurre en el clic, funciona también para enlaces creados después de la carga, en páginas armadas con JavaScript, y para "abrir en una pestaña nueva". Las cookies HttpOnly no son visibles para el script.

3. La función window.vipterDecorateCopiar enlace de la sección

Para las navegaciones que no pasan por un <a>, como window.location o el enrutador de un framework, el script expone:

const url = window.vipterDecorate('https://pay.vipter.com/curso-fotografia?pack=3');
window.location.href = url;

Aplica las mismas reglas del clic y devuelve la dirección completa, como texto. Una dirección cuyo host no está en la lista vuelve sin parámetros agregados. La función solo existe después de que el script cargó: con async, comprueba typeof window.vipterDecorate === 'function' antes de llamarla.

Los formularios (<form action>) no se modifican. Si el botón de compra es un formulario, cámbialo por un enlace o usa vipterDecorate.

Lo que el script no haceCopiar enlace de la sección

• No hace ninguna solicitud de red, no crea cookies y no toca el diseño de la página. Solo lee la dirección y las cookies, graba en vpt_attr y cambia el href de los enlaces del checkout.
• No lleva el correo, el nombre ni otros datos del visitante.
• No muestra errores: cualquier fallo, como un localStorage bloqueado, se descarta en silencio. Sin localStorage, los enlaces igual reciben los valores de las cookies.

El atributo data-hostsCopiar enlace de la sección

data-hosts agrega hosts a la lista. pay.vipter.com siempre está en ella.

<script src="https://pay.vipter.com/t.js" data-hosts="checkout.sualoja.com.br,pagamento.sualoja.com.br" async></script>

• La comparación es por el host exacto, sin puerto. No hay comodines ni subdominios automáticos: sualoja.com.br no cubre checkout.sualoja.com.br.
• Lista solo los hosts del checkout. Un host de más hace que el script agregue parámetros a enlaces que no son de Vipter.
• Si activas un dominio propio después de instalar el script, copia el código de nuevo o agrega el dominio en data-hosts.

InstalarCopiar enlace de la sección

Directo en el HTMLCopiar enlace de la sección

Pega la etiqueta en todas las páginas desde donde el visitante puede ir al checkout, antes de </body>. Mantén async: el script no bloquea el renderizado. En los constructores de páginas, usa el campo de scripts del pie de página.

Con un gestor de etiquetasCopiar enlace de la sección

En Google Tag Manager, crea una etiqueta del tipo HTML personalizado con el mismo código, incluido el data-hosts, y actívala en todas las páginas de ventas. El script lee la configuración de su propia etiqueta <script>. Después de publicar, comprueba con la prueba de abajo que los enlaces a tu dominio propio reciben los parámetros: si no los reciben, el gestor no mantuvo el atributo data-hosts.

Con un gestor de etiquetas, el script solo se ejecuta después de que carga el contenedor. Un clic antes de eso va al checkout sin los parámetros guardados. Si el contenedor espera el consentimiento de cookies del visitante, el script también espera.

Poner tu contenedor de GTM dentro del checkout es otra configuración, sin relación con t.js: consulta Conectar Google Tag Manager.

ComprobarCopiar enlace de la sección

1. Abre la página de ventas con ?utm_source=teste&utm_campaign=script&v=ana.
2. En la consola del navegador, ejecuta localStorage.getItem('vpt_attr'). Aparece un JSON con los tres valores.
3. Ejecuta vipterDecorate('https://pay.vipter.com/x'). El resultado tiene los tres parámetros, más fbp, fbc, ttp o ga_client_id si la página tiene esas cookies.
4. Haz clic en el botón de compra. La dirección del checkout se abre con los parámetros.

Para repetir la prueba desde cero, borra la clave: localStorage.removeItem('vpt_attr'). Si no lo haces, la campaña de la primera prueba sigue valiendo durante 30 días.

CSPCopiar enlace de la sección

El script solo necesita cargarse. Con una Content Security Policy en la página de ventas:

• Permite el host en script-src: script-src 'self' https://pay.vipter.com.
• No hace falta permitir nada en connect-src, img-src ni frame-src: el script no hace solicitudes.
• Si tu CSP usa nonce con 'strict-dynamic', pon el nonce en la etiqueta de t.js, como en tus otros scripts.
• El script no usa eval ni estilos inline.

PrivacidadCopiar enlace de la sección

El script guarda los datos de campaña en el localStorage de tu dominio y lee las cookies de anuncios que ya existen en la página. Si tu política exige consentimiento para este tipo de almacenamiento, carga t.js solo después del consentimiento, con tu gestor de etiquetas o tu herramienta de consentimiento. El consentimiento dentro del checkout se configura aparte, en consentimiento de cookies.

Qué hacer despuésCopiar enlace de la sección

• Consulta lo que hace cada parámetro en el checkout en Parámetros de URL del checkout.
• Sigue el resultado en origen de las ventas.