PT
Começar grátis

Documentação

Tudo o que precisa de saber para implementar o Consentio rapidamente

Website Personalizado

Implementação avançada do Consentio para programadores

Implementação Básica

Para a implementação básica, basta inserir uma única linha de código:

HTML 
<script src="https://consentio.cz/widget/YOUR_SCRIPT_KEY/consentio.min.js" async></script>

O widget inicializa-se automaticamente e apresenta a barra de cookies no primeiro carregamento da página. Pode encontrar a sua SCRIPT_KEY exclusiva no painel de controlo em Definições → Instalação.

Dica: A identificação do website faz parte do URL (SCRIPT_KEY), pelo que não são necessários atributos de dados adicionais. O idioma é detetado automaticamente a partir do atributo lang no elemento <html> ou a partir do cabeçalho Accept-Language do navegador.

API JavaScript

Assim que o widget for carregado, o objeto global window.Consentio fica disponível para controlo programático.

Métodos Disponíveis

Método Descrição
show() Apresenta a barra de cookies
hide() Oculta a barra de cookies
showPreferences() Apresenta as definições de preferências
getConsent() Devolve o estado atual do consentimento
updateConsent(updates) Atualiza o estado do consentimento
onConsentChange(callback) Regista um listener para alterações de consentimento
getBlockedScripts() Devolve o número de scripts bloqueados
getBlockedIframes() Devolve o número de iframes bloqueados

Apresentar a Barra

JavaScript 
// Apresentar a barra de cookies
Consentio.show()

// Ocultar a barra de cookies
Consentio.hide()

// Apresentar as definições de preferências
Consentio.showPreferences()

Obter o Estado do Consentimento

JavaScript 
// Obter o estado atual do consentimento
const consent = Consentio.getConsent()
// { necessary: true, analytics: false, marketing: false, functionality: false }

// Verificar uma categoria específica
if (consent.analytics) {
  // Executar scripts de análise
  loadGoogleAnalytics()
}

if (consent.marketing) {
  // Executar scripts de marketing
  loadFacebookPixel()
}

Atualizar o Consentimento

JavaScript 
// Atualizar categorias específicas
Consentio.updateConsent({
  analytics: true,
  marketing: false
})

Event Listeners

Reaja a alterações de consentimento utilizando event listeners:

JavaScript 
// Opção 1: Utilizar onConsentChange
Consentio.onConsentChange((consent) => {
  console.log('Consentimento alterado:', consent)

  if (consent.analytics) {
    loadGoogleAnalytics()
  }

  if (consent.marketing) {
    loadFacebookPixel()
  }
})

// Opção 2: Utilizar um window event listener
window.addEventListener('consentio:consent', (event) => {
  const consent = event.detail
  console.log('Consentimento alterado:', consent)
})

Google Consent Mode v2

O Consentio suporta automaticamente o Google Consent Mode v2. Para garantir o funcionamento correto, certifique-se de que o widget é carregado antes do Google Analytics e de outros scripts da Google.

HTML 
<!-- 1. Consentio primeiro -->
<script src="https://consentio.cz/widget/YOUR_SCRIPT_KEY/consentio.min.js"></script>

<!-- 2. Depois a tag da Google -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXX');
</script>

Mapeamento de Categorias para o Consent Mode

Categoria Consentio Google Consent Mode
necessary functionality_storage, security_storage
analytics analytics_storage
marketing ad_storage, ad_user_data, ad_personalization
functionality personalization_storage

Bloqueio de Scripts

Para bloquear scripts antes de o consentimento ser concedido, utilize o atributo type="text/plain" juntamente com o atributo de dados data-category:

HTML 
<!-- O script só é executado após o consentimento de análise ser concedido -->
<script type="text/plain" data-category="analytics">
  // Código do Google Analytics
  gtag('config', 'G-XXXXXXX');
</script>

<!-- O script só é executado após o consentimento de marketing ser concedido -->
<script type="text/plain" data-category="marketing">
  // Código do Facebook Pixel
  fbq('init', 'XXXXXXX');
</script>

<!-- O script só é executado após o consentimento de funcionalidade ser concedido -->
<script type="text/plain" data-category="functionality">
  // Código de personalização
  initPersonalization();
</script>

Categorias Disponíveis

Categoria Descrição
necessary Cookies necessários (sempre permitidos)
analytics Cookies de análise
marketing Cookies de marketing
functionality Cookies funcionais para personalização

Botão para Abrir as Preferências

Coloque um botão no seu website para reabrir as preferências de cookies (exigido pelo RGPD):

HTML 
<!-- No rodapé do website -->
<a href="#" onclick="Consentio.showPreferences(); return false;">
  Definições de Cookies
</a>

<!-- Ou como botão -->
<button onclick="Consentio.showPreferences()">
  Gerir Preferências de Cookies
</button>
Dica: O RGPD exige que os utilizadores possam alterar as suas preferências a qualquer momento. Coloque uma ligação no rodapé do website ou na sua política de privacidade.

Single Page Applications (SPA)

Para React, Vue, Angular e outras frameworks SPA, o widget funciona automaticamente. O widget deteta alterações de URL e atualiza-se conforme necessário.

JavaScript 
// Exemplo: verificar o estado do consentimento na mudança de rota (Vue Router)
router.afterEach(() => {
  if (window.Consentio) {
    const consent = Consentio.getConsent()
    if (consent.analytics) {
      // Os scripts de análise são permitidos
    }
  }
})
ShoptetGoogle Tag Manager