[Beta] Integre o Web SDK da AppsFlyer

<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)));
  };
  window.AF.id = window.AF.id || { pba: { webAppId: "WEB_DEV_KEY" } };
  window.AF.plugins = {};

  // Inject SDK
  var o = document.createElement("script"),
      p = document.getElementsByTagName("script")[0];
  o.async = 1;
  o.src = "https://websdk.appsflyersdk.com?" + "st=pba&af_id=WEB_DEV_KEY";
  p.parentNode.insertBefore(o, p);
</script>

<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)));
  };
  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;
  o.src = "https://websdk.appsflyersdk.com?" + "st=pba,banners&af_id=WEB_DEV_KEY";
  p.parentNode.insertBefore(o, p);
  AF('banners', 'showBanner');
</script>

<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)));
  };
  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>

<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)));
  };
  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>

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.

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 relevante à tag.
5. Cole o snippet da Etapa 2 em Configuração de tags.
6. Clique em Salvar.
7. Adicione um gatilho:
   • Para todas as páginas:
     1. Clique em Adicionar gatilho.
     2. Selecione Todas as páginas.
     3. Clique em Salvar.
     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 edição.
     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 Salvar.
     8. Associe o gatilho à tag do Web SDK da AppsFlyer.
        1. Na janela principal do GTM, selecione Gatilhos.
        2. Selecione a etiqueta que você 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 Salvar.

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. Dê um nome à propriedade.
5. Em Plataforma, selecione Web.
6. Insira o domínio do seu site.
7. Clique em Salvar.

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 Salvar.

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 Salvar.
3. Na seção Desenvolvimento:
   • Ao lado da biblioteca recém-criada, clique no menu Ação (3 pontos) e selecione Criar para desenvolvimento.
   • Clique no menu de ação novamente e selecione Enviar para aprovação.
4. Na seção Enviado:
   • Clique no menu de ação e selecione Criar para preparação.
   • Clique novamente no menu de ação e 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.

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"}});

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.

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

<html>
<head>
    <script>
        // Google Tag Manager loads the Web SDK
        (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>Thank You for Subscribing to Our Newsletter</h1>
</body>
</html>

Use isso para rastrear ações sem carregamento de 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.

<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>Shopping Cart</h1>
    <button id='checkout'>Checkout</button>
</body>
</html>

<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>Shopping Cart</h1>
    <button id='checkout'>Checkout</button>
</body>
</html>

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 event_value concisas. Valores com mais de 4000 caracteres serão encurtados.

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>Sign Up</h1>
    <form onsubmit="storeUserEmail()" action="/signup" method="post">
        <div><label>Name</label><input type="text" name="name" id="name"></div>
        <br/>
        <div><label>Email</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.

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

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>Sign Up</h1>
       <form onsubmit="storeUserEmail()" action="/signup" method="post">
           <div><label>Name</label><input type="text" name="name" id="name"></div>
           <br />
           <div><label>Email</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.

   

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

   

   <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.

   

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.

   

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}}
• Do not send events: {pba: {webAppId: "...", measurementStatus:false}}

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

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.

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

<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)));
  };
  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>

<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)));
  };
  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