AdControl in HTML 5 e JavaScript

  • Articolo

Avviso

A partire dal 1° giugno 2020, la piattaforma Microsoft Ad Monetization per le app Windows UWP verrà arrestata. Ulteriori informazioni

Questa procedura dettagliata illustra come usare la classe AdControl per visualizzare annunci banner in un'app JavaScript/HTML (UWP) piattaforma UWP (Universal Windows Platform) (UWP) per Windows 10 e Windows 11.

Per un progetto di esempio completo che illustra come aggiungere banner pubblicitari a un'app JavaScript/HTML, vedere gli esempi di annunci in GitHub.

Prerequisiti

Nota

Se è stato installato Windows 10 SDK versione 10.0.14393 (aggiornamento anniversario) o una versione successiva di Windows SDK, è necessario installare anche la libreria WinJS. Questa libreria è stata inclusa nelle versioni precedenti di Windows SDK per Windows 10, ma a partire da Windows 10 SDK versione 10.0.14393 (aggiornamento anniversario) questa libreria deve essere installata separatamente.

Integrare un annuncio banner nell'app

  1. In Visual Studio aprire il progetto o crearne uno nuovo.

    Nota

    Se si usa un progetto esistente, aprire il file Package.appxmanifest nel progetto e assicurarsi che sia selezionata la funzionalità Internet (Client). L'app ha bisogno di questa funzionalità per ricevere annunci di test e annunci live.

  2. Se il progetto è destinato a qualsiasi CPU, aggiornare il progetto in modo da usare un output di compilazione specifico dell'architettura (ad esempio, x86). Se il progetto è mirato a Qualsiasi CPU, non sarà possibile aggiungere correttamente un riferimento alla libreria Microsoft Advertising nei passaggi seguenti. Per altre informazioni, vedere Errori di riferimento causati dalla destinazione Qualsiasi CPU nel progetto.

  3. Aggiungere un riferimento a Microsoft Advertising SDK nel progetto:

    1. Dalla finestra Solution Explorer, fare clic con il tasto destro del mouse su References e selezionare Aggiungi rifermento…
    2. In Gestione riferimenti, espandere Window universale, fare clic su Estensioni e quindi selezionare la casella di spunta accanto a Microsoft Advertising SDK per JavaScript (versione 10.0).
    3. In Gestione riferimenti fare clic su OK.

  4. Aprire il file index.html (o altro file HTML in base alle esigenze del progetto).

  5. Nella sezione <head>, dopo i riferimenti JavaScript del progetto di default.css e main.js, aggiungere il riferimento a ad.js.

    <!-- Advertising required references -->
<script src="//Microsoft.Advertising.JavaScript/ad.js"></script>

    Nota

    Questa riga deve essere inserita nella sezione <testa> dopo l'inclusione di main.js; in caso contrario, si verifica un errore durante la compilazione del progetto.

  6. Modificare la sezione <corpo> nel file default.html (o un altro file HTML in base alle esigenze del progetto) in modo da includere il div per AdControl. Assegnare le proprietà applicationId e adUnitId di AdControl ai valori unità annunci di prova. Regolare anche l'altezza e la larghezza in modo che il controllo sia una delle dimensioni degli annunci supportate per gli annunci banner.

    Nota

    Ogni AdControl ha una unità pubblicitaria corrispondente usata dai nostri servizi per fornire annunci al controllo e ogni unità pubblicitaria è costituita da un ID unità pubblicitaria e un ID applicazione. In questi passaggi si assegnano i valori ID unità annunci di prova e ID applicazione al controllo. Questi valori di test possono essere usati solo in una versione di test dell'app. Prima di pubblicare l'app nello Store, è necessario sostituire questi valori di test con i valori dinamici del 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: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test'}">
</div>

  7. Compilare ed eseguire l'app per visualizzarla con un annuncio.

L'esempio seguente mostra index.html completo per una semplice app.

<!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: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test'}">
    </div>
    <p>Content goes here</p>
</body>
</html>

Creare un oggetto AdControl a livello di codice in JavaScript

I passaggi precedenti illustrano come dichiarare un Oggetto AdControl nel markup HTML. In alternativa, è possibile creare un Oggetto AdControl a livello di codice usando JavaScript. In questo esempio si presuppone che si stia usando un div esistente nel codice HTML con l'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;

In questo esempio si presuppone che siano già stati dichiarati metodi del gestore eventi denominati myAdError, myAdRefreshed e myAdEngagedChanged.

Se usi questo codice e non visualizzi annunci, puoi provare a inserire un attributo di posizione: relativa nella div che contiene AdControl. In questo modo verrà ignorata l'impostazione predefinita di IFrame. Gli annunci verranno visualizzati correttamente, a meno che non vengano visualizzati a causa del valore di questo attributo. Tieni presente che le nuove unità pubblicitarie potrebbero non essere disponibili per un massimo di 30 minuti.

Nota

I valori applicationId e adUnitId mostrati in questo esempio sono valori della modalità test. Si deve sostituire questi valori con i valori live del Partner Center prima di inviare l' app per l'invio.

Rilasciare l'app con annunci live

  1. Assicurarsi che l'uso degli annunci banner nella sua app segua le nostre linee guida per gli annunci banner.

  2. In Partner Center, andare alla pagina annunci In-app e creare una unità annuncio. Per il tipo di unità pubblicitaria, specificare Banner. Prendere nota sia dell'ID unità pubblicitaria che dell'ID applicazione.

    Nota

    I valori dell'ID applicazione per le unità annunci di test e le unità annunci UWP live hanno formati diversi. I valori id applicazione di test sono GUID. Quando crei un'unità annunci UWP live nel Centro per i partner, il valore dell'ID applicazione per l'unità annunci corrisponde sempre all'ID dello Store per la tua app (un valore di ID dello Store di esempio è 9NBLGGH4R315).

  3. Facoltativamente, è possibile abilitare l'aggregazione degli annunci pubblicitari per AdControl configurando le impostazioni nella sezione Impostazioni di aggregazione nella pagina Annunci in-app. L'aggregazione degli annunci pubblicitari ti consente di massimizzare le entrate pubblicitarie e le funzionalità di promozione delle app visualizzando annunci da più reti pubblicitarie, inclusi annunci di altre reti pubblicitarie a pagamento comeTaboola e Smaato e annunci per campagne di promozione di app Microsoft che non generano profitti.

  4. Nel codice, sostituire i valori delle unità annunci di test (applicationId e adUnitId) con i valori dinamici generati nel Partner Center.

  5. Inviare l'app allo Store usando il Partner Center.

  6. Esaminare i report sulle prestazioni delle pubblicità nel Partner Center.

Gestire unità annunci per più controlli annunci nell'app

Si possono usare più oggetti AdControl in una singola app (ad esempio, ogni pagina dell'app potrebbe ospitare un oggetto AdControl diverso). In questo scenario, consigliamo di assegnare un'unità annunci diversa a ogni controllo. L'uso di unità annunci diverse per ogni controllo consente di configurare separatamente le impostazioni di aggregazione e ottenere dati di report discreti per ogni controllo. Ciò consente anche ai nostri servizi di ottimizzare meglio gli annunci che avremo usato per la tua app.

Importante

Puoi usare ogni unità annunci in una sola app. Se usi un'unità annunci in più app, gli annunci non verranno resi disponibili per tale unità annunci.