Como usar o novo snippet multilíngue com detecção automática de idioma

Estamos introduzindo um novo snippet com detecção automática de idioma para simplificar a incorporação em seu site. Esse recurso aprimorado da nossa Privacy Controls and Cookie Solution detecta automaticamente o idioma do usuário, reduzindo a necessidade de adicionar snippets de código separados para cada idioma. Veja a seguir um guia completo para ajudar você a entender e implementar essa nova funcionalidade.

Incorporação do novo snippet

Veja a seguir a sintaxe básica para o novo snippet com detecção automática de idioma:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
  "en": {
    "cookiePolicyId": 12345 // ID da política de cookies para o inglês
  },
  "it": {
    "cookiePolicyId": 23456 // ID da política de cookies para o italiano
  },
};
_iub.csConfiguration = {
  "siteId": 09876, // ID do seu site
"cookiePolicyId": 12345, // ID da política de cookies do idioma principal para fallback
"armazenamento": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Como funciona

• Configuração específica do idioma: O objeto csLangConfiguration define os IDs da política de cookies para cada idioma.
• Mecanismo de fallback: O cookiePolicyId na csConfiguration serve como um fallback caso nenhum idioma seja detectado.
• Armazenamento: Usar useSiteId no objeto de armazenamento significa que o consentimento do usuário é válido em diferentes idiomas do seu site.

Entendendo o mecanismo de linguagem de fallback

Se o snippet da iubenda não conseguir encontrar uma correspondência entre o idioma do usuário e os que você definiu no objeto _iub.csLangConfiguration (por exemplo, se o navegador do usuário estiver definido como chinês, mas você não tiver configurado o chinês), ele voltará automaticamente para um idioma padrão configurado no objeto _iub.csLangConfiguration .

👉 Veja como funciona o fallback:

O sistema usará o primeiro idioma listado em seu objeto _iub.csLangConfiguration. Portanto, se você quiser que um idioma específico, como inglês (en-GB), seja exibido sempre que não houver correspondência, certifique-se de que inglês (en-GB) seja a primeira entrada.

Exemplo

Se você quiser que o inglês (en-GB) seja exibido por padrão:

_iub.csLangConfiguration = {

  "en-GB": {

    "cookiePolicyId":00000001 // ID da política de cookies para o Reino Unido.

  },

  "fr": {

    "cookiePolicyId":00000002 // ID da política de cookies para o francês

  },

  "it": {

    "cookiePolicyId":00000003 // ID da política de cookies para o italiano

  }

  // ... outros idiomas

};

Dessa forma, você decide o que os usuários verão quando o idioma deles não estiver disponível.

Utilização do snippet sem configuração remota

Quando a configuração remota está desativada, o snippet depende inteiramente dos parâmetros fornecidos no objeto _iub.csConfiguration. A sintaxe é semelhante à versão com configuração remota, mas especifica explicitamente todas as configurações, incluindo configurações de banner , opções de idioma, armazenamento e comportamentos de consentimento dentro do script.

Ajustes e personalização

O novo snippet permite que você personalize o banner de consentimento para cada idioma usando o objeto csLangConfiguration. Isso significa que você pode personalizar a aparência e o comportamento do banner de acordo com o idioma do usuário. Vamos explorar algumas personalizações comuns.

Exemplo 1: Alteração da aparência do banner por idioma

Suponha que você queira que o banner de consentimento tenha uma cor diferente para cada idioma, dando ao seu site uma aparência personalizada e específica para cada idioma. Neste exemplo, o banner fica vermelho para usuários que visualizam o site em italiano:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
  "en": {
    "cookiePolicyId": 12345
  },
  "it": {
    "cookiePolicyId": 23456,
    "banner": {
      "backgroundColor": "#FF0000"
    }
  },
};
_iub.csConfiguration = {
  "siteId": 09876,
  "cookiePolicyId": 12345,
  "armazenamento": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Exemplo 2: Alternativas de consentimento específicas do idioma

Alguns países, como a Dinamarca, exigem que opções específicas de consentimento sejam visíveis aos usuários. Você pode configurar essas opções para serem exibidas somente quando o idioma do usuário corresponder a um requisito específico:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
  "da": {
    "cookiePolicyId": 7896,
    "banner": {
      "showPurposesToggles": true
    }
  },
};
_iub.csConfiguration = {
  "siteId": 09876,
  "cookiePolicyId": 12345,
  "armazenamento": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Como recriar o snippet por idioma (método legado)

Se você preferir, ainda é possível usar o método anterior, que usa snippets individuais para cada idioma (como na configuração legada). Essa abordagem pode ser útil se você quiser ter controle total sobre a configuração de cada idioma ou se a estrutura do seu site exigir snippets individuais. Veja como você pode criar snippets individuais para cada idioma:

1. Crie um snippet separado para cada idioma ativo usando apenas o objeto _iub.csConfiguration.
2. Adicione o idioma no parâmetro "lang" para cada snippet.
3. Inclua o cookiePolicyId específico do idioma em cada objeto _iub.csConfiguration.
4. Mantenha o script vinculado ao arquivo iubenda_cs.js para cada snippet.

Exemplos de snippets para diferentes idiomas

Veja como você deve estruturar os snippets em inglês(en) e italiano(it):

Inglês:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
  "cookiePolicyId": 12345, // ID da política de cookies de fallback
"siteId": 09876, // ID do site
"lang": "en",
  "armazenamento": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Italiano

<script type="text/javascript">
var _iub = _iub || [];
_iub.csConfiguration = {
"cookiePolicyId": 23456, // ID da política de cookies de fallback
"siteId": 09876, // ID do site
"lang":"it",
  "armazenamento": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Utilização do modelo GTM

No Google Tag Manager (GTM), adicionamos uma nova seção para definir configurações específicas do idioma. Esse recurso opcional permite que você gerencie diferentes configurações diretamente pelo GTM. Para mais detalhes, consulte o guia sobre como configurar o modelo GTM da iubenda para sites multilíngues