Smart Banner v2

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 SDK do Smart Banner 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.

Instalação

Smart banners only

  1. 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.
  2. Cole o seguinte trecho do código na tag head do seu site. Certifique-se de colá-la perto da parte superior da tag 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.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. This can be changed if you want some website components to be on top of the banner.
AF('banners', 'showBanner');
</script>

ℹ️

Observação

The showBanner no final do código de instalação pode ter mais parâmetros. Saiba mais

Smart banners and People-Based Attribution

  1. Replace the YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.
  2. 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).
  3. 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. This can be changed if you want some website components to be on top of the banner.
AF('banners', 'showBanner', { bannerZIndex: 1000, additionalParams: { p1: "v1", p2: "v2"}});
</script>

Controlar a fonte do Smart Banner

Usar a mesma fonte no Smart Banner do resto do site cria uma identidade visual consistente e coesa para sua marca.

Para alterar a fonte padrão no Smart Banner, você precisa adicionar a seguinte regra ao seu CSS

[data-af-custom-fonts="af-creatives-text"] {
    font-family: PUT-YOUR-CUSTOM-FONT-HERE !important;
}

Por exemplo:

[data-af-custom-fonts="af-creatives-text"] {
    font-family: museo-sans !important;
}

🚧

  • The !important é obrigatório
  • Verifique se a fonte já está carregada em seu site
  • A fonte personalizada será aplicada a todos os banners do site
  • Se a fonte não for exibida corretamente, salve novamente seu banner no editor de criativos

Funções do SDK

showBanner

Assinatura do método

AF('banners', 'showBanner', { bannerContainerQuery: String,
              bannerZIndex: Integer,              
              additionalParams: <Key, Value Dictionary>);

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

ℹ️

Observação

Não use esta função ao implementar Smart Banners em um aplicativo wrapper/híbrido para carregar a página de banner do aplicativo (e não do navegador), pois usar showBanner exibirá o banner dentro do aplicativo. Se você usar showBanner para um aplicativo wrapper/híbrido, use hideBanner para carregamentos de aplicativos móveis.

Argumentos de entrada

TipoNomeDescrição
StringbannerContainerQuerySe 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.
IntegerbannerZIndexOs 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.
<Key, Value Dictionary>additionalParamsSe aprovado, essas chaves e valores (por exemplo, deep_link_value: apples) são adicionados como parâmetros de consulta ao URL do OneLink.

Exemplo de uso:

  • Adicionar parâmetros ao URL do OneLink
AF('banners', 'showBanner', { additionalParams: { deep_link_value: "apples", deep_link_sub1: "22", af_adset: "my_adset"}});
  • Defina Z-index deste banner e um ID de container para sua colocação
AF('banners', 'showBanner', { bannerContainerQuery: "#my-container-id"
                              bannerZIndex: 999});

updateParams

Assinatura do método

AF('banners', 'updateParams', { <Key, Value Dictionary> });

Descrição
Adicione programaticamente até 10 parâmetros (por exemplo, deep_link_value) ao URL do OneLink atribuído ao botão de 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: undefined, null, NaN ou arg
Caracteres inválidos:
Chave: /, \, *, !, @, #, ?, $, %, ^, &, ~, ``, =, +, ', ", ;, :, >, <
Valor = \, ;, $, >, <, ^, #, ``

  • Os parâmetros são adicionados como parâmetros de consulta ao 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 no URL original do OneLink. Se o parâmetro que você adicionar já estiver no 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.

Argumentos de entrada

TipoNomeDescrição
<Key, Value Dictionary>N/AEssas chaves e valores (por exemplo, deep_link_value: apples) são adicionados como parâmetros de consulta ao URL do OneLink.

Exemplo de uso:

  • Adicionar parâmetros ao URL do OneLink
AF('banners', 'updateParams', { deep_link_value: "new_param", deep_link_sub4: "gg_77", af_ad: "new_ad_param"});

hideBanner

Assinatura do método

AF('banners', 'hideBanner');

Descrição

Remova programaticamente qualquer banner exibido da página (por exemplo, após uma determinada entrada do usuário).

Argumentos de entrada

Nenhum

Exemplo de uso:

  • Ocultar banner
AF('banners', 'hideBanner');