AdControl em HTML 5 e JavaScript
Aviso
A partir de 1.º de junho de 2020, a plataforma de monetização de anúncios da Microsoft para aplicativos UWP do Windows será encerrada. Saiba mais
Este passo a passo mostra como usar a classe AdControl para exibir anúncios em faixa em um aplicativo JavaScript/HTML da Plataforma Universal do Windows (UWP) para Windows 10 e Windows 11.
Para obter um projeto de exemplo completo que demonstra como adicionar anúncios de faixa a um aplicativo JavaScript/HTML, consulte os exemplos de publicidade no GitHub.
Pré-requisitos
- Instale o SDK do Microsoft Advertising com o Visual Studio 2015 ou uma versão posterior do Visual Studio. Para obter instruções de instalação, consulte este artigo.
Observação
Se você instalou o SDK do Windows 10 versão 10.0.14393 (Atualização de Aniversário) ou uma versão posterior do SDK do Windows, também deverá instalar a biblioteca WinJS . Essa biblioteca costumava ser incluída em versões anteriores do SDK do Windows para Windows 10, mas a partir do SDK do Windows 10 versão 10.0.14393 (Atualização de Aniversário), essa biblioteca deve ser instalada separadamente.
Integrar um anúncio de banner ao seu aplicativo
No Visual Studio, abra seu projeto ou crie um novo projeto.
Observação
Se você estiver usando um projeto existente, abra o arquivo Package.appxmanifest em seu projeto e verifique se a funcionalidade Internet (Cliente) está selecionada. Seu aplicativo precisa desse recurso para receber anúncios de teste e anúncios ao vivo.
Se o projeto for direcionado a Qualquer CPU, atualize seu projeto para usar uma saída de build específica da arquitetura (por exemplo, x86). Se o seu projeto for direcionado a Qualquer CPU, você não poderá adicionar com êxito uma referência à biblioteca de publicidade da Microsoft nas etapas a seguir. Para obter mais informações, consulte Erros de referência causados pelo direcionamento de qualquer CPU em seu projeto.
Adicione uma referência ao SDK do Microsoft Advertising em seu projeto:
- Na janela Gerenciador de Soluções, clique com o botão direito do mouse em Referências e selecione Adicionar Referência...
- No Gerenciador de Referências, expanda Universal do Windows, clique em Extensões e marque a caixa de seleção ao lado de SDK do Microsoft Advertising para JavaScript (versão 10.0).
- No Gerenciador de referências, clique em OK.
Abra o arquivo index.html (ou outro arquivo html, conforme apropriado para o seu projeto).
<Na seção head>, após as referências JavaScript do projeto de default.css e main.js, adicione a referência a ad.js.
<!-- Advertising required references --> <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>Observação
Essa linha deve ser colocada na <seção de cabeçalho> após a inclusão de main.js; caso contrário, você encontrará um erro ao criar seu projeto.
Modifique a <seção body> no arquivo default.html (ou outro arquivo html, conforme apropriado para seu projeto) para incluir o div para o AdControl. Atribua as propriedades applicationId e adUnitId do AdControl aos valores da unidade de anúncio de teste. Ajuste também a altura e a largura para que o controle seja um dos tamanhos de anúncio com suporte para anúncios em faixa.
Observação
Cada AdControl tem um bloco de anúncios correspondente que é usado por nossos serviços para veicular anúncios no controle, e cada bloco de anúncios consiste em um ID de bloco de anúncios e um ID de aplicativo. Nestas etapas, você atribui valores de ID de unidade de anúncio de teste e ID de aplicativo ao seu controle. Esses valores de teste só podem ser usados em uma versão de teste do seu aplicativo. Antes de publicar seu aplicativo na Loja, você deve substituir esses valores de teste por valores dinâmicos do Partner Center.
<div id="myAd" style="position: absolute; top: 50px; left: 0px; width: 300px; height: 250px; z-index: 1" data-win-control="MicrosoftNSJS.Advertising.AdControl" data-win-options="{applicationId: '00001111-aaaa-2222-bbbb-3333cccc4444', adUnitId: 'test'}"> </div>Compile e execute o aplicativo para vê-lo com um anúncio.
O exemplo a seguir mostra o index.html completo de um aplicativo simples.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AdControlExampleApp</title>
<!-- WinJS references -->
<link href="lib/winjs-4.0.1/css/ui-light.css" rel="stylesheet" />
<script src="lib/winjs-4.0.1/js/base.js"></script>
<script src="lib/winjs-4.0.1/js/ui.js"></script>
<!-- AdControlExampleApp references -->
<link href="css/default.css" rel="stylesheet" />
<script src="js/main.js"></script>
<!-- Required reference for AdControl -->
<script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
</head>
<body>
<div id="myAd" style="position: absolute; top: 50px; left: 0px; width: 300px; height: 250px; z-index: 1"
data-win-control="MicrosoftNSJS.Advertising.AdControl"
data-win-options="{applicationId: '00001111-aaaa-2222-bbbb-3333cccc4444', adUnitId: 'test'}">
</div>
<p>Content goes here</p>
</body>
</html>
Criar um AdControl programaticamente em JavaScript
As etapas anteriores mostram como declarar um AdControl em sua marcação HTML. Como alternativa, você pode criar programaticamente um AdControl usando JavaScript. Este exemplo pressupõe que você esteja usando um div existente em seu HTML com o ID myAd.
var adDiv = document.getElementById("myAd");
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
{
applicationId: "3f83fe91-d6be-434d-a0ae-7351c5a997f1",
adUnitId: "test",
});
myAdControl.isAutoRefreshEnabled = false;
myAdControl.onErrorOccurred = myAdError;
myAdControl.onAdRefreshed = myAdRefreshed;
myAdControl.onEngagedChanged = myAdEngagedChanged;
Este exemplo pressupõe que você já tenha declarado métodos de manipulador de eventos chamados myAdError, myAdRefresh e myAdEngagedChanged.
Se você usar esse código e não vir anúncios, tente inserir um atributo de position:relative no div que contém o AdControl. Isso substituirá a configuração padrão do IFrame. Os anúncios serão exibidos corretamente, a menos que não estejam sendo exibidos devido ao valor desse atributo. Os novos blocos de anúncios podem não estar disponíveis por até 30 minutos.
Observação
Os valores applicationId e adUnitId mostrados neste exemplo são valores de modo de teste. Você deve substituir esses valores por valores dinâmicos do Partner Center antes de enviar seu aplicativo para envio.
Libere seu aplicativo com anúncios ativos
Certifique-se de que o uso de anúncios em banner em seu aplicativo siga nossas diretrizes para anúncios em banner.
No Partner Center, acesse a página Anúncios no aplicativo e crie uma unidade de anúncio. Para o tipo de bloco de anúncios, especifique Faixa. Anote o ID do bloco de anúncios e o ID do aplicativo.
Observação
Os valores de ID do aplicativo para unidades de anúncio de teste e unidades de anúncio UWP ao vivo têm formatos diferentes. Os valores de ID do aplicativo de teste são GUIDs. Quando você cria uma unidade de anúncio UWP dinâmica no Partner Center, o valor da ID do aplicativo para a unidade de anúncio sempre corresponde à ID da Loja do seu aplicativo (um exemplo de valor da ID da Loja é semelhante a 9NBLGGH4R315).
Opcionalmente, você pode ativar o controle de anúncios para o AdControl definindo as configurações na seção Configurações de controle na página Anúncios no aplicativo. O controle de anúncios permite que você maximize sua receita de anúncios e recursos de promoção de aplicativos exibindo anúncios de várias redes de anúncios, incluindo anúncios de outras redes de anúncios pagos, como Taboola e Smaato, e anúncios para campanhas de promoção de aplicativos da Microsoft.
Em seu código, substitua os valores de unidade de anúncio de teste (applicationId e adUnitId) pelos valores dinâmicos gerados no Partner Center.
Envie seu aplicativo para a Loja usando o Partner Center.
Examine seus relatórios de desempenho de publicidade no Partner Center.
Gerenciar blocos de anúncios para vários controles de anúncios no seu aplicativo
Você pode usar vários objetos AdControl em um único aplicativo (por exemplo, cada página em seu aplicativo pode hospedar um objeto AdControl diferente). Nesse cenário, recomendamos que você atribua uma unidade de anúncio diferente a cada controle. O uso de blocos de anúncios diferentes para cada controle permite que você defina separadamente as configurações de controle e obtenha dados de relatórios discretos para cada controle. Isso também permite que nossos serviços otimizem melhor os anúncios que veiculamos em seu aplicativo.
Importante
Você pode usar cada bloco de anúncios em apenas um aplicativo. Se você usar um bloco de anúncios em mais de um aplicativo, os anúncios não serão veiculados para esse bloco de anúncios.