Information

Title	Amostra de SDK do JavaScript e instruções

URL Name	UUID-74c10b40-694f-c021-46cb-7dd648838dc5

Article Content

Content

O SDK do JavaScript do Ponto de coleta é a maneira mais simples de integrar a Gestão universal de consentimento e preferências OneTrust às suas interfaces existentes. Você pode usar o SDK para passar preferências para finalidades de tratamento, tópicos e elementos de dados adicionais. A amostra de SDK a seguir e as instruções podem ser usadas como referência ao integrar o SDK do Ponto de coleta no formulário web.

Nota

Este artigo só se aplica ao método de implementação legado para o SDK do JavaScript. Os métodos JavaScript mostrados abaixo não são compatíveis quando se usa o novo método de implementação.

Exemplo A: Finalidade única, Somente envio de formulário

O modelo mais simples para usar o SDK é para um Ponto de coleta com uma única finalidade, sem tópicos e um tipo de interação somente envio de formulário. Para os tipos de interações somente envio de formulário, um usuário clica em um botão de envio de formulário ou similar, e uma transação é criada para uma única finalidade do tratamento.

A seguir, um exemplo da saída do SDK para este modelo, usando configurações não hospedadas:

<!-- OneTrust Consent Receipt Start -->
 
<script src="https://{BASE URL}/consent-receipt-scripts/otconsent-1.0.js" type="text/javascript" charset="UTF-8" id="consent-receipt-script">
triggerId="trigger";
identifierId="inputEmail";
confirmationId="confirmation";
token="eyJhbGciOiJSUzUxMiJ9.eyJwcm9jZXNzSWQiOiJlNWM1MzJjMi0yYzAyLTQ4OGEtYWY5MS02ZDBkOWNmZGVlZjUiLCJpYXQiOiIyMDE4LTA3LTI0VDExOjAzOjQxLjUyIiwibW9jIjoiV0VCX0ZPUk0iLCJzdWIiOiJlbWFpbCIsImlzcyI6Imh0dHBzOi8vZ292aWNwIiwidGVuYW50SWQiOiIxODRhMjBlNC1jODU4LTRlZDYtOTI5NC05ZDBjN2JiYzFhOWMiLCJkZXNjcmlwdGlvbiI6ImdvdmljcCIsImNvbnNlbnRUeXBlIjoiRk9STVNVQk1JVCIsInBvbGljeV91cmkiOiJodHRwczovL2dvdmljcCIsInB1cnBvc2VzIjpbeyJpZCI6IjM2NzMwNGIyLWU4MDktNDRmMi1iOWZhLTcwMGEwNjAyNGEzNSIsInRvcGljcyI6W119XSwiZHNEYXRhRWxlbWVudHMiOlsiRmlyc3ROYW1lIiwiTGFzdE5hbWUiXX0.muL6uxuSi7irrd0iqDBn3faggx748-2lsV_IHpu_jPfiSjNP9DWw9zUBvcb8K_STB5RU1Ku3k5vQmhVOv34tsEdrinLEVailGDIQapY1xxhPMUfosO2s5KM7ECPlFStodPt3c6c5xVDDYteAWoPy-1CtStHto2jLY6zd_CQaDA6llIu1ebNnv5Z2B261mfxpUZ5loIBXa1Z0Qd2NH6zgi-GTWZXv82e6HcZtIMLcSJ3HHh-CJPsvB-Xdx7SyF8t9xrFXQ4zIR4fpFHRqD2F8RU911KNj4Pa88vDEtpyXfkVLitqdCkfdWUgkWghPPkzU8Vh4X1PQMv58GEloOtLvdg";
settings="eyJyZWNlaXB0QXBpRW5kcG9pbnQiOiJodHRwczovL2NyLWRzLWVhc3R1cy5kZXYub3RkZXYub3JnL3JlcXVlc3QvdjEvY29uc2VudHJlY2VpcHRzIiwibWFudWFsVHJpZ2dlciI6ZmFsc2UsImNvbnRpbnVlT25FcnJvciI6dHJ1ZX0=";
</script>
<script type="text/javascript" charset="UTF-8">
  OneTrust.ScriptTag.Preferences = [
    {
       "purpose": "{PURPOSE GUID}",
       "identifierAttributes": "value",
       "identifierValues": "Purpose1 Name",
        "labels": [
        {
        "language": "de",
        "label": "Purpose1 DE",
        "description": "Allows us to send you news and information about our products and services. DE"
        },
        {
        "language": "en-us",
        "label": "Purpose1",
        "description": "Allows us to send you news and information about our products and services."
        },
        {
        "language": "fr",
        "label": "Purpose1 FR",
        "description": "Allows us to send you news and information about our products and services. FR"
        }
      ]
    }
  ];
</script>
<!-- OneTrust Consent Receipt End -->

Usar o script acima

O código deve ser colocado na página onde o formulário que coleta o consentimento é colocado e em qualquer página para a qual o usuário é direcionado depois do formulário ter sido enviado.

Os atributos seguintes devem ser personalizados para o formulário:

Atributo

Descrição

triggerId

ID do elemento de formulário que acionará o serviço e gerará um recibo quando clicado. Em formulário web padrão, esse seria o ID do elemento do botão Enviar.

identifierID

ID do elemento de formulário que contém o identificador exclusivo do titular de dados, como um endereço de e-mail. O valor enviado a partir deste elemento de formulário é passado para a API de comprovante e armazenado com o comprovante, permitindo pesquisa e recuperação futuras. Esse também será o identificador do titular de dados na lista de titulares dos dados.

Importante

O tipo de identificador que esse valor representa é determinado pelo tipo de identificador configurado para o Ponto de coleta, portanto, é importante que eles correspondam corretamente. Por exemplo, não defina o tipo de identificador como ‘E-mail’ e, em seguida, insira o formulário como um número de telefone.

Nota

O tipo de identificador ‘E-mail’ ou ‘Número de telefone’ é definido quando você configura o Ponto de coleta, mas o SDK não tenta validar se o valor enviado é do tipo correto. Se você definir o tipo de identificador como um endereço de e-mail, mas enviar um valor por meio do formulário que é, na verdade, um número de telefone, ele ainda será identificado na tabela de titulares de dados como um identificador de tipo de e-mail.

confirmationID

(Opcional)

Se esse parâmetro for usado em um elemento DOM, o número de recebimento será gravado nesse elemento quando o SDK fizer uma chamada bem-sucedida para a API para criar um comprovante. Usando um campo de formulário oculto com um confirmationID, você pode inserir o número do comprovante e, na postagem do formulário, inseri-lo em seu próprio banco de dados.

Nota

Para mais informações, consulte abaixo os usos da seção ScriptTag.Preferences, incluindo as tags de idioma. Não é necessário alterar esses valores ao usar o tipo de interação Somente envio de formulário.

Exemplo B: Várias finalidades e/ou tópicos, Caixas de seleção de confirmação de participação

Se você estiver obtendo consentimento para várias finalidades de tratamento e/ou tópicos adicionados a uma finalidade, e seu Ponto de coleta usar um tipo de interação de caixa de seleção, o SDK procura elementos de caixa de seleção no formulário web para indicar o consentimento para cada finalidade. Você precisará configurar o SDK para que as informações corretas de recebimento e transação sejam criadas quando os visitantes selecionarem as diferentes opções para indicar o consentimento.

Veja a seguir um exemplo da saída do SDK para este modelo:

<!-- OneTrust Consent Receipt Start -->
 
<script src="https://{BASE URL}/consent-receipt-scripts/otconsent-1.0.js" type="text/javascript" charset="UTF-8" id="consent-receipt-script">
triggerId="trigger";
identifierId="inputEmail";
conditionalConsentTriggerId="conditionalCheckbox";
confirmationId="confirmation";
token="eyJhbGciOiJSUzUxMiJ9.eyJwcm9jZXNzSWQiOiJlNWM1MzJjMi0yYzAyLTQ4OGEtYWY5MS02ZDBkOWNmZGVlZjUiLCJpYXQiOiIyMDE4LTA3LTI0VDExOjAzOjQxLjUyIiwibW9jIjoiV0VCX0ZPUk0iLCJzdWIiOiJlbWFpbCIsImlzcyI6Imh0dHBzOi8vZ292aWNwIiwidGVuYW50SWQiOiIxODRhMjBlNC1jODU4LTRlZDYtOTI5NC05ZDBjN2JiYzFhOWMiLCJkZXNjcmlwdGlvbiI6ImdvdmljcCIsImNvbnNlbnRUeXBlIjoiT1BUSU5DSEVDS0JPWCIsInBvbGljeV91cmkiOiJodHRwczovL2dvdmljcCIsInB1cnBvc2VzIjpbeyJpZCI6IjM2NzMwNGIyLWU4MDktNDRmMi1iOWZhLTcwMGEwNjAyNGEzNSIsInRvcGljcyI6W119LHsiaWQiOiJiYTU0ZWIyNS05MGYwLTQ2MzMtYWIxMi1jN2JmNWFmZGQ4NTYiLCJ0b3BpY3MiOlt7ImlkIjoiMDBiZTYwOGItMjhkZC00NzBhLWJlNjItZGE5ZWMwNTBlYjQwIn0seyJpZCI6ImY3MTJmNzczLWUyMWUtNDc1Mi05NjEwLWNlZTA0YjU2ZDMxMSJ9LHsiaWQiOiI0NmYwYzkwYS1lZTdiLTRhODQtYTkzMi1hZDU2MDlkNzE2YTIifV19XSwiZHNEYXRhRWxlbWVudHMiOlsiRmlyc3ROYW1lIiwiTGFzdE5hbWUiXX0.lE9D0Ri025kLyhfcKUJ2OV6CfH3wrhijh_J8rs_9yW9wmoQ3RcLzgeTtDiX8GAKc6AFwSQXukyscMW_xg-Agjq0e6RqOUoE3hBZhmcKX4DKQ_Oo8a-Kom5AMOndrpgGHjn2emNBrHnhG_snVMeW_Rl0KUkb6xqXwfyUjqrdLS5K6K39hJJLQDZDtKzRUEtbK0AL98ImzWyrECXnIc4B04BXIF9fGjDSql0aRCq8Lx64a5rY2qWKUf6m8Z0LFcvFYsHykDT-Aa5GCg0SOgR6rg2WGa1rafJuZd-fCNw8jeN9bRKn559RNz24n6kUIx9eGXIJsPdNMVrCBhvvz6zgyDQ";
settings="eyJyZWNlaXB0QXBpRW5kcG9pbnQiOiJodHRwczovL2NyLWRzLWVhc3R1cy5kZXYub3RkZXYub3JnL3JlcXVlc3QvdjEvY29uc2VudHJlY2VpcHRzIiwibWFudWFsVHJpZ2dlciI6ZmFsc2UsImNvbnRpbnVlT25FcnJvciI6dHJ1ZX0=";
</script>
<script type="text/javascript" charset="UTF-8">
OneTrust.ScriptTag.Preferences = [
   {
       "purpose": "{GUID}",
       "identifierAttributes": "value",
       "identifierValues": "Purpose1 Name",
        "labels": [
        {
        "language": "de",
        "label": "Purpose1 DE",
        "description": "Allows us to send you news and information about our products and services. DE"
        },
        {
        "language": "en-us",
        "label": "Purpose1",
        "description": "Allows us to send you news and information about our products and services."
        },
        {
        "language": "fr",
        "label": "Purpose1 FR",
        "description": "Allows us to send you news and information about our products and services. FR"
        }
      ]
    } ,
    {
       "purpose": "{GUID}",
       "identifierAttributes": "value",
       "identifierValues": "Purpose2 Name",
        "labels": [
        {
        "language": "de",
        "label": "Purpose2 DE",
        "description": "Allows us to send you news and information about our products and services. DE"
        },
        {
        "language": "en-us",
        "label": "Purpose2",
        "description": "Allows us to send you news and information about our products and services."
        },
        {
        "language": "fr",
        "label": "Purpose2 FR",
        "description": "Allows us to send you news and information about our products and services. FR"
        }
      ]
       "topics" : [
        {  
            "topic": "{GUID}",
            "identifierAttributes": "value",
            "identifierValues": "Topic1",
            "labels": [
            {
            "language": "en-us",
            "label": "Topic1"
            },
            {
            "language": "de",
            "label": "Topic1 DE"
            }
          ]
        } ,
        {
            "topic": "{GUID}",
            "identifierAttributes": "value",
            "identifierValues": "Topic2",
            "labels": [
            {
            "language": "en-us",
            "label": "Topic2"
            },
            {
            "language": "de",
            "label": "Topic2 DE"
            }
          ]
        } ,
        {
            "topic": "{GUID}",
            "identifierAttributes": "value",
            "identifierValues": "Topic3",
            "labels": [
            {
            "language": "en-us",
            "label": "Topic3"
            },
            {
            "language": "de",
            "label": "Topic3 DE"
            }
          ]
        }
       ]
    }
];
 
</script>
<!-- OneTrust Consent Receipt End -->

Usar o script acima

Ao usar o código acima, pode ser preciso modificar os valores identifierAttributes e identifierValues para corresponder ao formulário em sua página (ou editar seu formulário para usar esses valores) para cada finalidade do tratamento em seu Ponto de coleta.

Atributo	Descrição
identifierAttributes	identifierAttributes deve ser o nome do atributo em seu elemento de caixa de seleção que contém o valor de identificação exclusivo que distingue cada caixa de todas as outras. ‘Valor’ é o padrão, mas pode ser alterado se o formulário for diferente.
identifierValues	identifierValues deve ser o valor armazenado desse atributo que mapeia para a finalidade ou tópico específico. Por padrão, ele é preenchido com a finalidade ou o nome do tópico que corresponde ao GUID do sistema, mas pode ser alterado se o formulário usar valores diferentes.

Por exemplo, o mapeamento de primeira finalidade no código acima (com "identifierAttributes": "value" e "identifierValues": "Purpose1 Name"), seria mapeado para a seguinte caixa de seleção: <input type="checkbox" value="Purpose1 Name" />

Importante

Você não deve alterar os GUIDs de finalidade ou tópico fornecidos pelo código. Isso provavelmente não resultará na geração de nenhum comprovante.

Nota

A variável conditionalConsentTriggerId é um controle adicional opcional para acionar o consentimento, além do mapeamento de finalidades e tópicos. Isso pode ser útil em cenários em que você deseja uma interação de tipo de caixa de seleção adicional para significar a concessão de consentimento. Se usado, o SDK só acionará uma solicitação de consentimento se essa caixa de seleção adicional estiver marcada, independentemente de quaisquer mapeamentos.

Essa variável deve conter o ID da caixa de seleção que precisa ser selecionada, como conditionalConsentTriggerId ="conditionalCheckbox".

Preferências personalizadas

Os mapeamentos para Preferências personalizadas funcionam de maneira semelhante aos objetivos e tópicos. Para cada finalidade, as Opções de preferência personalizadas identifierAttributes e identifierValues devem corresponder aos identificadores nos campos de formulário que permitem que o SDK obtenha os valores corretos no envio.

Veja a seguir um exemplo de mapeamento de preferências personalizadas no JavaScript.

<script>
OneTrust.ScriptTag.Preferences = [
    {
      "purpose": "{GUID}",
      "identifierValues": "purpose1",
      "identifierAttributes": "value",
      "topics": [],
      "customPreferences": [
        {
          "customPreference": "{GUID}",
          "options": [
            {
              "option": "{GUID}",
              "identifierValues": "customPreference1Option1",
              "identifierAttributes": "value"
            },
            {
              "option": "{GUID}",
              "identifierValues": "customPreference1Option2",
              "identifierAttributes": "value"
            },
            {
              "option": "{GUID}",
              "identifierValues": "customPreference1Option3",
              "identifierAttributes": "value",
               
            }
          ]
        }
      ]
    }
  ]
}];
</script>

Veja a seguir um exemplo de mapeamento de preferências personalizadas em formulário web em HTML.

<form action="confirm.html" method="get">
    <input type="hidden" id="confirmation" name="receiptId" value="" />
 
    <label for="firstName" class="sr-only">Your first name</label>
    <input type="text" id="firstName" placeholder="Your first name" autocomplete='given-name'>
 
    <label for="lastName" class="sr-only">Your last name</label>
    <input type="text" id="lastName" placeholder="Your last name" autocomplete='family-name'>
 
    <label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" id="inputEmail"placeholder="Email address" required
            autocomplete='email'>
 
    <div class="checkbox">
        <label>
            <input type="checkbox" value="purpose1"> Purpose checkbox for Purpose 1
        </label>
 
        <div class="ml-1 my-1">
            <h6>Custom Preferences</h6>
 
            <label>
                <select id="customPreferenceOptions">
                    <option selected value="">
                        -----------
                    </option>
                    <option value="customPreference1Option1">
                        Custom Preference Option 1
                    </option>
 
                    <option value="customPreference1Option2">
                        Custom Preference Option 2
                    </option>
 
                    <option value="customPreference1Option3">
                        Custom Preference Option 3
                    </option>
                </select>
            </label>
        </div>
    </div>
 
    <button id="trigger" type="button">Submit form</button>
</form>

Como substituir Opções de preferências personalizadas

Caso seu formulário web use elementos diferentes das caixas de seleção (ou seja, seletor tipo dial, seleções, componentes da Web personalizados etc.), você pode substituir como o SDK recupera o valor da opção que consentiu. Por exemplo, se usarmos um elemento HTML suspenso selecionado para que somente uma única opção seja consentida, poderemos substituir como o SDK recupera isso.

Assinatura da configuração

Veja a seguir um exemplo de uma interface de definição de Ponto de coleta personalizada.

interface CustomPreferenceDefinition {
   identifierValues: string;
   identifierAttributes: string;
   customPreference: string;
   getOptionsValue(): string[];
}

Assinatura do método

Veja a seguir um exemplo de uma interface para configurar um Ponto de coleta para uma finalidade.

OneTrust.Api.SetCustomPreferencesDefinitions(purpose: string, definitions: CustomPreferenceDefinition[]): void;

HTML do formulário web

Veja a seguir um exemplo de um formulário web com select.

<form action="confirm.html" method="get">
    <input type="hidden" id="confirmation" name="receiptId" value="" />
 
    <label for="firstName">Your first name</label>
    <input type="text" id="firstName" placeholder="Your first name" autocomplete='given-name'>
 
    <label for="lastName">Your last name</label>
    <input type="text" id="lastName" placeholder="Your last name" autocomplete='family-name'>
 
    <label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" id="inputEmail" placeholder="Email address" requiredautocomplete='email'>
 
    <div>
        <label>
            <input type="checkbox" value="purpose1"> Purpose checkbox for Purpose 1
        </label>
 
        <div class="ml-1 my-1">
            <h6>Custom Preferences</h6>
 
            <label>
                <select id="customPreferenceOptions">
                    <option selected value="">
                        -----------
                    </option>
                    <option value="customPreference1Option1">
                        Custom Preference Option 1
                    </option>
                    <option value="customPreference1Option2">
                        Custom Preference Option 2
                    </option>
                    <option value="customPreference1Option3">
                        Custom Preference Option 3
                    </option>
                </select>
            </label>
        </div>
    </div>
 
    <button id="trigger" type="button">Submit form</button>
</form>

JavaScript

A seguir, um exemplo de código JavaScript para substituir uma preferência personalizada de uma finalidade.

// To ensure external settings are loaded, use the Initialized promise:
OneTrust.Api.Initialized.then(() => {
    console.log("External settings loaded. We're ready to use them.");
 
    const PURPOSE_ID = 'a6570910-4d90-48f8-8f8d-5f0b4af0ce12';
 
    // custom function to get the ID of the selected option
    const getOptionsValue = () => { 
        // select with id "customPreferenceOptions"
        const options = document.getElementById('customPreferenceOptions');
 
        // return the option's value attribute
        return options ? [options.value] : [];
    };
 
    // define custom preferences definitions for purpose with id PURPOSE_ID
    OneTrust.Api.SetCustomPreferencesDefinitions(PURPOSE_ID, [{
        identifierValues: 'customPreference1',
        getOptionsValue
    }]);
});

Como usar as configurações do SDK hospedado

Ao usar a versão de configurações hospedadas do SDK, você pode recorrer às duas opções a seguir:

Opção 1:

Alterar seu formulário para depender do identifierValues e identifierAttributes padrão. Para mais informações, consulte a tabela Atributo no Exemplo B.

Opção 2:

Substituir os valores hospedados. Para mais informações, consulte substituindo as Configurações do SDK hospedado.

Como substituir as Configurações do SDK hospedado

O script a seguir é um exemplo de substituição de Configurações do SDK hospedado.

// To ensure external settings are loaded, use the Initialized promise:
OneTrust.Api.Initialized.then(() => {       
    // Override identifier value
    let customDefinitions = OneTrust.Api.GetPurposeDefinitions();
    customDefinitions[0].identifierValues = "purpose1-modified";
    OneTrust.Api.SetPurposeDefinitions(customDefinitions);
});

Finalidades e tópicos

Você também pode definir valores de identificador de propósito e tópico diretamente com chamadas de API:

OneTrust.Api.Initialized.then(() => {
    // Override purpose value
    OneTrust.Api.SetPurposeIdentifier("<purpose GUID>", "<purpose identifier value>");
 
    // Override purpose value
    OneTrust.Api.SetTopicIdentifier("<topic GUID>", "<topic identifier value>");
});

Importante

Os tópicos são secundários de finalidades no esquema do Ponto de coleta. No entanto, sua interface de usuário não precisa incluir caixas de seleção de finalidade em que há vários tópicos. Se o SDK detectar que uma caixa de seleção Tópico foi marcada, ele criará automaticamente um registro de consentimento para a finalidade principal. Se sua IU tiver caixas de seleção Finalidade como principais de tópicos, você deve garantir que sua IU contenha lógica que reflita esse comportamento.

Elementos de dados

O SDK também tem a capacidade de enviar valores de elemento de dados de um formulário para ser armazenado no OneTrust (Nome, País, Empresa etc.). Para fazer isso, os nomes dos elementos de dados devem ser configurados primeiro no Ponto de coleta.

Uma vez configurado, você pode incluir código JavaScript adicional semelhante ao exemplo a seguir. Da mesma forma que as finalidades acima, o elemento de dados identifierAttributes e identifierValues devem corresponder aos identificadores nos campos de formulário que permitem que o SDK obtenha os valores corretos no envio.

Veja a seguir um exemplo de envio de valores de elemento de dados no SDK:

<script type="text/javascript" charset="UTF-8">
    OneTrust.ScriptTag.DataElements = [
      {
        "identifierAttributes": "id",
        "identifierValues": "firstName",
        "dataElementName": "First Name"
      },
      {
        "identifierAttributes": "id",
        "identifierValues": "lastName",
        "dataElementName": "Last Name"
      },
      {
        "identifierAttributes": "id",
        "identifierValues": "Company",
        "dataElementName": "Company"
      }
    ];
  </script>

Tags de idioma

Quando você define os idiomas para um Ponto de coleta, o SDK inclui todas as tags de texto disponíveis para as finalidades e tópicos nos quais as traduções foram criadas. Ambos os extratos acima mostram exemplos dessas tags, que também estão incluídos no arquivo Configurações do SDK hospedado. O OneTrust fornece uma variedade de métodos JavaScript para usar essas tags na interface do usuário do seu formulário web. Isso permite que seus formulários garantam que eles usem o mesmo idioma para finalidades e tópicos que os titulares dos dados verão ao fazer login nas Centrais de preferências.

Veja a seguir um exemplo de métodos JavaScript compatíveis para idiomas:

// To ensure external settings are loaded first, use the Initialized promise:
OneTrust.Api.Initialized.then(() => {
 
    // Get all purpose labels for a language(can always be skipped to get a single/default/first label entry):
    const frenchPurposeLabels = OneTrust.Api.GetPurposeLabels("fr");
 
    // Get purpose label by language and purposeId/domIdentifier
    const frenchPurpose1Label = OneTrust.Api.GetPurposeLabel("purpose1", "fr");
 
    // Get all topic labels for a language:
    const frenchTopicLabels = OneTrust.Api.GetTopicLabels("fr");
 
    // Get topic label by language and topicId/domIdentifier
    const frenchTopic1Label = OneTrust.Api.GetTopicLabel("topic1", "fr");
 
    // Get all purpose labels for a default language(should only be used when a single language is defined)
    var allPurposeLabels  = OneTrust.Api.GetPurposeLabels();
});

Cada tag terá a seguinte estrutura:

{
    id: "{GUID}",
    domId: "HTML attribute value used to find the checkbox on the page",
    language: "language code of the label",
    label: "Purpose/Topic label for a given language"
    description: "Purpose description for a given language(not defined for Topic labels)"
}

Como enviar idioma do titular de dados

O SDK pode enviar o idioma de um titular de dados, juntamente com o envio do formulário, que será armazenado como um atributo desse titular de dados. O OneTrust usará esse código de idioma para enviar quaisquer notificações por e-mail, no idioma armazenado do titular de dados.

Nota

Isso requer que os modelos para esse idioma estejam presentes nos modelos de e-mail, que fazem parte da configuração Configurações globais.

Para armazenar corretamente a preferência de idioma de um titular de dados, seu formulário web deve gerar o idioma usando um idioma padrão ISO ou um formato de código de cultura de idioma. Isso é feito definindo a variável OneTrust.ScriptTag.Language.

Veja a seguir um exemplo de como definir a preferência de idioma de um titular de dados:

<script type="text/javascript" charset="UTF-8">
    OneTrust.ScriptTag.Language = "en-GB";
</script>

Nota

Ambos os formatos ‘en’ e ‘en-GB’ são compatíveis. Além disso, essa tag deve ser colocada em uma tag após a tag do SDK principal e deve ser definida antes que o formulário web seja enviado.

Importante

Se usar esse recurso, você será responsável por notificar os titulares dos dados de que esses dados estão sendo coletados e podem ser usados para se comunicar com eles no idioma selecionado/detectado.

Configurações não codificadas diretamente no JavaScript

Você pode gravar configurações não codificadas diretamente em sua página para fazer alterações mais facilmente no JavaScript.

IdentifierAttributes e identifierValues devem corresponder aos identificadores nos campos de formulário para permitir que o SDK passe os valores corretos quando o formulário for enviado.

As configurações devem ser colocadas após a tag <body> no HTML da página. A opção a seguir é um exemplo de configuração não codificada.

<script type="text/javascript" charset="UTF-8">
  
OneTrust.ScriptTag.ReceiptApiEndpoint = "{endpoint URL}";  //optional - can be left in settings - but if used settings can be removed completely.
   
OneTrust.ScriptTag.DataElements = [     
{    
"identifierAttributes": "id",       
"identifierValues": "firstName",  
"dataElementName": "First Name"     
},
     
{      
"identifierAttributes": "id",     
"identifierValues": "lastName",      
"dataElementName": "Last Name"    
},
     
{       
"identifierAttributes": "id",      
"identifierValues": "inputEmail",      
"dataElementName": "Email"     
}  
];
  
OneTrust.ScriptTag.Preferences = [      
{          
"purpose": "622ab782-8ad7-4886-9dc3-8618dcf03900",          
"identifierValues": "Sample Purpose",   
"identifierAttributes": "value",         
"topics": [
                {
                    "topic": "2b55ca4e-c232-4396-9602-d6f2ea5bbd18",                   
                    "identifierValues": "A Topic",                   
                    "identifierAttributes": "value"
                },
                {
                    "topic": "e4e19d3b-7de6-4054-a3f0-fd6b8a82775a",                 
                    "identifierValues": "AA Topic",                   
                    "identifierAttributes": "value"
                }           
]       
}  
];
</script>

Como usar o manualTrigger

ManualTrigger é uma variável booleana incluída na parte de configurações codificadas do SDK. Você pode decodificar as configurações usando uma ferramenta de decodificação base64, alterá-la e codificar novamente a string de configurações. O valor padrão é ‘false’, mas definir o valor como ‘true’ permitirá que o fluxo de trabalho personalizado seja executado. Isso permite cenários em que você pode querer uma lógica alternativa ou um fluxo de trabalho para disparar a ação de geração de recibo, em vez da caixa de seleção padrão/lógica de envio.

Quando as condições de acionamento forem atendidas, chame Receipt.TriggerReceipt(downloadRawReceipt) do JavaScript para criar o comprovante. Para baixar a assinatura de comprovante bruto, defina o parâmetro downloadRawReceipt como verdadeiro.

Como carregar o OneTrust por meio de um gerenciador de tags

Depois de configurar o script, ele pode ser carregado por meio de uma ferramenta de gerenciamento de tags como o Gerenciador de tags do Google. Ele só precisa ser carregado na mesma página do formulário. Se estiver usando o Gerenciador de tags do Google, configure o acionador da página como "DOM Ready" para garantir que o formulário seja totalmente carregado antes do script.

Suporte para vários formulários em uma única página

Para incluir vários formulários em uma única página, você pode passar o identificador e o token via JavaScript usando um fluxo personalizado. Você também pode acionar a solicitação de recibo.

OneTrust.Api.TriggerReceiptAction("user@identifier.com", "CP token"); // pass both token and identifier, which can be used to create receipts for multiple CPs with a single script tag
OneTrust.Api.TriggerReceiptAction("user@identifier.com"); // pass custom identifier only, when shared default token from the script tag is to be used.
OneTrust.Api.TriggerReceiptAction(); // trigger receipt request with defaults working as before

Nota

Como o serviço de inclusão não está passando o ID de finalidade padrão do JWT para pontos de coleta não explícitos de finalidade única, os usuários de fluxo personalizado precisarão passar manualmente o ID de finalidade para a carga útil de solicitação, conforme mostrado abaixo. O serviço de inserção tratará a carga ausente como correta, retornará o ID de recebimento, mas não criará nenhuma transação.

var purposes = [{Id: "b0dc5e4e-ffe8-4db5-ae5f-577747e5f86a"}];
OneTrust.Api.TriggerReceiptAction("user@identifier.com", "CP token", purposes); // pass both token and identifier, which can be used to create receipts for multiple CPs with a single script tag
OneTrust.Api.TriggerReceiptAction("user@identifier.com", null, purposes); // pass custom identifier only, when shared default token from the script tag is to be used.
OneTrust.Api.TriggerReceiptAction(null, null, purposes); // trigger receipt request with defaults working as before

Como o uso de vários formulários de consentimento em uma única página provavelmente significaria o uso de vários pontos de coleta, o uso mais comum seria passar o identificador e o token como na primeira linha acima. Todos os outros parâmetros opcionais (finalidades, elementos de dados, preferências personalizadas) podem ser passados para o método OneTrust.API.TriggerReceiptAction().

Dispare e esqueça

Você pode acionar uma transação de consentimento com conteúdo de texto em vez de JSON e ignorar a espera pelo ID de recibo. Para fazer isso, você pode chamar a função TriggerBeaconReceiptAction. Essa função aceita identificador, token, finalidades, dsDataElements (Elementos de dados de titular de dados), customElements e downloadRawReceipt como parâmetros opcionais.

A seguir, há um exemplo de dispare e esqueça.

<!-- OneTrust Consent Receipt Start -->
<script src="otconsent-1.0.js" type="text/javascript" charset="UTF-8" id="consent-receipt-script">
    settingsUrl="your setting url";
    identifierId="inputEmail1"
</script>
<!-- OneTrust Consent Receipt End -->
<!-- Custom Integration Start -->
<script type="text/javascript" charset="UTF-8">
    $(function () {
        var cp1Purpose = [{Id: "your purpose id"}];
        $("#sample_form1").submit(function (event) {
            event.preventDefault();
            const identifier = $("#inputEmail1").val();
            const token = "your token goes here";
            OneTrust.Api.TriggerBeaconReceiptAction(identifier, token, cp1Purpose).then((data) => {
                console.log("data", data);
                document.location.href = "/beacon-result.html";
            });
        });
    });
</script>
<!-- Custom Integration End -->

Attachment

Article Visibility

Article Total View Count 5,760

Translation

Language	Portuguese (Brazil)

Is Primary Language

Amostra de SDK do JavaScript e instruções

Nota

Exemplo A: Finalidade única, Somente envio de formulário

Usar o script acima

Importante

Nota

Nota

Exemplo B: Várias finalidades e/ou tópicos, Caixas de seleção de confirmação de participação

Usar o script acima

Importante

Nota

Preferências personalizadas

Como substituir Opções de preferências personalizadas

Assinatura da configuração

Assinatura do método

HTML do formulário web

JavaScript

Como usar as configurações do SDK hospedado

Opção 1:

Opção 2:

Como substituir as Configurações do SDK hospedado

Finalidades e tópicos

Importante

Elementos de dados

Tags de idioma

Como enviar idioma do titular de dados

Nota

Nota

Importante

Configurações não codificadas diretamente no JavaScript

Como usar o manualTrigger

Como carregar o OneTrust por meio de um gerenciador de tags

Suporte para vários formulários em uma única página

Nota

Dispare e esqueça