Como podemos ajudar?

Pesquisa

Integre o Web SDK da AppsFlyer

  • Atualizado

Resumo: Instale o Web SDK da AppsFlyer (também conhecido como pixel) no seu site para registrar visitas e eventos de usuários na plataforma e defina um Customer User ID (CUID) para unificar jornadas cross-platform.

Visão geral

O Web SDK permite que você registre como os visitantes interagem com seu site e envia essa informação para a AppsFlyer. É um módulo plug-in de 40–60 KB que comunica as visitas e ações dos usuários no seu site à plataforma da AppsFlyer.

Integre o SDK manualmente

 Siga as etapas abaixo para concluir a integração do Web SDK, desde a instalação até a validação e aos controles de privacidade.

  1. Receber suas chaves. Obtenha o ID do Web SDK (também conhecido como Web Dev Key).
  2. Selecionar um code snippet. Escolha o snippet que corresponde ao seu tipo de integração e requisitos de segurança.
  3. Implementar o Web SDK. Implemente o SDK usando um snippet nativo, o Google Tag Manager ou o Adobe Launch Tag Manager.
  4. Verificar se o SDK está funcionando. Certifique-se de que o SDK está enviando solicitações ao conferir as chamadas de rede nas ferramentas de desenvolvedor do navegador.
  5. Configurar e gravar eventos. Defina e envie eventos personalizados no carregamento da página ou em interações do usuário usando o JavaScript nativo ou o Google Tag Manager.
  6. Definir o Customer User ID. Defina um CUID para unificar a atividade da web com outras plataformas.
  7. Gerenciar a privacidade. Controle a mensuração opt-in ou opt-out e configure a segurança e os filtros de dados (Política de Segurança de Conteúdo e descarte dos parâmetros de consulta).
  8. Referência de cookies do Web SDK. Analise os cookies que o Web SDK configura ou usa, incluindo propósito, duração e alcance.

Integre o SDK com um agente de programação com IA

Em vez de integrar manualmente o SDK web (veja as etapas abaixo), use uma ferramenta de codificação com IA (Cursor, Claude Code, Codex, Copilot) para implementar toda a integração para você. Copie o prompt, substitua os dois placeholders e cole-o na sua ferramenta de programação com IA.

Essa abordagem simplifica e cobre todas as etapas abaixo, mas você ainda precisa garantir que o SDK funcione corretamente e revisar sua configuração de privacidade depois.

Antes de copiar o prompt, substitua:

  • <WEB_SDK_ID>: Na AppsFlyer, acesse Configurações do aplicativo, selecione seu aplicativo web (o domínio do seu site com o prefixo "website-") e copie o ID do SDK web em Autenticação do SDK.
  • <PRODUCTION_URL>: A URL do seu site em produção, usada para verificação pós-implantação.

A ferramenta de IA cria um plano de eventos a partir da sua base de código e aguarda sua aprovação antes de implementá-lo. Revise o plano, confirme que os valores de receita e moeda aparecem apenas em eventos de receita realizada e verifique os resultados usando as etapas de verificação pós-implantação no prompt.

Prompt de implementação com IA 
# **AppsFlyer Web SDK - prompt de implementação com IA**

Copie o prompt abaixo para uma ferramenta de programação com IA que possa editar seu projeto (Cursor, Claude Code, Codex, Copilot). Antes de copiar, substitua dois placeholders:

  - <WEB_SDK_ID> - no AppsFlyer, acesse My Apps, selecione seu aplicativo web (seu domínio com o prefixo website-) e copie o ID do SDK web (também chamado de Web Dev Key) em SDK authentication.
  - <PRODUCTION_URL> - a URL do seu site em produção, usada para verificação após a implantação.

Implemente o AppsFlyer Web SDK (pixel de atribuição web) neste site, incluindo os eventos que importam para a minha mensuração de marketing.

Meu ID do SDK web: <WEB_SDK_ID>

Minha URL de produção: <PRODUCTION_URL>

## Etapa 0 - Validação da configuração

Se o ID do SDK web acima estiver ausente ou ainda for um placeholder, responda SOMENTE com uma solicitação curta pedindo esse dado (no AppsFlyer: My Apps > o aplicativo com prefixo "website-" > SDK authentication > ID do SDK web) e pare. Não escreva nenhum código até que ele seja fornecido. Se a URL de produção estiver ausente, solicite-a na mesma resposta - ela é necessária para a verificação após a implantação.

Trabalhe com diffs mínimos: infira os caminhos dos arquivos a partir do repositório, altere apenas o que esta integração exige e preserve os padrões existentes do projeto.

## Etapa 1 - Analise o site primeiro

Antes de escrever qualquer código, revise a base de código e crie você mesmo o plano de eventos - não me peça para listar os eventos:

1. Identifique o framework (HTML puro, React, Next.js, Vue etc.) e onde o <head> do documento é gerenciado.

2. Descubra as ações de conversão no código. Procure, em ordem de confiabilidade:

   - Chamadas de analytics existentes: eventos do gtag()/GA4, Segment analytics.track(), fbq('track'), dataLayer.push (incluindo objetos de ecommerce) - elas mostram tanto as ações quanto onde os valores (valor, moeda, ID do pedido) já estão.

   - Lógica de comércio: módulos de checkout/carrinho, páginas/rotas de confirmação do pedido e de agradecimento, callbacks de sucesso do pagamento.

   - Lógica de autenticação: fluxos de cadastro e login, e onde o ID interno do usuário fica disponível no código do cliente.

   - Formulários e CTAs: formulários de lead, início de assinatura/período de teste, downloads.

   - Produtos que não são de comércio / ferramentas: se o site não tiver fluxos de compra, carrinho, checkout, cadastro ou login, não invente eventos de comércio ou autenticação. Identifique as ações reais do produto (por exemplo, gerar, copiar, exportar, download, compartilhar, selecionar um modelo, editar parâmetros) e mapeie-as para nomes de evento descritivos personalizados.

3. Mapeie cada ação descoberta para o nome padrão da AppsFlyer:\n\n   - completed order / "Order Completed" / purchase_success -> af_purchase (com eventRevenue)\n\n   - signup / register / account created -> af_complete_registration\n\n   - login / signin -> af_login\n\n   - add to cart / "Product Added" -> af_add_to_cart (af_price, sem eventRevenue)\n\n   - begin checkout / "Checkout Started" -> af_initiated_checkout (af_price, sem eventRevenue)\n\n   - product or content view -> af_content_view\n\n   - subscription started -> af_subscribe; free trial started -> af_start_trial\n\n   - search -> af_search\n\n   Tudo o que não tiver equivalente padrão deve manter um nome personalizado descritivo.

4. Para cada evento, identifique no código a fonte exata de: o valor efetivamente cobrado (para af_purchase), a moeda, o ID do pedido/transação e o ID do usuário. Reutilize as mesmas fontes de dados que a análise existente já usa.

5. Verifique se existe uma plataforma de gerenciamento de consentimento (CMP), como OneTrust ou Didomi. Sinalize também qualquer controle caseiro de consentimento ou preferência de privacidade armazenada pelo site e me pergunte como isso deve controlar a mensuração, em vez de decidir por conta própria.

Observação: a análise existente serve apenas como insumo de descoberta — implemente os eventos da AppsFlyer como chamadas diretas de AF(), sem retransmiti-los pelo Segment/GA4 com os nomes deles.

Depois, mostre o plano de eventos proposto em uma tabela (nome do evento da AppsFlyer, gatilho + arquivo, fonte de receita/af_price, fonte do ID de deduplicação) e aguarde minha aprovação antes de implementar. Sinalize qualquer evento em que você não conseguiu localizar a fonte do valor, em vez de adivinhar.

## Etapa 2 - Instalar o snippet do SDK

Adicione este snippet perto do topo de <head> em todas as páginas, com meu ID do SDK web:

<script>

!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){

(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},

t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,

o.src="https://websdk.appsflyer.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),

p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "<WEB_SDK_ID>"}})

</script>

Regras rígidas:

- Use o snippet exatamente como está. NÃO o reescreva como um componente personalizado nem como um módulo wrapper. SDKs encapsulados podem enviar eventos personalizados, enquanto a visita automática (o evento LOAD do SDK) nunca é disparada — o site então mostra zero visitas e nada pode ser atribuído.

- O SDK deve carregar exatamente UMA vez por carregamento de página. Em React/Next.js, proteja contra re-renderizações e montagem dupla (por exemplo, carregue-o no template HTML/document raiz, não dentro de um componente que monta novamente). Carregamentos múltiplos podem fazer com que o SDK pare de funcionar.

- Se o site já carrega o SDK da AppsFlyer por um gerenciador de tags (GTM), NÃO o adicione também no código — um carregador, não dois. Avise-me se encontrar uma tag existente da AppsFlyer.

- NÃO implemente manualmente um evento de visualização de página nem de visita. O SDK registra visitas automaticamente no carregamento; um evento "page_view" criado manualmente nunca contará como visita.

- A chave de configuração é webAppId (não appId).

- Se o site aplicar uma Content Security Policy rígida com nonces, adicione o nonce à tag inline do snippet E certifique-se de que a política inclua 'strict-dynamic' — o snippet injeta o script do SDK dinamicamente e, sem 'strict-dynamic', uma política apenas com nonce o bloqueia.

## Etapa 3 - Implementar eventos

Formato da chamada do evento:

AF('pba', 'event', {

  eventType: 'EVENT',            // sempre a string literal 'EVENT'

  eventName: 'af_purchase',

  eventRevenue: 49.99,           // nível superior - apenas na receita realizada

  eventRevenueCurrency: 'USD',   // nível superior - código ISO de 3 letras, o padrão é USD se omitido

  eventValue: {                  // metadados JSON, máximo de 1000 caracteres

    "af_order_id": "TXN-12345",

    "af_customer_event_id": "evt-abc-001"

  }

});

Regras do evento - siga exatamente estas:

1. Use nomes padrão de eventos da AppsFlyer para que os relatórios entre plataformas e os funis fiquem alinhados: af_purchase, af_complete_registration, af_login, af_add_to_cart, af_initiated_checkout, af_content_view, af_subscribe. Se existir um app mobile, use os MESMOS nomes de eventos do SDK mobile. Nunca adicione sufixos de plataforma como "_web".

   Exceção - linhas de compra distintas: se o site vender claramente níveis ou categorias de produto distintos que precisem de detalhamentos separados no dashboard (por exemplo, dois produtos de assinatura), proponha nomes divididos no plano de eventos (af_purchase_<tier>) em vez de um evento genérico e explique o motivo. A segmentação apenas por eventValue não aparece nas visualizações padrão do dashboard. Nunca envie AMBOS — um evento de nível de tier e um evento genérico — para a mesma compra; isso duplica os dados.

2. A receita vai SOMENTE no campo eventRevenue de nível superior e SOMENTE em eventos nos quais houve movimentação real de dinheiro (compra concluída, assinatura concluída, reserva confirmada). Os valores dentro de eventValue (af_revenue, revenue, price, amount, total) NUNCA são contabilizados como receita — colocar a receita ali é o erro de implementação número 1 e resulta em US$0 de receita em todas as compras.

3. Sempre envie eventRevenueCurrency com eventRevenue quando a moeda não for USD — caso contrário, todos os valores serão registrados como USD.

4. Envie o valor real de uma transação única como um número simples: sem símbolos de moeda, sem centavos como unidades, sem duplicação de total do carrinho + item, sem valor vitalício.

5. Para valores monetários que NÃO são receita realizada (valor de adicionar ao carrinho, valor de checkout iniciado, preço visualizado): NÃO defina eventRevenue. Coloque o valor em "af_price" e a moeda em "af_currency" dentro de eventValue. Enviar eventRevenue em af_initiated_checkout e em af_purchase faz a receita ser contabilizada em duplicidade.

6. Nas compras, inclua "af_order_id" (o ID da transação) dentro de eventValue. Se a base de código não tiver um ID de transação real nesse ponto, informe isso no plano de eventos em vez de substituir por um placeholder.

7. Inclua um "af_customer_event_id" exclusivo dentro de eventValue em cada evento de conversão. O mesmo nome de evento nunca deve disparar duas vezes com o mesmo ID — gere-o por ação e previna que novas renderizações da SPA façam o handler disparar duas vezes. Isso também remove duplicações em relação a qualquer fluxo server-side (S2S) que envie as mesmas conversões.

8. Um evento por ação do usuário. Não emita dois nomes para a mesma ação e não retransmita a mesma ação pela AppsFlyer e por uma camada de encaminhamento com nomes diferentes.

9. Para carrinhos com vários itens, adicione um array "af_order_info" dentro de eventValue — um objeto por item com as chaves: sku, receita (preço por unidade), qty, content_name, content_type, content_category, brand. Em uma compra, o eventRevenue de nível superior continua trazendo o total do pedido.

10. Os eventos devem disparar depois que o snippet do SDK tiver sido carregado na página. Para conversões que terminam em uma página de confirmação/agradecimento, dispare o evento no carregamento dessa página; para ações na própria página (cliques em botões em uma SPA), dispare a partir do handler da ação.

11. Payloads enxutos — omita campos irrelevantes:\n\n    - NÃO inclua eventRevenue nem eventRevenueCurrency, a menos que o dinheiro tenha realmente mudado de mãos nesse evento. Nunca envie eventRevenue: 0 nem uma moeda padrão "por via das dúvidas".

    - NÃO inclua eventCategory, eventLabel nem quaisquer campos no estilo GA/Segment. Eles não fazem parte da API de eventos do SDK web da AppsFlyer.

    - Dentro de eventValue, omita chaves cujos valores sejam string vazia, null, undefined ou false (a menos que o próprio valor false tenha significado para essa propriedade).

    - Se um parâmetro não for relevante para um evento específico, não o inclua no payload. Prefira um objeto mínimo, com apenas os campos aplicáveis.

    - Colunas vazias de receita/moeda nos relatórios da AppsFlyer não significam que o cliente deva enviar zeros ou valores padrão; deixe esses campos ausentes.

## Etapa 4 - Defina o Customer User ID (CUID)

Imediatamente depois que um usuário fizer login ou se cadastrar (e no carregamento de páginas em que o usuário já estiver autenticado), chame:

AF('pba', 'setCustomerUserId', '<o ID interno do usuário, como string>');

Regras:

- Use o MESMO identificador que os apps mobile passam para setCustomerUserId, se existirem apps mobile — é isso que conecta a jornada de um mesmo usuário entre web e mobile.

- Use um ID interno opaco. Nunca um endereço de e-mail, número de telefone ou outros dados de identificação pessoal.

- Chame isso o quanto antes; eventos disparados antes disso não levarão o CUID.

- setCustomerUserId, por si só, não cria um evento reportável. Dispare também af_complete_registration no cadastro e af_login no login, depois que o CUID for definido, para que esses eventos o incluam.

## Etapa 5 - Consentimento (somente se houver uma CMP)

Se o site tiver uma plataforma de gerenciamento de consentimento:

- Inicialize o SDK com a mensuração desativada: {pba: {webAppId: "<WEB_SDK_ID>", measurementStatus: false}}

- Quando o consentimento for concedido: window.AF_SDK.PLUGINS.PBA.enableMeasurement()

- Quando o consentimento for revogado: window.AF_SDK.PLUGINS.PBA.disableMeasurement()

Observações:

- Esses métodos do plugin só existem depois que o script do SDK termina de carregar, ao contrário de AF(), que é um stub de enfileiramento disponível imediatamente. Trate essa ordem corretamente.

- Se a mensuração começar desativada, nenhuma visita será registrada até que o consentimento seja concedido. Deixe essa compensação explícita antes de implementá-la.

Se não houver CMP, use o snippet simples (a mensuração fica ativada por padrão).

## Etapa 6 - Verifique

### 6a. Verificação local (durante a implementação)

Execute o projeto, automatize um navegador (Playwright/Puppeteer ou uma ferramenta de navegador, se tiver uma) e capture TANTO o payload da solicitação QUANTO o status da resposta HTTP de cada chamada para domínios da AppsFlyer. Verifique:

- A solicitação do carregador do SDK retorna 200 e é disparada exatamente uma vez por carregamento de página (navegue entre páginas e renderize novamente os componentes para comprovar que não há carregamento duplo).

- Uma solicitação é disparada no carregamento da página com eventType "LOAD" e um afWebUserId preenchido, e a resposta dela é 2xx. Essa é a visita; sem isso, nada será atribuído.

- Cada conversão implementada produz exatamente uma solicitação de evento, cada uma retornando 2xx, com eventRevenue e eventRevenueCurrency no nível superior nas compras, e af_customer_event_id presente e exclusivo.

- Depois de um login simulado, as solicitações subsequentes incluem o ID de usuário do cliente.

Uma solicitação capturada NÃO é prova de sucesso. Um evento cuja resposta é 4xx foi rejeitado e nunca aparecerá nos relatórios. Informe o código de status de cada evento que você disparar e nunca descreva um evento como verificado sem ele.

Se você não puder executar um navegador, verifique estaticamente: o snippet tem um único ponto de inserção que não pode ser montado duas vezes; cada manipulador de evento é disparado exatamente uma vez por ação; receita e moeda são campos de nível superior; setCustomerUserId pode ser acessado em todos os caminhos de entrada autenticados. Diga claramente que não foi possível observar o status de resposta.

### 6b. Verificação pós-implantação no domínio real (obrigatória)

Execuções locais comprovam o caminho do código, não a página de produção. Pipelines de build e processadores de ativos podem remover, adiar ou realocar scripts inline, então verificar o arquivo-fonte não é suficiente. Após a implantação:

- Busque a URL de produção e confirme que o snippet está presente no HTML SERVIDO.

- Carregue a página de produção em um navegador e repita todas as asserções da seção 6a em relação a ela.

- Confirme que o parâmetro de consulta af_id nas solicitações de saída contém exatamente o ID do SDK web — um ID incorreto ou truncado significa que os eventos são enviados com um ID que não existe na minha conta e, sem aviso, não chegam a lugar nenhum.

- Use um ID de usuário de cliente dedicado para QA (por exemplo, qa_<yyyymmdd>_01) para que a execução possa ser isolada depois nos dados brutos.

Se eu ainda não tiver implantado, diga que a seção 6b ainda está pendente e me dê os comandos e as asserções exatos para executar quando eu fizer isso.

### 6c. Registro de QA

Produza uma tabela da execução de verificação para que as linhas possam ser associadas aos dados brutos da AppsFlyer depois, com uma linha por evento: carimbo de data/hora UTC, nome do evento, CUID, af_order_id, af_customer_event_id, status HTTP. Informe o horário UTC de início e término de toda a execução e, se souber, o horário UTC da implantação.

## Etapa 7 - Lendo os dados de volta

Inclua no relatório um guia explícito para confirmar os eventos na AppsFlyer, porque visitas e conversões são tipos de registro diferentes e é fácil confundi-los:

- As visitas são registradas automaticamente e aparecem nos dados em nível de evento como linhas SESSION, com o nome do evento VAZIO e receita zero — esse é o esquema, não uma falha. As primeiras visitas e revisitas aparecem nos dados em nível de conversão (FIRST_VISIT / REVISIT), não como eventos nomeados. Uma exportação com escopo de sessões nunca pode conter eventos in-app, por mais correta que a implementação seja.

- As conversões implementadas aparecem como linhas separadas, com o nome do evento preenchido (af_purchase, af_login e assim por diante), com receita apenas nas linhas de compra.

- Quaisquer dados extraídos para uma janela de tempo ANTES da implantação não podem conter os novos eventos. Informe-me o horário UTC da implantação e diga para consultar somente depois dele. Ressalte que os campos de tempo de atribuição podem ser muito mais antigos do que o horário do evento e se referir a uma visita anterior, não a esta execução.

- Informe a latência esperada de relatório e avise para eu não interpretar um relatório vazio dentro dessa janela como falha.

- Diga qual é o filtro exato a usar para encontrar a execução de QA da seção 6c (janela de tempo mais o CUID de QA) e como é um resultado saudável.

- Se os eventos retornarem 2xx, mas ainda assim não aparecerem após a janela de latência, diga com clareza que se trata de um problema do lado da conta (evento não habilitado para o aplicativo web, escopo de relatório ou acesso aos dados), e não de um defeito no código, e liste o que devo verificar na interface da AppsFlyer.

## Saída

Quando terminar, me dê:

- Uma tabela de cada evento implementado: nome, local de acionamento (arquivo), tratamento de receita, ID de deduplicação.

- Onde o snippet foi instalado e como o carregamento único é garantido.

- Onde setCustomerUserId é chamado.

- A tabela de registro de QA da seção 6c e uma divisão clara entre o que você mesmo verificou (com status de resposta) e o que permanece como checklist manual de QA para mim (página a abrir, ação a realizar, solicitação e status esperados).

- O guia da Etapa 7 para ler os dados novamente.

- Tudo o que você não conseguiu implementar ou precisa que eu forneça (por exemplo, onde fica o ID do usuário, qual campo de valor da compra corresponde ao total final cobrado, qualquer fonte de valor que você se recusou a adivinhar).

Não implemente nada além da integração do SDK web da AppsFlyer descrita aqui.

1. Receber suas chaves

Obtenha o ID do Web SDK (também conhecido como Web Dev Key):

  1. No menu superior na plataforma da AppsFlyer, vá para Configurações do aplicativo.
  2. No seletor de aplicativos, selecione seu aplicativo web (domínio do site com o prefixo "website-").
  3. Em Autenticação do SDK, copie o Web SDK ID.

Obtenha a chave do Smart Banner (se necessário):

  1. Na AppsFlyer, no menu lateral, acesse Engajar> Web-to-app > Smart Banners.
  2. Copie a chave do Smart Banner necessária.

2. Selecionar um code snippet

Escolha o snippet que corresponde ao seu tipo de integração e requisitos de segurança. Duas opções estão disponíveis:

  • Web SDK padrão: a integração padrão.
  • Verificação avançada de SDK: uma integração aprimorada que inclui segurança da cadeia de suprimentos para o Web SDK. Use-a para adicionar uma camada extra de segurança contra comprometimento de CDN, sequestro de DNS e ataques intermediários (MiTM).

Se você estiver fazendo a transição do Web SDK padrão para a verificação avançada do SDK, substitua o snippet existente pelo novo. O novo snippet não deve ser adicionado em conjunto com o snippet existente.

Web SDK padrão

Use este snippet para implementar a integração do Web SDK padrão. Insira-o perto do topo da tag em todas as páginas onde você deseja que o SDK seja carregado.

Sem Smart Banners
<html>
<head>
    <script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyersdk.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "WEB_DEV_KEY"}})
    </script>
    <script>
        // Using the fetch API to send the user email to the server
        // and get the unique user id in return	
        window.onload = function () {
            var userEmail = localStorage.getItem('user_email');
            fetch('users/' + userEmail).then(function (res) {
                   res.text().then(function (id) {
                    console.log(id);
                    AF('pba', 'setCustomerUserId', id);
                });
            });
        }  </script> 
     </head> 
     <body> 
        <h1>Thank You for Signing Up!</h1> 
     </body> 
</html>
Com Smart Banners
<html>
<head>
    <script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyersdk.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "WEB_DEV_KEY"}})
    </script>
    <script>
        function storeUserEmail() {
            var userEmail = document.getElementById('email').value;
            localStorage.setItem('user_email', userEmail);
        }
    </script>
</head>
<body>
    <h1>Cadastre-se</h1>
    <form onsubmit="storeUserEmail()" action="/signup" method="post">
        <div><label>Nome</label><input type="text" name="name" id="name"></div>
        <br/>
        <div><label>E-mail</label><input type="email" name="email" id="email"></div>
        <br/>
        <input type="submit" id="submit">
    </form>
</body>
</html>

Verificação avançada de SDK

A verificação avançada de SDK adiciona segurança da cadeia de suprimentos ao Web SDK. Ela garante que o código em execução nos navegadores dos seus usuários seja exatamente o que a AppsFlyer publicou. O código-fonte do SDK em si é idêntico à integração padrão; apenas os mecanismos de entrega e verificação diferem.

A verificação avançada de SDK:

  • Adiciona uma camada extra de segurança contra comprometimento de CDN, sequestro de DNS e ataques intermediários (MiTM).
  • Adiciona aproximadamente 250ms ao tempo de carregamento do SDK.

Esse recurso é opcional. A integração padrão permanece totalmente disponível e é o padrão de mercado para analytics pixels de terceiros. A verificação avançada do SDK fornece uma camada adicional de proteção além do padrão.

Se o seu site impõe uma Política de Segurança de Conteúdo (CSP) usando nonce, consulte Política de Segurança de Conteúdo (CSP) em “Gerenciar privacidade” para acessar a variante nonce-extended do snippet.

Sem Smart Banners
<script>
  // Queue — buffers AF() calls until the SDK is ready
  window. AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  // Replace WEB_DEV_KEY with your Web SDK ID
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["pba"]
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>
Com Smart Banners
<script>
  // Queue — buffers AF() calls until the SDK is ready
  window. AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  // Replace WEB_DEV_KEY with your Web SDK ID
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["banners", "pba"]
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

3. Implementar o snippet

Implemente o snippet escolhido na Etapa 2 usando um dos seguintes métodos. Certifique-se de que o SDK seja carregado uma vez por cada página.

Opção A: Adicionar diretamente ao seu site

Repita os seguintes passos em todas as páginas:

  1. No snippet da Etapa 2, substitua WEB_DEV_KEY (e, se aplicável, YOUR_BANNER_KEY) pelo ID do Web SDK.
  2. Cole o snippet perto da parte superior da tag do site.
Opção B: Implementar pelo Google Tag Manager (GTM)

Certifique-se de que o SDK seja carregado uma vez por cada página e configure-o para carregar assim que a página abrir usando a prioridade do GTM.

  1. Abra o Google Tag Manager.
  2. Crie uma nova tag para o Web SDK da AppsFlyer.
  3. Selecione o tipo de tag HTML personalizado.
  4. Dê um nome significativo à etiqueta.
  5. Cole o snippet da Etapa 2 em Configuração de tags.
  6. Clique em Guardar.
  7. Adicione um gatilho:
    • Para todas as páginas:
      1. Clique em Adicionar gatilho.
      2. Selecione Todas as páginas.
      3. Clique em Guardar.
      4. Insira um nome de tag e clique em Salvar.
    • Para páginas específicas:
      1. Clique em Salvar tag.
      2. Na janela principal do GTM, selecione Gatilhos. Clique em Novo.
      3. Clique no ícone de caneta.
      4. Escolha o tipo de gatilho Visualização de página.
      5. Selecione Algumas visualizações de página.
      6. Defina a página e as condições de gatilho conforme necessário.
      7. Clique em Guardar.
      8. Associe o gatilho à tag do Web SDK da AppsFlyer.
        1. Na janela principal do GTM, selecione Gatilhos.
        2. Selecione a etiqueta que criou anteriormente.
        3. No painel de gatilhos, clique no ícone de edição.
        4. Selecione o gatilho da visualização da página que criou anteriormente.
        5. Clique em Guardar.

Os modelos personalizados do GTM não são compatíveis com a verificação avançada de SDK, porque o ambiente sandbox não permite configurar o atributo integrity necessário para a verificação. Em vez disso, use o tipo de tag HTML personalizado.

Opção C: Implementar via Adobe Launch Tag Manager

Crie uma propriedade no Adobe Experience Cloud

  1. Acesse Adobe Experience Cloud > Inicialização.
  2. Em Adobe Experience Cloud Launch, clique em Ir para Inicialização.
  3. Clique em Nova propriedade.
  4. Nomeie a propriedade.
  5. Em Plataforma, selecione Web.
  6. Insira o domínio do seu site.
  7. Clique em Guardar.

Adicione o snippet à propriedade do Adobe Launch

  1. Na página Propriedade da minha web, selecione a aba Regras.
  2. Dê um nome à regra. Recomenda-se carregar o Web SDK.
  3. Na seção IF, em Eventos, clique em Adicionar.
    • Em Tipo de evento, selecione Core - DOM Ready.
    • Clique em Manter alterações.
  4. Na seção THEN, em Ações, clique em Adicionar .
    • Em Tipo de ação, selecione Código personalizado.
    • Selecione JavaScript > Abrir Editor e cole o snippet da Etapa 2 (sem linhas extras).
    • Clique em Manter alterações para fechar o editor de código.
  5. Clique em Guardar.

Adicione a tag Adobe Launch ao site

  1. Na página Propriedade da minha web, selecione a aba Ambientes .
  2. Encontre a linha com o ambiente no qual você deseja publicar (desenvolvimento ou produção).
  3. Na coluna Instalar, clique no ícone de seleção na linha relevante.
  4. Na caixa de diálogo Instruções de instalação da web, copie o snippet de código do script e feche a caixa de diálogo.
  5. Cole o snippet de código na tag “head” do site.

Publicar o ambiente Adobe Launch

  1. Na página Propriedade da minha web, acesse a aba Publicação .
  2. Na seção  Desenvolvimento, clique em Adicionar nova biblioteca.
    • Dê um nome à biblioteca e escolha um ambiente.
    • Em ALTERAÇÕES DE RECURSO, clique em Adicionar um recurso.
    • Clique em Regras > Carregar Web SDK > Mais recentes > Selecionar e criar uma nova revisão.
    • Clique em Guardar.
  3. Na seção Desenvolvimento:
    • Ao lado da biblioteca recém-criada, clique no menu Ação (3 pontos) > selecione Construir para Desenvolvimento.
    • Clique no menu de ação novamente > selecione Enviar para aprovação.
  4. Na seção Enviado:
    • Clique no menu de ação > selecione Construir para Staging.
    • Clique novamente no menu de ação > selecione Aprovar para publicação.
  5. Abaixo da seção Aprovado:
    • Clique no menu de ação e selecione Criar e publicar em produção.

4. Verificar se o SDK está funcionando

Após a instalação, certifique-se de que o SDK está enviando solicitações ao conferir as chamadas de rede nas ferramentas de desenvolvedor do navegador.

DevTools screenshot

Para verificar se o SDK está funcionando, siga estes passos:

  1. Abra o site.
  2. Abra as ferramentas de desenvolvimento do navegador.
  3. Vá para a aba (A) Rede.
  4. Atualize a página.
  5. Filtrar por (B) appsflyer. Filtre por duas solicitações:
    • Carregador do SDK: URL da solicitação começa com https://websdk.appsflyersdk.com. Isso confirma que o script do SDK foi carregado corretamente.
    • Dados de evento: URL da solicitação começa com https://wa.appsflyer.com/events. Isso confirma que o SDK está enviando dados de evento para a AppsFlyer.
  6. Selecione a mensagem eventos (C): a chamada wa.appsflyer.com.
  7. Sob os headers, verifique (D):
    • O URL da solicitação começa com https://wa.appsflyer.com/events?site-id=.
    • Parâmetro de consulta site_id = WEB_DEV_KEY.
    • O código de status é 200.
  8. Verifique se site_id corresponde a WEB_DEV_KEY no AppsFlyer > menu superior > Meus aplicativos.
  9. Certifique-se de que o SDK seja carregado apenas uma vez. O carregamento múltiplo do SDK pode fazer com que ele pare de funcionar.

Para confirmar visualmente, em tempo real, a instalação do SDK web e validar que seus eventos são disparados corretamente, use a página de teste do SDK web.

5. Configurar e gravar eventos

Depois de inicializar o Web SDK, você deixa de mensurar visitas básicas para capturar ações específicas do usuário. Nessa seção, você aprenderá como configurar e gravar eventos personalizados, como compras ou cadastros, usando JavaScript nativo ou Google Tag Manager.

Configurar eventos

Os eventos são fundamentais para a mensuração da web, representando ações específicas do usuário que geram valor para o seu negócio. Para registrar essas interações, você precisa definir a lógica e os parâmetros para cada evento, garantindo que os parâmetros corretos, como receita e metadados personalizados, sejam enviados para a plataforma da AppsFlyer.

Exemplo de evento: evento de compra com receita associada

AF('pba', 'event', {eventType: 'EVENT', eventName: 'purchase', eventRevenue: 12, eventValue: {"key1": 123, "key2": "name", "af_customer_event_id": "evt-abc-001"}});
Tabela de parâmetros de eventos do Web SDK
Nome do parâmetro Obrigatório Descrição
eventType Sim Tipo de evento. Formato: string. Sempre preencha esse parâmetro com EVENT. Exemplo: eventType: "EVENT"
eventName Sim Nome do evento. Formato: string. Exemplo: compra; assinatura
eventRevenue Não Receita atribuída a um evento de conversão. Formato: float
eventRevenueCurrency Não Moeda da receita. Código de moeda ISO 4217 de 3 caracteres. Padrão: USD. Formato: string
Valor do evento Não Mapa de parâmetros da descrição de eventos. Use esse parâmetro para enviar eventos in-app avançados como SKU do produto e preço do item. Formato: JSON. Exemplo: {"sku": "ABC123", "color": "blue", "unit_price": 3.99, "currency": "USD"} Limite: 3000 caracteres (truncado se excedido).
Registrar eventos no carregamento da página

Essa é a abordagem padrão para conversões que terminam com um redirecionamento, como uma página de confirmação ou agradecimento.

Você pode implementar esse gatilho com um método de carregamento de janela ao seu JavaScript nativo ou com um gatilho de visualização de página no Google Tag Manager.

Os exemplos de código abaixo são para fins ilustrativos. Não use o código original. Adapte-o à estrutura específica do seu site.

Exemplo: Gravação de eventos via Web SDK da AppsFlyer

Essa abordagem é ideal para gravar conversões que ocorrem através de redirecionamentos, como uma página de agradecimento para uma assinatura de newsletter.

Caso de uso: Um usuário assina uma newsletter e é redirecionado para uma página de confirmação. Você deve registrar o evento de assinatura assim que a página estiver visível.

Exemplo de carregamento nativo de página:

window.onload = function(){
  AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category': 'holiday_promotion'}, eventName: 'subscription'});
}

Como funciona

  1. A página carrega o conteúdo necessário.
  2. Depois do carregamento completo da janela (window.onload), o script chama automaticamente o método AF().
  3. O evento de assinatura, juntamente com os metadados associados (categoria e rótulo), é enviado diretamente para a AppsFlyer.
Exemplo: Gravação de eventos via GTM

Essa abordagem é usada para registrar conversões bem-sucedidas, como uma assinatura de newsletter, disparando uma tag no carregamento de uma página de agradecimento.

1. Crie uma página de agradecimento

A estrutura de HTML carrega o GTM que, por sua vez, carrega o Web SDK. Ela também mostra como os dados podem ser disponibilizados ao GTM através de funções ou localStorage.

<html>
<head>
    <script>
        // O Google Tag Manager carrega o SDK web
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXX');
    </script>
    <script>
        function getResponseFromServer() {
            return JSON.stringify({ action: 'subscribe', category: 'site actions', label: userEmail })
        }
        localStorage.setItem('data', JSON.stringify({ action: 'subscribe', category: 'site actions', label: 'user@email.com' }));
    </script>
</head>
<body>
    <h1>Obrigado por se inscrever na nossa newsletter</h1>
</body>
</html>

2. Configure a tag do GTM

  1. Crie uma nova tag no GTM e selecione o tipo de tag HTML personalizado.
  2. Dê um nome diferente (exemplo: "Evento de assinatura da AppsFlyer").

  3. Cole o seguinte script na área de texto HTML:

    AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'subscription'});
  4. Abra Configurações avançadas > Sequenciamento de tags. Certifique-se de que está configurado para disparar após a tag de inicialização principal do Web SDK.
  5. Defina um gatilho para que a tag seja ativada na visualização de página da página de agradecimento.
Registrar eventos na interação do usuário

Use isso para medir ações sem recarregar a página (cliques em botões, downloads, adicionar ao carrinho).

Essas interações costumam ser gerenciadas por meio de um ouvinte de clique a um elemento HTML nativo ou através de variáveis do Google Tag Manager para identificar e mensurar IDs de elementos específicos ou seletores CSS.

Os exemplos de código abaixo são para fins ilustrativos. Não use o código original. Adapte-o à estrutura específica do seu site.

Exemplo: Gravação de eventos via Web SDK da AppsFlyer

Use esse método para medir ações específicas que os usuários realizam em uma página, como clicar em um botão de checkout ou download.

Caso de uso: Você opera um site de eCommerce e deseja capturar um evento de checkout no momento em que um usuário clica no botão Checkout no carrinho de compras.

Exemplo de interação de usuário nativo:

<html>
<head>
    <script>
        window.onload = function () {
            document.getElementById('checkout').addEventListener('click', function () {
                AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'checkout'});
            });
        }
    </script>
</head>
<body>
    <h1>Carrinho de compras</h1>
    <button id='checkout'>Checkout</button>
</body>
</html>

Como funciona

  1. Quando a página é carregada, o script anexa um ouvinte de clique ao elemento com a ID checkout.
  2. Quando o usuário clica no botão de checkout, a função de callback é ativada.
  3. A função pode recuperar dados relevantes (de localStorage, por exemplo) e enviá-los para o método de AF().
  4. Em seguida, o SDK envia o evento de checkout para a plataforma da AppsFlyer.
Exemplo: Gravação de eventos via GTM

Esse método captura ações específicas, como clicar em um botão de checkout, usando as variáveis e os gatilhos integrados do GTM.

1. Configure uma página de checkout

<html>
<head>
    <script>
        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-XXXX');
    </script>
</head>
<body>
    <h1>Carrinho de compras</h1>
    <button id='checkout'>Checkout</button>
</body>
</html>

2. Configure variáveis e gatilhos no GTM

  1. No GTM, clique em Variáveis > Configurar e ative Elementos de clique na lista de variáveis incorporadas.
  2. Crie uma nova variável definida pelo usuário (tipo: Todos os elementos).
  3. Crie um novo gatilho:
    • Tipo de gatilho: Clique - Todos os elementos.
    • Esse gatilho dispara em: Alguns cliques.
    • Condição: Elementos de clique corresponde ao seletor CSS #checkout.

3. Crie a tag de interação

  1. Crie uma nova tag HTML personalizado para a ação do checkout.

  2. Cole o script de interação:

    <script>
  AF('pba', 'event', {eventType: 'EVENT', eventValue: {'category' : 'holiday_promotion'}, eventName: 'checkout'});
</script>
  3. Atribua o gatilho "clique do checkout" criado ne etapa anterior.
Práticas recomendadas para a implementação de eventos

Para garantir a precisão dos dados e um envio bem-sucedido, lembre-se destes requisitos técnicos:

  • Ordem de carregamento: Verifique se a tag de funções do Web SDK está totalmente carregada antes de fazer chamadas de evento.
  • Formatação de dados: Não inclua caracteres especiais nos valores de eventos. Exemplo: use valores numéricos para receita em vez de símbolos de moeda (use 10.50 em vez de $10.50).
  • Limites de string: Mantenha suas strings eventValue concisas; valores com mais de 3000 caracteres serão truncados.
  • Desduplicação de eventos: Recomendamos enviar af_customer_event_id em eventValue, com um valor único por evento. Isso é ainda mais importante quando você envia o mesmo evento pelo SDK web e pela API server-to-server (S2S). A AppsFlyer encaminha esse valor para a ad network, que o usa para desduplicar o evento do lado do servidor que recebe da AppsFlyer em relação ao mesmo evento que recebeu do próprio pixel.
  • Posicionamento da receita: Preencha eventRevenue apenas em eventos nos quais o dinheiro realmente mudou de mãos, como uma compra ou uma assinatura confirmada. Para eventos que têm um valor monetário, mas não são receita realizada (por exemplo, adicionar ao carrinho, checkout iniciado ou visualização de conteúdo), use af_price e af_currency em eventValue. Enviar eventRevenue tanto no checkout quanto na compra faz a receita ser contabilizada em dobro em todos os relatórios.
  • Nomenclatura de eventos: Não adicione sufixos de plataforma, como _web, aos nomes dos eventos. Plataforma já é uma dimensão no dashboard e nos dados brutos. Use os mesmos nomes de eventos do seu app mobile para manter os relatórios entre plataformas unificados.

6. Definir o Customer User ID

Após implementar a mensuração de eventos, configure uma identidade para vincular a atividade web com outras plataformas (mobile, PC, CTV). Use setCustomerUserId para obter uma visão unificada da jornada do usuário entre as plataformas.

Regras principais

  • Consistência: Use o mesmo valor de CUID das suas implementações de apps mobile (ver setCustomerUserId mobile para: iOS, Android, Unity).
  • Tempo: Você pode enviar o CUID em qualquer fase (após o login ou cadastro, por exemplo). Defina o CUID assim que tiver acesso a ele. Na maioria das vezes, isso significa que é necessário esperar que o usuário se identifique através do login ou do cadastro.
  • Sintaxe: Envie o valor como uma string (entre aspas). Exemplo: AF('pba', 'setCustomerUserId', '663274')
  • Privacidade: Não inclua informações pessoais identificáveis (PII), como endereços de e-mail ou números de telefone.
Exemplo: Configurando o CUID após o cadastro (nativo)

O código fornecido nestes exemplos é apenas para referência. Não use o código original. Se você não tiver certeza de como usá-lo, consulte seu desenvolvedor web.

Pressuposto: O Web SDK é carregado na página antes do evento ser enviado. Não o carregue novamente.

Cenário do usuário:

  • Um usuário faz o cadastro no seu site.
  • O código do site recolhe os dados do usuário e os envia ao seu servidor.
  • O servidor gera um CUID único para o usuário.
  • Na página de agradecimento após o cadastro, você consulta o servidor para obter o novo CUID.
  • Com a resposta do servidor, você define o CUID da AppsFlyer usando o método setCustomerUserId() do Web SDK.

Um exemplo de formulário de cadastro

O código abaixo é um formulário de cadastro simples. Quando o formulário é enviado, o endereço de e-mail é armazenado em localStorage. Quando o usuário chega à página de agradecimento, o endereço de e-mail é enviado para o servidor que obtém o CUID único para esse e-mail.

<html>
<head>
    <script>
!function(t,e,n,s,a,c,i,o,p){t.AppsFlyerSdkObject=a,t.AF=t.AF||function(){
(t.AF.q=t.AF.q||[]).push([Date.now()].concat(Array.prototype.slice.call(arguments)))},
t.AF.id=t.AF.id||i,t.AF.plugins={},o=e.createElement(n),p=e.getElementsByTagName(n)[0],o.async=1,
o.src="https://websdk.appsflyersdk.com?"+(c.length>0?"st="+c.split(",").sort().join(",")+"&":"")+(i.length>0?"af_id="+i:""),
p.parentNode.insertBefore(o,p)}(window,document,"script",0,"AF","pba",{pba: {webAppId: "WEB_DEV_KEY"}})
    </script>
    <script>
        function storeUserEmail() {
            var userEmail = document.getElementById('email').value;
            localStorage.setItem('user_email', userEmail);
        }
    </script>
</head>
<body>
    <h1>Cadastre-se</h1>
    <form onsubmit="storeUserEmail()" action="/signup" method="post">
        <div><label>Nome</label><input type="text" name="name" id="name"></div>
        <br/>
        <div><label>E-mail</label><input type="email" name="email" id="email"></div>
        <br/>
        <input type="submit" id="submit">
    </form>
</body>
</html>

Um exemplo de página de agradecimento

O código usa a Fetch API. Ele envia o endereço de e-mail inserido pelo usuário ao servidor. Considerando que o servidor crie um usuário com um CUID único no cadastro, enviar o endereço de e-mail para o servidor retornará um CUID único. O servidor responde com um CUID único, que é enviado com o métodosetCustomerUserId.

<script>
  // Queue — buffers AF() calls until the SDK is ready
  window. AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  // Replace WEB_DEV_KEY with your Web SDK ID
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Inject SDK
  var o = document.createElement("script"),
      p = document.getElementsByTagName("script")[0];
  o.async = 1;
  // Replace WEB_DEV_KEY with your Web SDK ID
  o.src = "https://websdk.appsflyersdk.com?" + "st=pba,banners&af_id=WEB_DEV_KEY";
  p.parentNode.insertBefore(o, p);
  AF('banners', 'showBanner');
</script>
Exemplo: Configurando o CUID após o cadastro (Google Tag Manager)

  1. Crie uma página de cadastro.

    O exemplo de código abaixo é um formulário de cadastro simples. Quando o formulário é enviado, o endereço de e-mail é armazenado em localStorage. Quando o usuário chega à página de agradecimento, o endereço de e-mail é enviado para o servidor que obtém o CUID único para esse e-mail.

    <html>
<head>
    <script>
        (function (w, d, s, l, i) {
            w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
            var f = d.getElementsByTagName(s)[0], j = d.createElement(s),
                dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true;
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', 'GTM-5VJ6C7R');
        function storeUserEmail() {
            var userEmail = document.getElementById('email').value;
            localStorage.setItem('user_email', userEmail);
        }
    </script>
</head>
<body>
    <h1>Cadastre-se</h1>
    <form onsubmit="storeUserEmail()" action="/signup" method="post">
        <div><label>Nome</label><input type="text" name="name" id="name"></div>
        <br />
        <div><label>E-mail</label><input type="email" name="email" id="email"></div>
        <br />
        <input type="submit" id="submit">
    </form>
</body>
</html>

  2. Configure uma página de agradecimento para os usuários que fazem o cadastro. O código abaixo é uma página de agradecimento com um gatilho do GTM que envia o endereço de e-mail fornecido pelo usuário ao servidor no formulário de cadastro. Considerando que o servidor crie um usuário com um CUID único no cadastro, enviar o endereço de e-mail para o servidor retornará um CUID único. O servidor responde com um CUID exclusivo que é enviado usando o método setCustomerUserId().

    <script>
    window.onload = function () {
        var userEmail = localStorage.getItem('user_email');
        fetch('users/' + userEmail).then(function (res) {
            res.text().then(function (id) {
                console.log(id);
                AF('pba', 'setCustomerUserId', id);
            });
        });
    }
</script>

  3. Adicione uma nova tag para atribuir assinaturas após o carregamento da página de agradecimento.

    Adicionando uma nova tag do GTM para o evento de conversão de CUID

  4. Dê um nome diferente à tag e selecione a opção de tipo de tag HTML personalizado.

    Nomeando a tag e selecionando o tipo de tag HTML personalizado no GTM
    <script>
    var userEmail = localStorage.getItem('user_email');
    fetch('users/' + userEmail).then(function (res) {
        res.text().then(function (id) {
            console.log(id);
            AF('pba', 'setCustomerUserId', id);
        });
    });
</script>

  5. Abra Configurações avançadas e Sequenciamento de tags e certifique-se de que está configurado para disparar a conversão após a execução da tag.

    Configurando o sequenciamento de tags do GTM para a tag de conversão

  6. Defina um gatilho para a tag de conversão para indicar quando deve ser acionada. No exemplo abaixo, ela é acionada no carregamento da página de agradecimento.

    Configurando o acionador do GTM para disparar a tag de conversão ao carregar a página de agradecimento

7. Gerenciar a privacidade

Após implementar a mensuração de eventos, talvez você precise aplicar restrições de segurança e privacidade específicas para atender aos padrões da sua empresa ou região.

Opt-in ou opt-out do envio de eventos

Você pode controlar a mensuração de duas maneiras:

Definição do estado inicial do SDK (no snippet)

Determina se o SDK envia eventos quando a página da web carrega pela primeira vez ou espera até que você peça para que ele envie os eventos. Essa configuração é definida no snippet da web.

  • Envie eventos: {pba: {webAppId: "...", measurementStatus:true}}
  • Não envie eventos: {pba: {webAppId: "...", measurementStatus:false}}

Se measurementStatus estiver vazio ou NULL, a AppsFlyer considera como measurementStatus:true.

Controle explícito

O controle explícito tem prioridade sobre a configuração de estado inicial e usa cookies first-party:

  • Definido no domínio do site.
  • Expira após um período definido pelo Web SDK ou conforme determinado pelo navegador.
  • Sempre sujeito às configurações de cookies do navegador.

Comandos

  • Comece a enviar eventos (opt-in): window.AF_SDK.PLUGINS.PBA.enableMeasurement()
  • Pare de enviar eventos (opt-out): window.AF_SDK.PLUGINS.PBA.disableMeasurement()
Proteção e filtro de dados

e o seu site exige protocolos rigorosos de segurança e de privacidade de dados, use os seguintes mecanismos para configurar a maneira como o Web SDK interage com seu ambiente e seus dados.

Política de Segurança de Conteúdo (CSP)

Se o seu site exige que o JavaScript seja protegido por uma CSP, o Web SDK é compatível com duas abordagens diferentes, a depender da configuração da sua CSP e do snippet selecionado na Etapa 2.

  • CSP usando self: Adicione https://websdk.appsflyersdk.com à sua lista de permissões script-src. Isso funciona tanto para o Web SDK padrão quanto para a verificação avançada do SDK.
  • CSP usando nonce: Se sua política usar script-src 'nonce-...', use a variante once-extended da derificação avançada do SDK. Esse mecanismo encaminha o nonce para todas as três tags de script exigidas pelo processo de verificação. Substitua {{CSP_NONCE}} pelo valor nonce gerado pelo servidor.

A tabela abaixo mostra quais políticas CSP são compatíveis com a variante nonce-extended.

Política Funcionamento Observações
script-src 'self' Não Origem de CDN externa não permitida; script inline também é bloqueado.
script-src 'self' https://websdk.appsflyersdk.com Parcial Permite carregador e SDK; o script inline ainda está bloqueado.
script-src 'nonce-...' https://websdk.appsflyersdk.com Sim Nonce cobre script inline e carregador; a tag SDK recebe nonce encaminhado pelo carregador.
script-src 'nonce-...' 'strict-dynamic' Sim (recomendado) Nonce cobre script inline e carregador, strict-dynamic propaga confiança para a tag SDK inserida dinamicamente. Nenhuma origem de CDN necessária na lista de permissões.
Compatibilidade com a política CSP

Verificação avançada de SDK com snippets de nonce CSP

Sem Smart Banners
<script nonce="{{CSP_NONCE}}">
  // Queue — buffers AF() calls until the SDK is ready
  window. AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  // Replace WEB_DEV_KEY with your Web SDK ID
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config — nonce forwarded to the injected SDK <script> tag
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["pba"],
    nonce: "{{CSP_NONCE}}"
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.nonce = "{{CSP_NONCE}}";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>
Com Smart Banners
<script nonce="{{CSP_NONCE}}">
  // Queue — buffers AF() calls until the SDK is ready
  window. AppsFlyerSdkObject = "AF";
  window.AF = window.AF || function() {
    (window.AF.q = window.AF.q || []).push([Date.now()].concat(Array.prototype.slice.call(arguments)));
  };
  // Replace WEB_DEV_KEY with your Web SDK ID
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" }, banners: { key: "YOUR_BANNER_KEY" } };
  window.AF.plugins = {};

  // Manifest loader config — nonce forwarded to the injected SDK <script> tag
  window.AF_LOADER_CONFIG = {
    baseUrl: "https://websdk.appsflyersdk.com",
    plugins: ["banners", "pba"],
    nonce: "{{CSP_NONCE}}"
  };

  // Inject manifest loader
  var loaderScript = document.createElement("script");
  loaderScript.src = "https://websdk.appsflyersdk.com/manifestLoader.v1.js";
  loaderScript.integrity = "sha384-Uncl2YwvjFpFz0PwEfl3bL/0JsOQcDFEpwXHzcN0MBavn9vvFEx5pZxADTq8h+CV";
  loaderScript.crossOrigin = "anonymous";
  loaderScript.nonce = "{{CSP_NONCE}}";
  loaderScript.async = true;
  document.head.appendChild(loaderScript);
</script>

Descartar parâmetros de consulta

Se os parâmetros de consulta de URL contêm informações confidenciais, peça à AppsFlyer para descartá-las (URLs, referrers e header_referer).

  • Descarregue todos os parâmetros de consulta: anexar af_url=true
  • Descarte os parâmetros específicos: use af_url_mask=param (separar múltiplos parâmetros com ;)

Exemplo:

  • Original: param1=value1&param2=value2&param3=value3&af_url_mask=param2;param3
  • Resultado: param1=value1&af_url_mask=param2;param3

Referência de cookies do Web SDK

O Web SDK define ou utiliza os seguintes cookies:

Nome do cookie Domínio Duração Uso Detalhes
afUserid Domínio do seu site 395 dias Non-Accelerated Mobile Pages (páginas não aceleradas para dispositivos mobile) Identifica um usuário no contexto de eventos de carregamento de páginas da web e navegação.
AF_SYNC Domínio do seu site 1 semana Non-Accelerated Mobile Pages (páginas não aceleradas para dispositivos mobile) Sinaliza que um identificador de usuário final está definido. É usado para reduzir o tempo de carregamento do site.
af_id appsflyer.com 395 dias Páginas não-AMP quando cookies de terceiros são permitidos Identifica um usuário no contexto de eventos de inicialização de aplicativo e navegação.
af_id onelink.me 395 dias Páginas não-AMP quando cookies de terceiros são permitidos Vincule interações de banner, interações do OneLink, ou ambas, a eventos de inicialização de aplicativos.
amp-afUserid AMP CDN ou domínio do seu site 1 ano Páginas AMP (accelerated mobile pages)
AF_DEFAULT_MEASUREMENT_STATUS Domínio do seu site 395 dias Non-Accelerated Mobile Pages (páginas não aceleradas para dispositivos mobile) Armazena o estado de consentimento. Impede que o SDK funcione até que o usuário autorize. Não definido por padrão. Usado apenas quando o gating de consentimento está configurado.

Tags