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

You can either copy the smart banner script from the AppsFlyer dashboard or from below.

1. Copy the script code snippet in one of the following ways:

   • Copy the script from the Smart Banner’s Website workplace in the AppsFlyer dashboard. Your web key is already included in the script.
   • Copy the script from the the code snippet below and replace YOUR_WEB_KEY placeholder in the script with your Web key. The web key is created when you create a new Website workplace.

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

2. Paste the code snippet in the head do seu site. Certifique-se de colá-la perto da parte superior da tag head .

ℹ️

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

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

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

Traits and Limitations