Implementação do código do site Smart Banners para desenvolvedores

Visão geral: adicione o SDK dos Smart Banners ao seu site para que os profissionais de marketing possam converter os visitantes do seu site em usuários de aplicativos móveis.

Leitura relacionada

Para ter uma visão completa do trabalho com Smart Banners, confira estes artigos:

Smart Banners—web-to-app mobile (para profissionais de marketing)
Implementação do código do site Smart Banners para profissionais de marketing
Implementação do código do site Smart Banners para desenvolvedores [este artigo]
Soluções de atribuição para web-to-app mobile
Integração do PBA com Smart Banners

Visão geral

A AppsFlyer fornece um Smart Banner SDK que os anunciantes integram em seus sites. O objetivo do SDK é extrair todos os dados necessários para exibir dinamicamente os Smart Banners. O Smart Banners SDK também cria automaticamente os links de atribuição adequados, para que você não precise desenvolvê-los manualmente.

Portanto, o Smart Banner SDK deve estar acessível em todas as páginas que exibem seus banners mobile.

O SDK do Smart Banner é autenticado usando a chave da Web exclusiva, que você pode obter no Workplace do site.

Trecho de código

Nota

Desde 1º de janeiro de 2020, o SDK para Smart Banners permite que você use Smart Banners e Atribuição baseada em pessoas em seu site. Os trechos do SDK abaixo contêm dois exemplos:

Se você já tiver o SDK web PBA autônomo, remova-o e substitua-o pelo SDK web para Smart Banners e Atribuição baseada em Pessoas. Não basta adicionar o SDK web autônomo para Smart Banners.

Inclua esse trecho de código na tag <head> de cada página que exibe seus banners mobile.

Web SDK da AppsFlyer apenas para Smart Banners

Substitua o placeholder YOUR_WEB_KEY no script pela sua chave da web. A chave da web é gerada quando você cria um novo Workplace do site.
Cole esse trecho de código na tag principal em seu site. Certifique-se de colá-lo perto da parte superior da tag principal.

<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","banners",{banners: {key: "YOUR_WEB_KEY"}});

// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. Isso pode ser alterado se você quiser que alguns componentes do site estejam no topo do banner. 

AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});

</script>

Web SDK da AppsFlyer para Smart Banners e People-Based Attribution

Substitua o placeholder YOUR_WEB_KEY no script pela sua chave da web. A chave da web é gerada quando você cria um novo Workplace do site.
Substitua o placeholder YOUR_PBA_KEY no script pela sua chave de desenvolvedor web. A chave de desenvolvedor web é criada quando você cria um pacote da marca (brand bundle).
Cole esse trecho de código na tag principal em seu site. Certifique-se de colá-lo perto da parte superior da tag principal.

<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,banners",{pba: {webAppId: "YOUR_PBA_KEY"}, banners: {key: "YOUR_WEB_KEY"}});

// Smart Banners are by default set to the max z-index value, so they won't be hidden by the website elements. Isso pode ser alterado se você quiser que alguns componentes do site estejam no topo do banner. 

AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});

</script>

        <script>
          !function(e,n,t){!function(e,n,t,r,a){
          var s=(e[n]=e[n]||{})[t]=function(){(s._q=s._q||[]).push(Array.prototype.slice.call(arguments))};
          s.webkey=a;
          for(var i=0;i<r.length;i++)
          s[r[i]]=function(n)
          {return function()
          {var e=Array.prototype.slice.call(arguments);
          return e.unshift(n),(s._q=s._q||[]).push(e),s}}
          (r[i])}(e,"AF","Banner",["showBanner","hideBanner","disableBanners","disableTracking","setAdditionalParams"],t),
          function(e,n,t){var r=e.createElement("script");
          r.type="text/javascript",r.async=!0,r.src=n+(t?"?webkey="+t:"");
          var a=e.getElementsByTagName("script")[0];
          a.parentNode.insertBefore(r,a)}(n,"https://cdn.appsflyer.com/web-sdk/banner/latest/sdk.min.js",t)}(window,document,"YOUR-BANNER-KEY");
          // Os Smart Banners são, por padrão, definidos para o valor máximo do índice z, para que não sejam ocultados pelos elementos do site. Isso pode ser alterado se você quiser que alguns componentes do site estejam no topo do banner. 
 
          showBanner({ bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"...}});

          </script>

Funções do SDK

showBanner

Objetivo:

Comece a exibir o Smart Banner de acordo com a chave do banner fornecida no trecho de código.

Observação: não use essa função ao implementar Smart Banners em um aplicativo embalagem/híbrido para carregar a página do banner do aplicativo (e não do navegador), pois o uso do showBanner exibirá o banner no aplicativo. Se você usar showBanner para um aplicativo embalagem/híbrido, use hideBannerpara carregamentos de aplicativos móveis.

Parâmetros (opcional):

bannerContainerQuery
Se aprovado, o SDK tenta localizar um elemento na página com essa consulta e o trata como o ponto de entrada para o posicionamento do banner. Caso contrário, document.body é usado.
bannerzIndex
Smart Banners são, por padrão, definidos como o valor máximo z-index, para que eles não sejam ocultos por elementos do site. Isso pode ser alterado se você quiser que alguns componentes do site estejam no topo do banner.
additionalParams
Se passados, esses parâmetros (por exemplo, deep_link_value) são adicionados como parâmetros de consulta ao URL do OneLink.

Exemplo:

AF('banners', 'showBanner', { bannerContainerQuery: "#container-id",
              bannerZIndex: 1000,              
              additionalParams: { p1: "v1", p2: "v2"...}});

showBanner({ bannerContainerQuery: "#container-id",
              bannerZIndex: 1000,
              additionalParams: { p1: "v1", p2: "v2"...}});

updateParams

Propósito

Adicione programaticamente até 10 parâmetros (por exemplo, deep_link_value) ao URL do OneLink atribuído ao botão call-to-action (CTA), após a exibição do banner.

A entrada é um objeto com chaves de parâmetro e valores.

Uma chave não pode ter um valor vazio.
Uma chave não pode ser nomeada: indefinida, nula, NaN ou arg
Caracteres inválidos:
- Chave: /, \, *, !, @, #, ?, $, %, ^, &, ~, `, =, +, ', ", ;, :, >, <
- Valor = \, ;, $, >, <, ^, #, `

Exemplo

AF ("banners", "updateParams", {p1: "v1", p2: "v2"...})

considerações

Os parâmetros são adicionados como parâmetros query à URL do OneLink.
Quando você usa updateParams para adicionar parâmetros,a URL da impressão é diferente da URL de clique.
Os parâmetros adicionados não substituem aqueles na URL original do OneLink. Se o parâmetro que você adicionar já estiver na URL do OneLink, ele não será alterado.
Se updateParams for chamado mais de uma vez, somente os parâmetros da última chamada serão adicionados à URL.
Esse método não funciona com o SDK da web do Smart Banner descontinuado.

hideBanner

Propósito

Remova programaticamente qualquer banner exibido na página (por exemplo, depois de exibir por X segundos).

AF('banners', 'hideBanner')

disableBanners - descontinuado

Propósito

Esta função só está disponível no antigo Smart Banner SDK e será descontinuada.

Desative o web SDK e pare de exibir banners e se comunicar com os servidores da AppsFlyer.

disableTracking - obsoleto

Propósito

Esta função só está disponível no antigo Smart Banner SDK e será descontinuada.

Desative o web SDK e limpe os traços das informações coletadas do navegador (ex.: local-storage, cookies etc.).

setAdditionalParams - descontinuado

Propósito

Esta função só está disponível no antigo Smart Banner SDK e será descontinuada.

defina additionalParams para o OneLink antes de fazer a chamada showBanner. Os parâmetros são anexados à URL do OneLink atrás do banner.

Parâmetros

Params
Mapa de parâmetros de chave/valor que podem substituir quaisquer parâmetros de link de atribuição pré-existentes (além do valor pid).

Exemplo de uso

Busque diferenciar as landing pages usando parâmetros específicos. Para isso, você pode anexar parâmetros adicionais ao OneLink atrás do banner. Quando um usuário instala seu aplicativo depois de clicar no banner, os parâmetros no OneLink aparecem nos dados brutos para análise. O exemplo de código abaixo faz uso do parâmetro af_sub1.

// chame esse método antes de chamar showBanner ()
setAdditionalParameters ('af_sub': 'custom_paramter_value')

O formato final do OneLink é este: subdomain.onelink.me/onelink- id?pid=af_banner& c=campaign& af_sub1=custom_paramter_value.

O subdomínio e o ID do OneLink são retirados do template do OneLink.

For example: ab12.onelink.me/xyz1?pid=af_banner&c=summer_campaign&af_sub1=uk_landing_page.

Você pode usar qualquer parâmetro válido. Para obter mais informações sobre os parâmetros do link de atribuição, consulte aqui. Certifique-se de não substituir os parâmetros pid e c, porque eles já existem no link de atribuição por trás do banner.

getAdditionalParams- descontinuado

Propósito

Esta função só está disponível no antigo Smart Banner SDK e será descontinuada.

Obtenha o objeto additionAlParams atual.

Características e limitações

Característica Observações

Aplicativo de página única (SPA)

Por padrão, os Smart Banners são exibidos apenas uma vez, mesmo que os usuários naveguem entre as páginas.

Para exibir banners quando os usuários navegarem entre páginas, é necessário chamar manualmente hideBanner e showBanner para cada navegação que não recarregue a página e acione a lógica padrão dos Smart Banners.

Mapa do site do centro de ajuda

Leitura relacionada

Visão geral

Trecho de código

Nota

Web SDK da AppsFlyer apenas para Smart Banners

Web SDK da AppsFlyer para Smart Banners e People-Based Attribution

Funções do SDK

showBanner

Objetivo:

Parâmetros (opcional):

Exemplo:

updateParams

Propósito

Exemplo

considerações

hideBanner

Propósito

disableBanners - descontinuado

Propósito

disableTracking - obsoleto

Propósito

setAdditionalParams - descontinuado

Propósito

Parâmetros

Exemplo de uso

getAdditionalParams- descontinuado

Propósito

Características e limitações

Comentários

Artigos nessa seção

Conteúdo da Página:

Mapa do site do centro de ajuda

Implementação do código do site Smart Banners para desenvolvedores

Leitura relacionada

Visão geral

Trecho de código

Nota

Web SDK da AppsFlyer apenas para Smart Banners

Web SDK da AppsFlyer para Smart Banners e People-Based Attribution

Funções do SDK

showBanner

Objetivo:

Parâmetros (opcional):

Exemplo:

updateParams

Propósito

Exemplo

considerações

hideBanner

Propósito

disableBanners - descontinuado

Propósito

disableTracking - obsoleto

Propósito

setAdditionalParams - descontinuado

Propósito

Parâmetros

Exemplo de uso

getAdditionalParams- descontinuado

Propósito

Características e limitações

Comentários

Artigos nessa seção

Artigos relacionados

Conteúdo da Página: