Como habilitar banners Singular (Guia do desenvolvedor)

Seguir
Avatar
Dora Kishinevsky
Updated

O Singular Banners é um recurso empresarial. Para saber mais sobre esse recurso, entre em contato com seu gerente de sucesso do cliente.

Atualização (março de 2023): Uma nova etapa foi adicionada para permitir que a Singular receba dicas de clientes(saiba mais).

Os Singular Banners podem ser exibidos em seu site móvel para direcionar os usuários da Web para seu aplicativo e exibir o conteúdo mais relevante do aplicativo. Depois de habilitar os Singular Banners em seu website, sua organização pode facilmente projetar, implementar e manter os banners por meio da UI dos Singular Banners.

Guia para Desenvolvedores
Pré-requisitos O Singular Mobile SDK está integrado em seu aplicativo, incluindo suporte a deep link.
Artigos relacionados
  • Como criar um banner Singular (guia visual)
  • Perguntas frequentes sobre banners singulares

Passo a passo

1

Adicione o script do Singular Website SDK ao seu site

A Singular hospeda o código JavaScript do SDK no CDN da Singular. Adicione o seguinte código dentro da tag <head> de cada página que você deseja rastrear. Esse é o código a ser adicionado para usar a versão do SDK que suporta banners.

<head>
<!-- Usando a versão mais recente do SDK   -->
<script
 src="https://web-sdk-cdn.singular.net/singular-sdk/latest/singular-sdk.js">
</script>
</head>
2

Dê permissão à Singular para acessar dados de dicas do cliente

Com as novas limitações nos dados do agente do usuário em navegadores da Web baseados no Chromium, lançadas em fevereiro-março de 2023, os anunciantes agora precisam buscar dados de dicas do cliente e dar permissão ao Singular Web SDK para receber esses dados. Para obter mais informações, consulte as Perguntas frequentes sobre banners.

O site precisa:

  1. Começar a solicitar Client Hints (cabeçalho accept-ch).
  2. Conceder permissão à Singular (como um terceiro) para que o navegador nos envie as dicas do cliente nas solicitações de banner de busca (cabeçalho permissions-policy).

Adicione os seguintes cabeçalhos de resposta à resposta de carregamento da página:

accept-ch:
sec-ch-ua-model,
sec-ch-ua-platform-version,
sec-ch-ua-full-version-list

permissions-policy:
ch-ua-model=("https://sdk-api-v1.singular.net"),
ch-ua-platform-version=("https://sdk-api-v1.singular.net"),
ch-ua-full-version-list=("https://sdk-api-v1.singular.net")

 
3

Inicializar o SDK do Singular Website e exibir o banner

O código de inicialização do SDK deve ser chamado sempre que uma página for carregada. Ele é um pré-requisito para todos os Banners Singular e/ou funcionalidade de atribuição da Web.

Para inicializar o SDK, use o código a seguir.

  • Você precisará de sua SDK Key e SDK Secret, que podem ser recuperadas por meio da plataforma Singular em Developer Tools > SDK Keys.
  • Você também precisará inserir um ID de produtopara seu site. Recomendamos usar a notação de DNS reverso, por exemplo, "com.example.site". Isso será usado para identificar seu site em toda a plataforma Singular.
// Crie o objeto de configuração Singular Banners e ative o suporte web-to-app.
// Web-to-app é necessário se você quiser rastrear qual rede de anúncios 
// levou o usuário ao seu site.
var bannersOptions = new BannersOptions().withWebToAppSupport();

// Crie um objeto de configuração geral do SDK e ative o Singular Banners.
var config = new SingularConfig(sdkKey, sdkSecret,
   productId).withBannersSupport(bannersOptions);

// Inicializar o SDK
singularSdk.init(config);

// Exibir banner
singularSdk.showBanner();

Observações:
4

Reapresentação do banner na rota da página (somente aplicativos de página única)

Se seu aplicativo for de página única, você deverá ocultar e mostrar novamente o banner em cada rota de página. Isso garante que o Singular forneça o banner apropriado para sua experiência na Web.

Para ocultar e mostrar novamente o banner, use o código a seguir:

singularSdk.hideBanner();
singularSdk.showBanner();

Essa foi a última etapa do processo para uma integração padrão. A equipe de UA agora pode começar a criar banners fazendo login no Singular e acessando Automação > Banners. Os banners serão exibidos em seu site com base nas opções selecionadas em Automation > Banners.

As próximas etapas são opcionais.
5

[Opção avançada] Personalizar configurações de link

O Singular oferece uma maneira de personalizar os links no banner por meio de código.

Para personalizar os links:

  1. Crie um objeto LinkParams e use uma ou mais das funções abaixo. Faça isso antes de chamar singularSdk.showBanner().
  2. Em seguida, passe o objeto LinkParams quando você chamar showBanner().

Exemplo:

// Definir um objeto LinkParams
let bannerParams = new LinkParams();

// Configure as opções de link (veja detalhes sobre cada opção abaixo)
bannerParams.withAndroidRedirect("androidRedirectValue");
bannerParams.withAndroidDL("androidDLParamValue");
bannerParams.withAndroidDDL("androidDDLparamValue");
bannerParams.withIosRedirect("iosRedirectValue");
bannerParams.withIosDL("iosDLValue");
bannerParams.withIosDDL("iosDDLValue");

// Mostrar o banner com as opções definidas
singularSdk.showBanner(bannerParams);

Lista de opções:

Método Descrição
withAndroidRedirect Passa um link de redirecionamento para a página de download do seu aplicativo Android, geralmente uma página da Play Store.
withAndroidDL Passar um deep link para uma página dentro do seu aplicativo Android.
withAndroidDDL Passar um deep link diferido, ou seja, um link para uma página no seu aplicativo Android que o usuário ainda não instalou.
withIosRedirect Passe um link de redirecionamento para a página de download do seu aplicativo iOS, geralmente uma página da App Store.
withIosDL Passar um deep link para uma página em seu aplicativo iOS.
withIosDDL Transmitir um deep link diferido, ou seja, um link para uma página em seu aplicativo iOS que o usuário ainda não tenha instalado.
6

[Opção avançada] Usar código para forçar a ocultação/exibição de banners

Conforme mencionado na etapa 3, se você tiver um aplicativo de página única, deverá usar os métodos hideBanner() e showBanner() em cada rota de página para garantir que o banner apropriado seja entregue (consulte a etapa 3 acima).

Os métodos hideBanner() e showBanner() também estão disponíveis para uso em todo o seu código se você quiser ocultar um banner que, de outra forma, seria exibido ou mostrar novamente um banner que você ocultou.

Método Descrição
singularSdk.hideBanner() Oculta um banner visível de sua página.
singularSdk.showBanner() Mostrar o banner pré-configurado.
singularSdk.showBanner(params) Mostrar o banner pré-configurado, mas substituir os links com as opções definidas no objeto linkParams (consulte a etapa 4).