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
- 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 o seguinte trecho do código na tag
head
do seu site. Certifique-se de colá-la perto da parte superior da taghead
.
<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
- 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.
- 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. 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ê usarshowBanner
para um aplicativo wrapper/híbrido, usehideBanner
para carregamentos de aplicativos móveis.
Argumentos de entrada
Tipo | Nome | Descrição |
---|---|---|
String | 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. |
Integer | bannerZIndex | 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. |
<Key, Value Dictionary> | additionalParams | Se 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
Tipo | Nome | Descrição |
---|---|---|
<Key, Value Dictionary> | N/A | 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', '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');
Atualizado 5 meses atrás