> ## Documentation Index
> Fetch the complete documentation index at: https://lifters.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Instalação

> Hospede o bundle do SDK e inclua no seu frontend via CDN, hosting próprio ou Google Tag Manager.

O SDK é distribuído como um único arquivo JavaScript IIFE (\~8 KB gzipped).
Escolha uma das três opções abaixo conforme sua infraestrutura.

## Opção 1 — CDN Atlas (recomendado em produção)

A forma mais simples. Disponível na CDN Cloudflare da Atlas com edge global.

```html theme={null}
<script src="https://cdn.twinfo.io/sdk.min.js" async></script>
```

| Atributo      | Valor                                                                      |
| ------------- | -------------------------------------------------------------------------- |
| URL           | `https://cdn.twinfo.io/sdk.min.js`                                         |
| Cache         | `max-age=3600, stale-while-revalidate=86400`                               |
| Versionamento | Pinned: `cdn.twinfo.io/sdk.min.js` · Latest v1: `cdn.twinfo.io/sdk.min.js` |
| Integridade   | Subresource Integrity (SRI) suportado — ver tabela de hashes               |

<Tip>
  Em produção, prefira pin numa versão específica (`1.0.0`) para reproducibilidade.
  A linha `v1` recebe updates patch automaticamente.
</Tip>

## Opção 2 — Hosting próprio

Útil em dev local ou quando o operador prefere servir do mesmo origin do app
(elimina preflight CORS no asset, embora não no endpoint de ingestão).

```bash theme={null}
# 1. Baixe o bundle
curl -O https://cdn.twinfo.io/sdk.min.js

# 2. Copie para o public/ do seu app
mv sdk.min.js /caminho/seu-frontend/public/atlas-sdk.min.js
```

```html theme={null}
<script src="/atlas-sdk.min.js" async></script>
```

## Opção 3 — Google Tag Manager

Para operadores que preferem não tocar no código do app. Template oficial
Atlas publicado no [GTM Community Gallery](https://tagmanager.google.com/gallery/).

<Steps>
  <Step title="Tag 1 — SDK Loader">
    Adicione a tag **Atlas Web Analytics Loader**:

    * **Trigger:** All Pages
    * **organizationId**, **brandId**: variáveis GTM
    * **endpoint** (opcional): default `ingest.atlas.io`
  </Step>

  <Step title="Tag 2 — Identify (após login)">
    Adicione a tag **Atlas Web Analytics Identify**:

    * **Trigger:** Custom Event `user_logged_in` (operador dispara em `dataLayer`)
    * **distinctId**: variável GTM mapeada ao seu user ID interno
    * **traits**: tabela key/value
  </Step>

  <Step title="Dispare via dataLayer no app">
    ```javascript theme={null}
    window.dataLayer.push({
      event: 'user_logged_in',
      user_id: '12345',
      user_traits: { account_type: 'vip', kyc_status: 'approved' }
    });
    ```
  </Step>
</Steps>

## Snippet de inicialização

Independente da opção de hosting, o snippet de init é o mesmo. Use **polling**
para esperar o `async` script terminar de carregar:

```html theme={null}
<script>
  (function init() {
    if (!window.iGamingSDK || !window.iGamingSDK.init) {
      return setTimeout(init, 50);
    }
    window.iGamingSDK.init({
      organizationId: 'org_SEU_ID',
      brandId:        'brand_SEU_ID',
      endpoint:       'https://ingest.atlas.io/v1/sdk-events'
    });
  })();
</script>
```

## Verificar instalação

```javascript Cole no DevTools Console theme={null}
console.log({
  loaded:      typeof iGamingSDK?.init === 'function',
  version:     iGamingSDK?.version,
  distinct_id: iGamingSDK?.get_distinct_id?.(),
  opted_in:    iGamingSDK?.has_opted_in_capturing?.()
});
```

Esperado:

```
{
  loaded: true,
  version: '1.0.0',
  distinct_id: 'a3f1b2c4-...',
  opted_in: true
}
```

## Requisitos

| Item                     | Valor                                                                  |
| ------------------------ | ---------------------------------------------------------------------- |
| Browser                  | Chrome 85+, Safari 14+, Firefox 78+, Edge 85+                          |
| ES Version               | ES2020 (sem transpilation suportada — IE não suportado)                |
| Storage                  | `localStorage` + `cookie` (fallbacks para `sessionStorage` e `memory`) |
| Permissões               | nenhuma — não usa `Notification`, `Geolocation`, etc.                  |
| Conteúdo Security Policy | Aceita inline ou nonce; ver seção abaixo                               |

## CSP (Content Security Policy)

Se seu app tem CSP restritivo, libere os domínios:

```
script-src   'self' https://cdn.twinfo.io;
connect-src  'self' https://ingest.atlas.io;
```

O SDK não usa `eval`, `new Function()`, `innerHTML` ou outros padrões inseguros —
compatível com CSP estrito (sem `'unsafe-inline'`).

## Mixed content

Se sua página é HTTPS, **o endpoint precisa ser HTTPS também**. Browsers
modernos bloqueiam POSTs HTTP → HTTPS silenciosamente. Use o endpoint Atlas
production (`https://ingest.atlas.io`) ou seu próprio reverse proxy HTTPS.

## Próximos passos

* [Configuração completa](/sdk/web-analytics/configuration) — todos os campos do `init()`
* [Identificar usuário](/sdk/web-analytics/identify) — vincular `distinct_id` ao seu user ID
* [Catálogo de eventos](/sdk/web-analytics/events) — quais eventos são capturados automaticamente