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

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