Proteside Instalación por plataforma
Dónde pegar el snippet en HTML, Next.js, Nuxt, WordPress y otras plataformas de e-commerce.
El dashboard genera el snippet listo para cuatro plataformas: HTML, Next.js, Nuxt y WordPress. En todas,
la regla es la misma: el bootstrapper inline debe ser el primer script del <head> y el shield.js va justo después.
En los ejemplos de abajo, el contenido del bootstrapper está abreviado. Copia siempre el código completo en Ajustes → Páginas y Dominios, que ya incluye tu clave, tu canal y tus reglas.
Plataformas con snippet en el dashboard
Pega el bloque una vez, como primer elemento del <head>, en todas las páginas con checkout. Usa esta pestaña también
para sitios estáticos, aplicaciones React o Vue sin framework de servidor (en el index.html) y para cualquier
plataforma que permita editar el HTML del checkout.
<!doctype html>
<html lang="es">
<head>
<!-- Proteside Start -->
<!-- Place first in <head>, before GTM, Stripe.js, analytics, or any other scripts. -->
<script>/* bootstrapper: contenido completo copiado del dashboard */</script>
<script async src="https://cdn.proteside.com/v1/shield.js"
data-key="pk_live_3f9c1a7b2e4d6f8a0c1e3b5d7f9a1c3e"
data-api="https://app.proteside.com/api/sdk"></script>
<!-- Proteside End -->
<meta charset="utf-8" />
<title>Checkout · Mi Tienda</title>
<!-- GTM, analytics y los demás scripts van después -->
</head>
<body>
<!-- ... -->
</body>
</html>Otras plataformas
Proteside no tiene app ni plugin oficial para plataformas de e-commerce. La instalación es siempre el snippet de la
pestaña HTML, pegado en el <head> de las páginas de checkout. Lo que cambia de una plataforma a otra es si te
deja editar ese <head> y dónde.
Antes de instalar, confirma tres puntos con tu plataforma:
- En qué dominio se ejecuta el checkout. Muchas plataformas alojan el checkout en un dominio o subdominio propio. El snippet debe estar en las páginas de ese dominio.
- Si es posible insertar código en el
<head>del checkout, no solo en el resto de la tienda. - Si el código entra como primer elemento del
<head>, inline y sin diferirse. Si la plataforma solo permite agregar scripts después de los suyos, el SDK funciona con cobertura parcial y genera el aviso de orden de instalación.
| Plataforma | Orientación |
|---|---|
| Shopify | El checkout lo controla la propia plataforma. Consulta con el soporte de Shopify si tu plan permite insertar código en el <head> de las páginas de checkout. Los pixels y scripts que se ejecutan en un entorno aislado (sandbox) no ven la página de checkout y no sirven para Proteside. |
| VTEX | Usa la función de personalización del checkout de la plataforma, si permite código en el <head> de las páginas de checkout. Confirma con el soporte de VTEX en qué posición se inserta el código. |
| Nuvemshop | Usa la función de scripts personalizados del checkout, si tu plan la ofrece. Confirma con el soporte de Nuvemshop si el código entra en el <head> del checkout. |
| Yampi | Usa la función de scripts personalizados del checkout, si está disponible. Confirma con el soporte de Yampi si el código entra en el <head> del checkout. |
| WooCommerce | El checkout se ejecuta en tu propio WordPress. Usa la pestaña WordPress de arriba. |
| Tray | Usa la función de scripts personalizados del checkout, si está disponible. Confirma con el soporte de Tray si el código entra en el <head> del checkout. |
| Wix | Usa la función de código personalizado del sitio, si se puede aplicar a las páginas de checkout. Confirma con el soporte de Wix si el checkout acepta código en el <head>. |
| Checkout propio o headless | Usa la pestaña HTML (o Next.js / Nuxt) en la plantilla de las páginas de pago. |
Si la plataforma no permite código en el <head> del checkout, Proteside no puede proteger esa página. En ese caso,
instala el snippet en las páginas que controlas y confirma con la plataforma cómo cumple los requisitos 6.4.3 y 11.6.1
de PCI DSS 4.0 en sus páginas.
Google Tag Manager
No instales Proteside a través de Google Tag Manager. GTM carga las etiquetas de forma asíncrona, después del propio contenedor, por lo que:
- el bootstrapper deja de ser el primer script y deja de ser síncrono, que es justamente lo que exige la arquitectura;
- los scripts que GTM carga antes de la etiqueta de Proteside escapan de la observación;
- el bloqueo de contenedores y etiquetas no autorizados deja de funcionar, porque quien cargaría Proteside sería el propio GTM.
Si usas GTM, pega el snippet de Proteside antes del snippet de GTM en el <head>. Así, las etiquetas que GTM
inserta por JavaScript pasan por el bootstrapper y pueden bloquearse con tus reglas y con la lista de
Contenedores GTM permitidos.