Como utilizar o novo snippet multilingue com deteção automática de idioma

Estamos a introduzir um novo snippet com deteção automática de idioma para simplificar a incorporação no seu website. Esta funcionalidade melhorada da nossa Privacy Controls and Cookie Solution deteta automaticamente o idioma do utilizador, reduzindo a necessidade de adicionar snippets de código separado para cada idioma. Eis um guia completo para o ajudar a compreender e implementar esta nova funcionalidade.

Incorporação do novo snippet

Eis a sintaxe básica para o novo snippet com deteção automática de idioma:

<script type="text/javascript">
var _iub = _iub || [];
_iub.csLangConfiguration = {
  "en": {
    "cookiePolicyId": 12345 // ID da política de cookies para inglês
  },
  "it": {
    "cookiePolicyId": 23456 // ID da política de cookies para italiano
  },
};
_iub.csConfiguration = {
  "siteId": 09876, // O seu ID do sítio
"cookiePolicyId": 12345, // ID da política de cookies da língua principal para o 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 para um idioma: O objeto csLangConfiguration define os IDs da política de cookies para cada idioma.
• Mecanismo de fallback: O cookiePolicyId na csConfiguration serve como uma alternativa no caso de não ser detectado nenhum idioma.
• Armazenamento: A utilização de useSiteId no objeto de armazenamento significa que o consentimento do utilizador é válido em diferentes idiomas do seu sítio Web.

🌐 Compreender o mecanismo da linguagem de recurso

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

Veja como funciona o fallback:

O sistema utilizará o primeiro idioma listado no seu objeto _iub.csLangConfiguration. Por isso, se quiser que um idioma específico, como o inglês (en-GB), seja apresentado sempre que não houver correspondência, certifique-se de que o inglês (en-GB) é a primeira entrada.

Exemplo:

Se pretender que o inglês (en-GB) seja apresentado por predefiniçã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

  }

  // ... outras línguas

};

Desta forma, pode decidir o que os utilizadores vêem quando o seu idioma não está disponível.

Utilizar o snippet sem configuração remota

Quando a configuração remota está desactivada, 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 definições de banner, opções de idioma, armazenamento e comportamentos de consentimento no script.

Ajustes e personalização

O novo snippet permite-lhe personalizar a faixa de consentimento para cada idioma utilizando o objeto csLangConfiguration. Deste modo, pode personalizar o aspeto e o comportamento do banner em função do idioma do utilizador. Vamos explorar algumas personalizações comuns.

Exemplo 1: Alterar o aspeto do banner por idioma

Vamos supor que pretende que o banner de consentimento tenha uma cor diferente para cada idioma, dando ao seu site um aspeto personalizado e específico para cada idioma. Neste exemplo, o banner fica vermelho para os utilizadores que visitam 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: Botões de consentimento específicos para cada idioma

Alguns países, como a Dinamarca, exigem que opções de consentimento específicas sejam visíveis para os utilizadores. Pode configurar estas opções de modo a que apenas apareçam quando o idioma do utilizador corresponder a um determinado requisito:

<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 antigo)

Se preferir utilizar o método anterior de utilização de snippets individuais para cada idioma (como na configuração antiga), pode continuar a fazê-lo. Esta abordagem pode ser útil se pretender ter controlo total sobre a configuração de cada idioma ou se a estrutura do seu website exigir snippets individuais. Eis como pode criar snippets individuais para cada idioma:

1. Crie um snippet separado para cada idioma ativo utilizando 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 que liga ao ficheiro iubenda_cs.js para cada snippet.

Exemplos de snippets para diferentes idiomas

Veja como estruturar os snippets para 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 recurso
"siteId": 09876, // ID do sítio
"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 recurso
"siteId": 09876, // ID do sítio
"lang":"it",
  "armazenamento": {
    "useSiteId": true,
  }
};</script>
<script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>

Utilizar o modelo GTM

No Google Tag Manager (GTM), adicionámos uma nova secção para configurar definições específicas para um idioma. Esta funcionalidade opcional permite-lhe gerir diferentes configurações diretamente através do GTM. Para mais detalhes, consulte o guia sobre Como configurar o modelo do GTM da iubenda para sites multilingues