Encontre tudo o que precisa para começar a utilizar o FitConsent, desde a instalação até à utilização avançada.

Introdução

Bem-vindo à documentação do FitConsent.

O que é uma Plataforma de Gestão de Consentimento (CMP)?

Um CMP é uma ferramenta que ajuda os websites a recolher e gerir legalmente o consentimento do utilizador para o tratamento de dados, um requisito das leis de privacidade como o RGPD na Europa e o CCPA na Califórnia. É a tecnologia que alimenta os “banners de cookies” que vê em muitos sites.

O FitConsent vai além de um banner básico. Fornece as ferramentas não só para cumprir a lei, mas também para otimizar a experiência do utilizador, criando confiança e melhorando as taxas de consentimento. O nosso serviço inclui suporte completo e automático para o Modo de Consentimento do Google V2 e o Modo de Consentimento do UET da Microsoft, garantindo que as suas etiquetas de análise e marketing ajustam o seu comportamento com base no consentimento do utilizador, o que é crucial para o marketing orientado por dados num mundo que prioriza a privacidade.

Instalação e configuração

A integração com o FitConsent foi concebida para ser rápida e direta. Só precisa de adicionar um único trecho de script à secção do seu website. Este script trata de tudo, desde a exibição do banner até à gestão dos padrões do Modo de Consentimento da Google e da Microsoft.

Pré-requisito importante: Modo de consentimento

O nosso script define automaticamente os padrões necessários para o Modo de Consentimento do Google v2 e o Modo de Consentimento do Microsoft UET. Isto é crucial para que serviços como o Google Analytics e o Microsoft Advertising operem em conformidade com o consentimento do utilizador. Certifique-se de que este script está posicionado o mais alto possível na etiqueta do seu website, antes de quaisquer outros scripts que possam utilizar cookies.

Incorporação direta

Para instalação direta, copie o excerto de código abaixo e cole-o na secção do HTML do seu website. É crucial colocá-lo o mais alto possível, antes de quaisquer outros scripts que possam definir cookies (como o Google Analytics ou o Microsoft UET).

<!-- Script de banner FitConsent -->
<script>
  // Defina dataLayer e o auxiliar gtag.
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}

  // Inicializar a fila Microsoft UET
  window.uetq = window.uetq || [];

 // Defina os estados de consentimento padrão para a Google e a Microsoft.
 // Este DEVE ser executado antes de qualquer outro script que utilize cookies.
  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied'
  });
  
  window.uetq.push('consent', 'default', {
    'ad_storage': 'denied'
  });
</script>

<!-- Adicione aqui os seus outros scripts (por exemplo, Google Analytics, Microsoft UET) -->
<!-- ... -->

<!-- Adicione o FitConsent Banner para atualizar o consentimento com base na interação do utilizador -->
<script async defer src="https://app.fitconsent.com/api/banner?websiteId=ID_DO_SITE"></script>
<!-- End FitConsent Banner Script -->

Gestor de tags do Google (recomendado)

Recomendamos a utilização do nosso Modelo de Comunidade oficial do Google Tag Manager (GTM) para instalar o FitConsent. Lida corretamente com o Modo de Consentimento do Google v2 e garante que as etiquetas são disparadas com base no consentimento do utilizador.

Passo 1: Ativar a Visão Geral de Consentimento (configuração única)

• 1. No seu espaço de trabalho GTM, clique no separador “Admin”.
• 2. Na coluna “Contentor”, clique em “Configurações do Contentor”.
• 3. Na seção “Definições adicionais”, marque a caixa “Ativar visão geral do consentimento”.
• 4. Clique em “Guardar” no canto superior direito.

Passo 2: adicione o modelo FitConsent

• 1. Vá para a seção “Modelos” na barra lateral esquerda.
• 2. Na caixa “Modelos de tag”, clique em “Pesquisar na galeria”.
• 3. Procure por “FitConsent” e clique em “Add to Workspace”.
• 4. Confirme as permissões para adicionar o modelo.

Passo 3: Crie uma etiqueta “Padrão de consentimento do Google”

• 1. Vá a “Tags” e clique em “Novo”.
• 2. Nomeie a etiqueta “FitConsent – Consentimento Padrão”.
• 3. Clique em “Configuração de tag” e escolha “FitConsent” na lista.
• 4. No menu suspenso “Tag Type”, selecione “Google Consent Default”. Isto definirá os padrões para a Google e a Microsoft.
• 5. No campo “FitConsent Website ID” cole o ID único do seu site do painel.
• 6. Para o gatilho, selecione a opção integrada “Inicialização de Consentimento – Todas as Páginas”. Isso é crucial.
• 7. Guarde a tag.

Passo 4: Crie a Tag “FitConsent Banner Loader”

• 1. Crie outra tag “Novo”. Nomeie-a como “FitConsent – Carregador de Banner”.
• 2. Clique em “Configuração de tag” e escolha novamente “FitConsent”.
• 3. O “Tag Type” deve ser definido como “FitConsent Banner Loader”.
• 4. No campo “FitConsent Website ID” cole o ID único do seu site do painel.
• 5. Para o gatilho, selecione também “Inicialização de consentimento – Todas as páginas”.
• 6. Guarde a tag.

Passo 5: configure a sua Tag do Google

O passo final é garantir que a sua tag principal do Google (que envia dados para o Google Analytics) é disparada corretamente com base no consentimento do utilizador.

A)Se já tiver uma Tag do Google (por exemplo, “G-XXXXXXXXXX”) no seu contentor:

• 1. Clique na sua tag do Google para a editar.
• 2. Aceda a “Definições avançadas” > “Definições de consentimento”.
• 3. Certifique-se de que a opção “Nenhum consentimento adicional necessário” está selecionada. O modelo FitConsent processa os sinais de consentimento por si.
• 4. Guarde as alterações da sua tag.

B) Se AINDA NÃO tem uma Tag Google:

• 1. Clique em “Tags” > “Novo”.
• 2. Nomeie a etiqueta “Google Tag – GA4” ou similar.
• 3. Para “Configuração de tag”, escolha “Google Tag”.
• 4. Introduza o seu ID de medição do GA4 no campo “ID da tag” (por exemplo, “G-XXXXXXXXXX”).
• 5. Para “Acionamento”, selecione “Inicialização – Todas as páginas”.
• 6. Aceda a “Definições avançadas” > “Definições de consentimento” e certifique-se de que “Não é necessário consentimento adicional” está selecionado.
• 7. Guarde a tag.

Passo 6: Manipular outros scripts (por exemplo, Microsoft Clarity, Facebook Pixel)

A integração do FitConsent com o Modo de Consentimento da Google permite gerir qualquer script de terceiros através do GTM. Veja como configuraria uma etiqueta como o Microsoft Clarity:

• 1. Adicionar a etiqueta: adicione a sua tag de terceiros ao GTM (através de um modelo da comunidade ou como uma tag HTML personalizada).
• 2. Configurar as definições de consentimento: edite a tag, aceda a “Definições avançadas” > “Definições de consentimento”.
• 3. Adicionar verificação de consentimento: selecione “Exigir consentimento adicional para que a tag seja acionada”. Uma tabela será apresentada.
• 4. Selecione o tipo de consentimento: clique em “Adicionar consentimento obrigatório” e selecione o tipo de consentimento adequado. Para uma ferramenta de análise como o Clarity, escolheria o analytics_storage. Para um script de marketing como um Pixel do Facebook ou uma etiqueta UET da Microsoft, pode adicionar ad_storage e analytics_storage.
• 5. Definir o gatilho: defina o gatilho da tag para disparar no seu evento de visualização de página predefinido (por exemplo, “Inicialização – Todas as páginas” ou um evento personalizado “Visualização de página”).

Agora, o GTM irá verificar automaticamente o estado de consentimento fornecido pelo FitConsent. A tag Microsoft Clarity só será acionada após o utilizador aceitar a categoria “Analytics” no seu banner de consentimento, e uma tag UET só será acionada se “Marketing” for aceite.

Por fim, clique em “Submeter” e “Publicar” o seu contentor GTM para aplicar as alterações.

Plugin WordPress FitConsent CMP

Integra o FitConsent com o WordPress e a API de consentimento do WP para compatibilidade perfeita com o Google Site Kit.

FitConsent é uma Plataforma de Gestão de Consentimento (CMP) poderosa e, ao mesmo tempo, simples, projetada para ajudar você a cumprir regulamentações de privacidade como o GDPR e o CCPA. Este plugin torna incrivelmente fácil adicionar o banner FitConsent ao seu site WordPress. Mais importante ainda, ele oferece compatibilidade automática e pronta para uso com a API de Consentimento do WP, que é o padrão utilizado pelo Google Site Kit.

Ao usar este plugin, você pode ativar o recurso de modo de consentimento do Google Site Kit e ter a certeza de que as escolhas de consentimento de seus usuários são respeitadas, permitindo análises e rastreamento de anúncios que são eficazes e estão em conformidade.

Principais Recursos

• Configuração Simples: Basta inserir seu ID de Website FitConsent e o plugin cuida do resto.
• Pronto para Google Site Kit: Funciona perfeitamente com o modo de consentimento do Google Site Kit ao se integrar com a API de Consentimento do WP.
• Leve: O plugin é otimizado e não adiciona peso desnecessário ao seu site.
• Comunicação Padronizada: Garante que os sinais de consentimento sejam passados corretamente entre seu banner de consentimento e outros plugins.

Guia de Instalação

Método 1: Instalação via Painel do WordPress

1. Faça login no seu painel do WordPress.
2. Navegue até Plugins > Adicionar novo.
3. Na barra de pesquisa, digite “FitConsent CMP” e pressione Enter.
4. Encontre o plugin “FitConsent CMP” nos resultados da pesquisa e clique em Instalar agora.
5. Após a instalação, clique em Ativar.

Método 2: Instalação Manual via FTP

1. Baixe o plugin FitConsent CMP da fonte oficial.
2. Descompacte o arquivo baixado para extrair a pasta fitconsent-cmp.
3. Conecte-se ao servidor do seu site usando um cliente FTP (por exemplo, FileZilla).
4. Navegue até o diretório /wp-content/plugins/.
5. Faça o upload de toda a pasta fitconsent-cmp para este diretório.
6. Volte ao seu painel do WordPress, navegue até Plugins > Plugins instalados e clique em Ativar para “FitConsent CMP”.

Configuração Pós-Instalação

1. No seu painel do WordPress, vá para Configurações > FitConsent.
2. Encontre seu ID de Website FitConsent no seu Painel FitConsent.
3. Digite este ID no campo fornecido e clique em Salvar Alterações.

Integração com Google Site Kit (se aplicável)

1. Se você estiver usando o plugin Google Site Kit, vá para suas configurações.
2. Certifique-se de que a opção Modo de Consentimento está ativada.

Outras plataformas (CMS)

Pode utilizar o FitConsent com qualquer site ou Sistema de Gestão de Conteúdos (CMS), como o WordPress ou o Shopify, que lhe permita adicionar código HTML ou JavaScript personalizado. Recomendamos vivamente o uso da integração com o Google Tag Manager, se disponível, e o uso das instruções do GTM acima. Caso contrário, pode utilizar o método de “Incorporação Direta”.

Configurando o seu banner

Personalize a aparência, o conteúdo e o comportamento do banner no seu painel.

Configurações gerais

Estrutura: Escolha a principal regulamentação de privacidade que precisa de cumprir (por exemplo, RGPD, CCPA, IAB TCF 2.2). Esta escolha ajusta o comportamento padrão do banner e as opções disponíveis para o alinhar com os requisitos dessa estrutura.

Segmentação geográfica (Premium): opte por mostrar o banner apenas a visitantes de regiões específicas, como a UE.

Layout: Selecione entre um banner flutuante (em várias posições no ecrã) ou uma caixa de diálogo centrada que sobrepõe o seu conteúdo.

Aspeto

Personalize cores, tipos de letra e elevação (sombras) para combinar perfeitamente com o aspeto da sua marca.

Logótipo e imagem de fundo: também pode adicionar o logótipo da sua empresa ou até uma imagem de fundo ao banner para uma experiência totalmente personalizada.

Conteúdo e idiomas

Edite todo o texto no banner e no modal de preferências. O FitConsent suporta vários idiomas, permitindo oferecer uma experiência nativa a todos os seus utilizadores. O Markdown básico é suportado nos principais campos de texto.

Otimização com tecnologia de IA

Utilize o nosso otimizador com tecnologia de IA para obter sugestões de cores, textos e layouts que comprovadamente aumentam as taxas de consentimento com base no conteúdo do seu website e no público-alvo.

Declaração de Armazenamento

O FitConsent pode apresentar uma lista detalhada e atualizada automaticamente dos cookies e outros itens de armazenamento que o seu website utiliza. Isto é geralmente incluído numa página de Política de Privacidade para fornecer total transparência aos seus utilizadores.

Incorporando a Declaração

Para exibir a declaração de cookies, precisa de adicionar um elemento simples <div> à sua página onde pretende que a tabela apareça e, em seguida, incluir o nosso script de declaração. Pode encontrar o trecho de código exato para o seu website no separador “Declaração de cookies” da página de configuração do seu website.

Sites HTML padrão

Para sites HTML padrão ou sites criados com CMSs como o WordPress (sem um frontend React headless), pode adicionar o seguinte snippet diretamente ao HTML da sua página.

O script irá encontrar automaticamente o <div> com o ID fitconsent-declaration e injectará a tabela de cookies no mesmo.

<div id="fitconsent-declaration"></div>
<script async defer src="https://fitconsent.com/api/declaration.js"></script>

Sites React e Next JS

Para evitar “erros de hidratação” em estruturas baseadas em React, como o Next.js, é crucial que o script de declaração não modifique a página antes de o React ter concluído a sua renderização inicial no cliente.

A forma recomendada de o fazer é criar um componente dedicado do lado do cliente que carregue o script utilizando um gancho useEffect.

1. Criar um componente cliente

Crie um novo ficheiro de componente, por exemplo, StorageDeclarationEmbed.tsx. Certifique-se de que inclui a diretiva “use client” no topo.

'use client';

import { useEffect } from 'react';

type StorageDeclarationEmbedProps = {
  websiteId: string;
};

export function StorageDeclarationEmbed({ websiteId }: StorageDeclarationEmbedProps) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = `https://app.fitconsent.com/api/declaration.js?websiteId=${websiteId}`;
    script.async = true;
    script.defer = true;

    const container = document.getElementById('fitconsent-declaration');
    if (container) {
      container.appendChild(script);
    }

    return () => {
      // Clean up the script when the component unmounts
      if (container && container.contains(script)) {
        container.removeChild(script);
      }
    };
  }, [websiteId]);

  return <div id="fitconsent-declaration"></div>;
}

2. Utilize o componente na sua página

Agora pode importar e utilizar este componente em qualquer página, como a sua página de política de privacidade.

import { StorageDeclarationEmbed } from '@/components/StorageDeclarationEmbed'; // Adjust the import path

export default function PrivacyPolicyPage() {
  return (
    <div>
      <h1>Privacy Policy</h1>
      {/* ... other content ... */}

      <h3>Storage Declaration</h3>
      <p>
        For full transparency, the following is a list of the specific cookies and
        other storage items that our service may place on your browser.
      </p>
      <StorageDeclarationEmbed websiteId="YOUR_WEBSITE_ID" />

      {/* ... other content ... */}
    </div>
  );
}

Esta abordagem garante que o script é carregado e executado em segurança no lado do cliente, evitando conflitos com o ciclo de vida de renderização do React.

Uso avançado

Aproveite os dados de consentimento e compreenda o comportamento do banner.

Utilizar dados de consentimento no seu site

Após o utilizador interagir com o banner, o FitConsent armazena as suas escolhas e dados de geolocalização num cookie chamado fitconsent_given. Pode ler este cookie no lado do cliente ou do servidor para personalizar a experiência do utilizador.

Estrutura do cookie

O cookie contém um objeto JSON com duas chaves primárias: choices e geo.

choices: Um objeto cujas chaves são as categorias de consentimento (ex.: marketing, analytics) e cujos valores são true ou false.

geo: Um objeto que contém a informação geográfica do utilizador (ex.: código do país, estado) no momento do consentimento.

{
  "choices": {
    "marketing": true,
    "analytics": true
  },
  "geo": {
    "country": "US",
    "state": "CA"
  }
}

Exemplo: Mostrar um componente com base no consentimento

Veja como pode mostrar um banner promocional especial apenas para utilizadores na Califórnia que consentiram com cookies de marketing.

import { useState, useEffect } from 'react';

function PromotedFeatures() {
  const [show, setShow] = useState(false);

  useEffect(() => {
    const cookie = document.cookie
      .split('; ')
      .find(row => row.startsWith('fitconsent_given='));

    if (cookie) {
      try {
        const consent = JSON.parse(decodeURIComponent(cookie.split('=')[1]));

// Exemplo: Verifique se o utilizador está na Califórnia e consentiu no marketing.

        if (consent?.geo?.state === 'California' && consent?.choices?.marketing) {
          setShow(true);
        }
      } catch (e) {
        console.error('Error parsing FitConsent cookie', e);
      }
    }
  }, []);

  if (!show) {
    return null;
  }

  return (
    // A sua componente para utilizadores que consentiram com o marketing.
    <div>Special Promotion for California!</div>
  );
}

Detecção Automática de Idioma

O banner FitConsent deteta automaticamente o idioma preferido do utilizador e apresenta a tradução adequada, caso tenha fornecido uma. Este processo segue uma ordem de precedência específica:

• 1. Em primeiro lugar, verifica o atributo lang na etiqueta HTML do seu site (por exemplo, ). Este é o método mais fiável.
• 2. Se o atributo lang não estiver presente, utilizará as definições de idioma do browser do utilizador (navigator.language).
• 3. Se nenhuma das opções acima corresponder aos idiomas configurados, voltará ao inglês (en) ou ao primeiro idioma da lista selecionada.

Melhores Práticas

Para melhores resultados em sites multilingues, certifique-se de que a tag <html> da sua página reflete corretamente o idioma atual apresentado ao utilizador.