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:
- Usando o Web SDK somente para Smart Banners.
- Usando o Web SDK para Smart Banners e People-Based Attribution.
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 hideBanner
para 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.
Comentários
Por favor, entrar para comentar.