Proteside Instalação por plataforma
Onde colar o snippet em HTML, Next.js, Nuxt, WordPress e outras plataformas de e-commerce.
O dashboard gera o snippet pronto para quatro plataformas: HTML, Next.js, Nuxt e WordPress. Em todas,
a regra é a mesma: o bootstrapper inline precisa ser o primeiro script do <head> e o shield.js vem logo depois.
Nos exemplos abaixo, o conteúdo do bootstrapper foi abreviado. Copie sempre o código completo em Configurações → Páginas e Domínios, que já vem com a sua chave, o seu canal e as suas regras.
Plataformas com snippet no dashboard
Cole o bloco uma vez, como primeiro item do <head>, em todas as páginas com checkout. Use esta aba também para
sites estáticos, aplicações React ou Vue sem framework de servidor (no index.html) e para qualquer plataforma que
permita editar o HTML do checkout.
<!doctype html>
<html lang="pt-BR">
<head>
<!-- Proteside Start -->
<!-- Place first in <head>, before GTM, Stripe.js, analytics, or any other scripts. -->
<script>/* bootstrapper: conteúdo completo copiado do 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 · Minha Loja</title>
<!-- GTM, analytics e demais scripts vêm depois -->
</head>
<body>
<!-- ... -->
</body>
</html>Outras plataformas
O Proteside não tem app nem plugin oficial para plataformas de e-commerce. A instalação é sempre o snippet da aba
HTML, colado no <head> das páginas de checkout. O que muda de uma plataforma para outra é se e onde ela
deixa você editar esse <head>.
Antes de instalar, confirme três pontos com a sua plataforma:
- Em qual domínio o checkout roda. Muitas plataformas hospedam o checkout em um domínio ou subdomínio próprio. O snippet precisa estar nas páginas desse domínio.
- Se é possível inserir código no
<head>do checkout, não só no restante da loja. - Se o código entra como primeiro item do
<head>, inline e sem ser adiado. Se a plataforma só permite adicionar scripts depois dos dela, o SDK funciona com cobertura parcial e gera o aviso de ordem de instalação.
| Plataforma | Orientação |
|---|---|
| Shopify | O checkout é controlado pela própria plataforma. Verifique com o suporte do Shopify se o seu plano permite inserir código no <head> das páginas de checkout. Pixels e scripts que rodam em ambiente isolado (sandbox) não enxergam a página de checkout e não servem para o Proteside. |
| VTEX | Use o recurso de personalização do checkout da plataforma, se ele permitir código no <head> das páginas de checkout. Confirme com o suporte da VTEX em que posição o código é inserido. |
| Nuvemshop | Use o recurso de scripts personalizados do checkout, se o seu plano oferecer. Confirme com o suporte da Nuvemshop se o código entra no <head> do checkout. |
| Yampi | Use o recurso de scripts personalizados do checkout, se disponível. Confirme com o suporte da Yampi se o código entra no <head> do checkout. |
| WooCommerce | O checkout roda no seu próprio WordPress. Use a aba WordPress acima. |
| Tray | Use o recurso de scripts personalizados do checkout, se disponível. Confirme com o suporte da Tray se o código entra no <head> do checkout. |
| Wix | Use o recurso de código personalizado do site, se ele puder ser aplicado às páginas de checkout. Confirme com o suporte do Wix se o checkout aceita código no <head>. |
| Checkout próprio ou headless | Use a aba HTML (ou Next.js / Nuxt) no template das páginas de pagamento. |
Se a plataforma não permite código no <head> do checkout, o Proteside não consegue proteger aquela página. Nesse
caso, instale o snippet nas páginas que você controla e confirme com a plataforma como ela atende os requisitos
6.4.3 e 11.6.1 do PCI DSS 4.0 nas páginas dela.
Google Tag Manager
Não instale o Proteside por meio do Google Tag Manager. O GTM carrega as tags de forma assíncrona, depois do próprio container, então:
- o bootstrapper deixa de ser o primeiro script e deixa de ser síncrono, que é justamente o que a arquitetura exige;
- os scripts que o GTM carrega antes da tag do Proteside escapam da observação;
- o bloqueio de containers e tags não autorizados deixa de funcionar, porque quem carrega o Proteside seria o próprio GTM.
Se você usa GTM, cole o snippet do Proteside antes do snippet do GTM no <head>. Assim, as tags que o GTM insere
por JavaScript passam pelo bootstrapper e podem ser bloqueadas pelas suas regras e pela lista de
Containers GTM permitidos.