Consentl

Consentl no BigCommerce

Instale o Consentl no BigCommerce com o Script Manager ou no tema Stencil para um bloqueio prévio estrito, sem tocar na finalização da compra; também para Catalyst.

Loader em primeiro lugar no <head>
Depende do método

Há duas formas de instalação, consoante o rigor necessário do bloqueio prévio.

Método Em primeiro lugar no <head>? Esforço
A. Script Manager Não: é apresentado dentro de {{{head.scripts}}}, depois do CSS, dos tipos de letra e dos scripts do head do tema Sem código
B. Ficheiro do tema (base.html) Sim Edição do tema; repetir após as atualizações do tema

Antes de qualquer um dos métodos, decida o que fazer com o consentimento de cookies próprio do BigCommerce: Settings → Security & Privacy → Your customers' privacy → Cookie consent tracking.

  • Recomendado: desative-o. O Consentl mostra o banner e retém ele próprio os scripts não essenciais; manter ambos mostraria dois banners.
  • Se o mantiver ativado, o BigCommerce só apresenta os scripts do Script Manager das categorias Analytics, Functional ou Targeting; Advertising depois do seu próprio consentimento, e os dois banners teriam de ser mantidos sincronizados, o que este guia não aborda. O próprio Consentl tem então de ter a categoria Essential, caso contrário nunca carregaria.

A sua chave do site Consentl está na página Configuração do seu site no painel. Adicione o nome de anfitrião da loja no campo Domínios; www. e o domínio sem www contam como o mesmo site, pelo que não é preciso adicionar www. separadamente.

O que inclui o seu plano Consentl

  • Free: apenas banner, registo de consentimentos e bloqueio manual.
  • Pro: acrescenta o Google Consent Mode v2.
  • Business: acrescenta o bloqueio automático de rastreadores conhecidos e as regras de bloqueio que acrescentar no painel.

Nos planos Free e Pro, só são retidas as tags que marcar manualmente.

A. Script Manager (lojas Stencil)

  1. Painel de controlo → Storefront → Script Manager → Create a Script.
  2. Preencha:
    • Name of script: Consentl
    • Location on page: Header
    • Select pages where script will be added: Store pages (páginas da loja). Não All pages; consulte Finalização da compra e My Account.
    • Script category: Essential
    • Script type: URL
    • Load method: Default. Nunca Async nem Defer: o loader tem de ser executado de forma síncrona.
    • Script URL: https://api.consentl.com/v1/loader.js?k=SITE_KEY&l=en (acrescente &gcm=ext se a loja também utilizar o modelo Consentl para o GTM, para que só o modelo envie comandos do Consent Mode)
    • Integrity Hash: deixe vazio. O loader muda quando altera as definições no painel do Consentl, pelo que um hash fixo levaria o navegador a rejeitá-lo.
  3. Save. As alterações podem demorar cerca de 20 segundos a aparecer, devido à cache.
  4. Teste numa janela privada (consulte Verificar que funciona).

O Script Manager limita o conteúdo dos scripts a 64 KB. O loader é um script de URL numa linha.

Finalização da compra e My Account

  • O BigCommerce exige um hash SRI para cada script na página de finalização da compra: «All scripts on the checkout page need at least one SRI hash to meet PCI 4.0 - 6.4.3 requirements». A ajuda do BigCommerce estende esta exigência à página My Account quando os cartões guardados estão ativados.
  • O loader do Consentl não pode ter um hash estável, pelo que não pode ser colocado aí. É por isso que Store pages é a predefinição acima, e que o método B tem de manter o loader fora da finalização da compra.
  • Consequentemente, a finalização da compra (e a página My Account, com os cartões guardados ativados) não mostra nenhum banner e nenhum runtime do Consentl é aí executado.
  • A escolha que o visitante fez na loja é mantida no cookie próprio consentl e é novamente aplicada na página seguinte da loja. O Consentl não retém nada na própria finalização da compra: mantenha os scripts não essenciais fora da finalização da compra (selecione também Store pages para eles) e verifique o que as integrações de Settings → Data Solutions carregam aí.
  • Os scripts só são apresentados na finalização da compra e na confirmação da encomenda com o Optimized One-Page Checkout.

B. Ficheiro do tema (realmente em primeiro lugar)

  1. Storefront → Themes: no seu tema atual, escolha Advanced → Make a copy. O BigCommerce só permite editar os ficheiros do tema numa cópia. Depois, abra Advanced → Edit Theme Files da cópia ou utilize a Stencil CLI.

  2. Abra templates/layout/base.html e cole o loader imediatamente a seguir a <head>, antes de {{{head.scripts}}} e do CSS do tema:

    <head>
    <script src="https://api.consentl.com/v1/loader.js?k=SITE_KEY&l={{language_selector.active_language_code}}"></script>
    <title>{{ head.title }}</title>
    • {{language_selector.active_language_code}} é o helper de idioma documentado. O Cornerstone também tem {{locale_name}}, que funciona aí, mas não consta da referência de objetos. Utilize um idioma fixo, como en, se nenhum devolver o formato de que precisa.
    • Se Enable Nonce-Based Script Security estiver ativado (Settings → Security & Privacy), acrescente nonce="{{nonce}}" à tag. Os scripts que o Consentl liberta após o consentimento precisam então também do nonce (atribua-o a cada tag que marcar manualmente) ou de uma política com 'strict-dynamic'; caso contrário, o navegador bloqueia-os.

  3. Guarde e aplique a cópia. Não acrescente também o Consentl através do Script Manager.

  4. As atualizações do tema substituem o base.html: acrescente novamente a linha após cada atualização.

Não acrescente o loader aos modelos da finalização da compra (consulte Finalização da compra e My Account). Depois de aplicar o tema, abra a página de finalização da compra e verifique com View Source que o loader não está lá.

Tags inseridas diretamente

Um <script src>, um píxel <img> ou um <iframe> escrito nos ficheiros do tema ou num script do Script Manager é obtido pelo navegador antes de qualquer script o poder travar, mesmo quando o Consentl impede a sua execução. Marque essas tags manualmente e remova os píxeis em <noscript>:

<script type="text/plain" data-consentl="marketing" src="https://ads.example.com/tag.js"></script>
<iframe data-consentl="marketing" data-src="https://www.youtube-nocookie.com/embed/ID" title="Video"></iframe>
<img data-consentl="marketing" data-src="https://tracker.example.com/pixel.gif" alt="" width="1" height="1">

As tags carregadas por código (GTM, o loader JavaScript de um píxel) são retidas sem qualquer pedido quando o bloqueio automático está ativado (plano Business e superiores).

  • As ligações cujo URL termina em #consentl ou #consentl-preferences, e qualquer elemento com o atributo data-consentl-open, abrem as preferências. Acrescente uma ao rodapé («Definições de cookies»).
  • Os elementos incorporados da declaração de cookies, dos pedidos relativos a dados pessoais e da livre resolução da UE funcionam conforme descrito no guia para qualquer site. O formulário de livre resolução exige o plano Pro ou superior e tem de ser ativado no painel; caso contrário, fica vazio.

Content Security Policy

Se tiver acrescentado restrições script-src (Settings → Security & Privacy → Content Security Policy), permita https://api.consentl.com em script-src e connect-src.

Catalyst (loja headless em Next.js)

O Catalyst injeta os scripts do Script Manager do lado do cliente e de forma diferida, pelo que nunca ficam em primeiro lugar. Siga o guia do Next.js para o App Router, incluindo as indicações sobre «em primeiro lugar no <head>»:

  • core/app/[locale]/layout.tsx não tem um <head> explícito. Acrescente um e coloque nele o Consentl, como mostra o guia do Next.js: um <script> simples como primeiro filho.
  • app/not-found.tsx apresenta o seu próprio <html>; acrescente também aí o Consentl.
  • O React 19 move os scripts async para cima de um script síncrono simples, e next/script com afterInteractive faz o navegador transferir a tag antes do consentimento. Acrescente todas as outras tags que tenham de aguardar o consentimento com o componente ConsentlScript do guia (type="text/plain" com a respetiva categoria do Consentl), ou faça a sua gestão no Google Tag Manager.

Desative o Cookie consent tracking do BigCommerce. O Catalyst 1.3 e posteriores incluem o seu próprio banner de consentimento (c15t): remova-o ou desative-o para evitar dois banners.

Verificar que funciona

Abra a loja numa janela privada e veja o código-fonte: com o método B, o loader é o primeiro elemento no <head>. O banner aparece. O servidor de desenvolvimento da Stencil CLI não apresenta os scripts do Script Manager, mas apresenta o código do tema.

A região do visitante é determinada a partir do seu endereço IP: o Consentl consulta o país em memória em cada visualização de página (nada é guardado) e aplica a regra do painel para esse país. Os estados dos EUA não são distinguidos: os visitantes dos EUA recebem a sua regra para todos os EUA ou, se não existir, a sua primeira regra para um estado dos EUA. Um país desconhecido recebe a sua regra para regiões desconhecidas (opt-in por predefinição).

Limitações

  • O Script Manager não fica em primeiro lugar. Os scripts do head do próprio tema e os scripts do Script Manager que o BigCommerce escreve antes do Consentl são executados primeiro; a ordem dentro de {{{head.scripts}}} não está documentada. Utilize o método B para um bloqueio prévio estrito. O Consentl retém os rastreadores reconhecidos que carregam depois dele (plano Business e superiores); nos planos Free e Pro, só são retidas as tags que marcar manualmente.
  • Sem banner na finalização da compra (nem na página My Account com cartões guardados); consulte Finalização da compra e My Account.
  • As estatísticas nativas do BigCommerce não são controladas pelo Consentl (por exemplo, as integrações nativas do GA4 ou da Meta em Settings → Data Solutions). Configure-as para seguirem o Consent Mode, ou substitua-as por tags carregadas através do GTM.

Com dificuldades? Escreva para support@consentl.com — respondemos em inglês nos dias úteis.