Guia de solução de problemas em HTML e JavaScript

Artigo
07/05/2024

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 tópico contém soluções para problemas comuns de desenvolvimento com as bibliotecas do Microsoft Advertising em aplicativos JavaScript/HTML.

HTML
JavaScript

HTML

AdControl não aparece

Verifique se a funcionalidade Internet (Cliente) está selecionada em Package.appxmanifest.
Verifique se a referência JavaScript está presente. Sem a referência ad.js na <seção head> (após a referência default.js), o AdControl não poderá ser exibido e ocorrerá um erro durante a compilação.
```
<head>
    ...
    <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
    ...
</head>
```

Verifique o ID do aplicativo e o ID do bloco de anúncios. Essas IDs devem corresponder à ID do aplicativo e à ID da unidade de anúncio que você obteve no Partner Center. Para obter mais informações, consulte Configurar blocos de anúncios no seu aplicativo.

<div id="myAd" style="position: absolute; top: 50px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

Verifique as propriedades height e width. Eles devem ser definidos como um dos tamanhos de anúncio compatíveis com anúncios em banner.

<div id="myAd" style="position: absolute; top: 50px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

Verifique o posicionamento do elemento. O AdControl deve estar dentro da área visível.

Verifique a propriedade de visibilidade . Essa propriedade não deve ser definida como recolhida ou oculta. Essa propriedade pode ser definida embutida (conforme mostrado abaixo) ou em uma folha de estilos externa.

<div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                      left: 500px; width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

Verifique a propriedade position. A propriedade position deve ser definida como um valor apropriado, dependendo das outras propriedades do elemento (por exemplo, margens no elemento pai e z-index). Essa propriedade pode ser definida embutida (conforme mostrado abaixo) ou em uma folha de estilos externa.

<div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                      left: 500px; width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

Verifique a propriedade z-index . A propriedade z-index deve ser definida como alta o suficiente para que o AdControl sempre apareça sobre outros elementos. Essa propriedade pode ser definida embutida (conforme mostrado abaixo) ou em uma folha de estilos externa.

<div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                      left: 500px; width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

Verifique as folhas de estilo externas. Se as propriedades forem definidas no elemento AdControl por meio de uma folha de estilos externa, verifique se todas as propriedades acima estão definidas corretamente.

<div id="myAd" style="visibility: visible; position: absolute; top: 1025px;
                      left: 500px; width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID'}">
</div>

Verifique o pai do AdControl. Se o AdControl residir em um elemento pai, o pai deverá estar ativo e visível.

<div style="position: absolute; width: 500px; height: 500px;">
    <div id="myAd" style="position: relative; top: 0px; left: 100px;
                          width: 250px; height: 250px; z-index: 1"
         data-win-control="MicrosoftNSJS.Advertising.AdControl"
         data-win-options="{applicationId: 'ApplicationID',
                            adUnitId: 'AdUnitID'}">
    </div>
</div>

Certifique-se de que o AdControl não esteja oculto da janela de visualização. O AdControl deve estar visível para que os anúncios sejam exibidos corretamente.
Os valores dinâmicos para ApplicationId e AdUnitId não devem ser testados no emulador. Para garantir que o AdControl esteja funcionando conforme o esperado, use os valores de teste para ApplicationId e AdUnitId.

Caixa preta pisca e desaparece

Verifique novamente todas as etapas na seção anterior AdControl não aparecendo .

Manipule o evento onErrorOccurred e use a mensagem passada para o manipulador de eventos para determinar se ocorreu um erro e que tipo de erro foi gerado. Mais detalhes podem ser encontrados no passo a passo do tratamento de erros no JavaScript.

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 728px; height: 90px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID',
                        onErrorOccurred: errorLogger}">
</div>
<div style="position:absolute; width:100%; height:130px; top:300px; left:0px">
    <b>Ad Events</b><br />
    <div id="adEvents" style="width:100%; height:110px; overflow:auto"></div>
</div>

O erro mais comum que causa uma caixa preta é "Nenhum anúncio disponível". Esse erro significa que não há anúncio disponível para retornar da solicitação.

O AdControl está se comportando normalmente. Por padrão, o AdControl será recolhido quando não puder exibir um anúncio. Se outros elementos forem filhos do mesmo pai, eles poderão se mover para preencher a lacuna do AdControl recolhido e expandir quando a próxima solicitação for feita.

Anúncios não são atualizados

Verifique a propriedade isAutoRefreshEnabled . Por padrão, essa propriedade opcional é definida como true. Quando definido como false, o método de atualização deve ser usado para recuperar outro anúncio.

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{ applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID',
                        onErrorOccurred: errorLogger,
                        isAutoRefreshEnabled: true}">
</div>

Verifique as chamadas para o método refresh . Ao usar a atualização automática, a atualização não pode ser usada para recuperar outro anúncio. Ao usar a atualização manual, a atualização deve ser chamada somente após um mínimo de 30 a 60 segundos, dependendo da conexão de dados atual do dispositivo.

Este exemplo demonstra como usar o método refresh . O código HTML a seguir mostra um exemplo de como instanciar o AdControl com isAutoRefreshEnabled definido como false.

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl"
     data-win-options="{ applicationId: 'ApplicationID',
                        adUnitId: 'AdUnitID',
                        onErrorOccurred: errorLogger,
                        isAutoRefreshEnabled: false}">
</div>

Este exemplo demonstra como usar a função de atualização .

args.setPromise(WinJS.UI.processAll()
    .then(function (args) {
        window.setInterval(function()
        {
            document.getElementById("myAd").winControl.refresh();
        }, 60000)
    })
);

O AdControl está se comportando normalmente. Às vezes, o mesmo anúncio será exibido mais de uma vez seguida, dando a impressão de que os anúncios não são atualizados.

JavaScript

AdControl não aparece

Verifique se a funcionalidade Internet (Cliente) está selecionada em Package.appxmanifest.

Verifique se o AdControl foi instanciado. Se o AdControl não for instanciado. não estará disponível.

Os snippets a seguir mostram um exemplo de instanciação do AdControl. Este código HTML mostra um exemplo de configuração da interface do usuário para o AdControl

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl">
</div>

O código JavaScript a seguir mostra um exemplo de instanciação do AdControl

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
        if (args.detail.previousExecutionState !==
                activation.ApplicationExecutionState.terminated)
        {
            var adDiv = document.getElementById("myAd");
            var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
            {
                applicationId: "{ApplicationID}",
                adUnitId: "{AdUnitID}"
             });                
             myAdControl.onErrorOccurred = myAdError;
        } else {
            ...
        }
    }
}

Verifique o elemento pai. O div> pai <deve estar corretamente atribuído, ativo e visível.

var adDiv = document.getElementById("myAd");
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv, {
    applicationId: "{ApplicationID}",
    adUnitId: "{AdUnitID}"
});

Verifique o ID do aplicativo e o ID do bloco de anúncios. Essas IDs devem corresponder à ID do aplicativo e à ID da unidade de anúncio que você obteve no Partner Center. Para obter mais informações, consulte Configurar blocos de anúncios no seu aplicativo.
```
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv, {
    applicationId: "{ApplicationID}",
    adUnitId: "{AdUnitID}"
});  
```
Verifique o elemento pai do AdControl. O pai deve estar ativo e visível.
Os valores dinâmicos para ApplicationId e AdUnitId não devem ser testados no emulador. Para garantir que o AdControl esteja funcionando conforme o esperado, use os valores de teste para ApplicationId e AdUnitId.

Caixa preta pisca e desaparece

Verifique novamente todas as etapas na seção AdControl que não aparece.
Manipule o evento onErrorOccurred e use a mensagem passada para o manipulador de eventos para determinar se ocorreu um erro e que tipo de erro foi gerado. Mais detalhes podem ser encontrados no passo a passo do tratamento de erros no JavaScript.

Este exemplo demonstra como implementar um manipulador de erros que relata mensagens de erro. Este trecho de código HTML fornece um exemplo de como configurar a interface do usuário para exibir mensagens de erro.
```
<div style="position:absolute; width:100%; height:130px; top:300px">
    <b>Ad Events</b><br />
    <div id="adEvents" style="width:100%; height:110px; overflow:auto"></div>
</div>
```
Este exemplo demonstra como instanciar o AdControl. Essa função seria inserida no arquivo app.onactivated.
```
var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
{
    applicationId: "{ApplicationID}",
    adUnitId: "{AdUnitID}"
});                
myAdControl.onErrorOccurred = myAdError;
```
Este exemplo demonstra como relatar erros. Essa função seria inserida abaixo da função de execução automática no arquivo default.js.
```
WinJS.Utilities.markSupportedForProcessing
(
    window.errorLogger = function (sender, evt)
    {
        adEvents.innerHTML = (new Date()).toLocaleTimeString() + ": " +
        sender.element.id + " error: " + evt.errorMessage + " error code: " +
        evt.errorCode + "<br>" + adEvents.innerHTML;
    }
);
```
O erro mais comum que causa uma caixa preta é "Nenhum anúncio disponível". Esse erro significa que não há anúncio disponível para retornar da solicitação.
O AdControl está se comportando normalmente. Às vezes, o mesmo anúncio será exibido mais de uma vez seguida, dando a impressão de que os anúncios não são atualizados.

Anúncios não são atualizados

Verifique se a propriedade IsAutoRefreshEnabled do AdControl está definida como false. Por padrão, essa propriedade opcional é definida como true. Quando definido como false, o método Refresh deve ser usado para recuperar outro anúncio.

Verifique as chamadas para o método Refresh . Ao usar a atualização automática (IsAutoRefreshEnabled é true), a atualização não pode ser usada para recuperar outro anúncio. Ao usar a atualização manual (IsAutoRefreshEnabled é false), a atualização deve ser chamada somente após um mínimo de 30 a 60 segundos, dependendo da conexão de dados atual do dispositivo.

Este exemplo demonstra como criar o div para o AdControl.

<div id="myAd" style="position: absolute; top: 0px; left: 0px;
                      width: 250px; height: 250px; z-index: 1"
     data-win-control="MicrosoftNSJS.Advertising.AdControl">
</div>

Este exemplo mostra como usar a função Refresh

var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv,
{
  applicationId: "{ApplicationID}",
  adUnitId: "{AdUnitID}",
  isAutoRefreshEnabled: false
});
...
args.setPromise(WinJS.UI.processAll()
    .then(function (args) {
        window.setInterval(function()
        {
            document.getElementById("myAd").winControl.refresh();
        }, 60000)
    })
);

O AdControl está se comportando normalmente. Às vezes, o mesmo anúncio será exibido mais de uma vez seguida, dando a impressão de que os anúncios não são atualizados.

Partilhar via

Guia de solução de problemas em HTML e JavaScript

HTML

AdControl não aparece

Caixa preta pisca e desaparece

Anúncios não são atualizados

JavaScript

AdControl não aparece

Caixa preta pisca e desaparece

Anúncios não são atualizados

Comentários

Recursos adicionais