Panduan pemecahan masalah HTML dan JavaScript

Peringatan

Mulai 1 Juni 2020, platform Monetisasi Iklan Microsoft untuk Windows aplikasi UWP akan ditutup. Pelajari lebih lanjut

Topik ini berisi solusi untuk masalah pengembangan umum dengan pustaka iklan Microsoft di aplikasi JavaScript / HTML.

HTML

AdControl tidak muncul

  1. Pastikan bahwa kemampuan Internet (Klien) dipilih di Package.appxmanifest.

  2. Pastikan referensi JavaScript ada. Tanpa referensi ad.js di <bagian kepala> (setelah referensi default.js) AdControl tidak akan dapat ditampilkan dan kesalahan akan terjadi selama build.

    <head>
        ...
        <script src="//Microsoft.Advertising.JavaScript/ad.js"></script>
        ...
    </head>
    
  3. Periksa ID aplikasi dan ID unit iklan. ID ini harus sesuai dengan ID aplikasi dan ID unit iklan yang Anda peroleh di Pusat Mitra. Untuk informasi selengkapnya, lihat Menyiapkan unit iklan di aplikasi Anda.

    <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>
    
  4. Periksa properti tinggi dan lebar . Ini harus diatur ke salah satu ukuran iklan yang didukung untuk iklan 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>
    
  5. Periksa posisi elemen. AdControl harus berada di dalam area yang dapat dilihat.

  6. Periksa properti visibilitas . Properti ini tidak boleh diatur untuk runtuh atau disembunyikan. Properti ini dapat diatur sebaris (seperti yang ditunjukkan di bawah) atau dalam lembar gaya eksternal.

    <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>
    
  7. Periksa properti posisi . Properti posisi harus diatur ke nilai yang sesuai tergantung pada properti elemen lainnya (misalnya, margin dalam elemen induk dan z-index). Properti ini dapat diatur sebaris (seperti yang ditunjukkan di bawah) atau dalam lembar gaya eksternal.

    <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>
    
  8. Periksa properti z-index . Properti z-index harus diatur cukup tinggi sehingga AdControl selalu muncul di atas elemen lain. Properti ini dapat diatur sebaris (seperti yang ditunjukkan di bawah) atau dalam lembar gaya eksternal.

    <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>
    
  9. Periksa lembar gaya eksternal. Jika properti diatur pada elemen AdControl melalui style sheet eksternal, pastikan semua properti di atas diatur dengan benar.

    <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>
    
  10. Periksa induk AdControl. Jika AdControl berada dalam elemen induk, induk harus aktif dan terlihat.

    <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>
    
  11. Pastikan AdControl tidak disembunyikan dari viewport. AdControl harus terlihat agar iklan ditampilkan dengan benar.

  12. Nilai langsung untuk ApplicationId dan AdUnitId tidak boleh diuji di emulator. Untuk memastikan AdControl berfungsi seperti yang diharapkan, gunakan nilai pengujian untuk ApplicationId dan AdUnitId.

  1. Periksa kembali semua langkah di bagian AdControl sebelumnya yang tidak muncul .

  2. Tangani peristiwa onErrorOccurred , dan gunakan pesan yang diteruskan ke penangan peristiwa untuk menentukan apakah terjadi kesalahan dan jenis kesalahan apa yang dilemparkan. Detail lebih lanjut dapat ditemukan dalam Penanganan kesalahan di panduan 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>
    

    Kesalahan paling umum yang menyebabkan kotak hitam adalah "Tidak ada iklan yang tersedia." Kesalahan ini berarti tidak ada iklan yang tersedia untuk dikembalikan dari permintaan.

  3. AdControl berperilaku normal. Secara default, AdControl akan diciutkan saat tidak dapat menampilkan iklan. Jika elemen lain adalah anak-anak dari orang tua yang sama, mereka dapat bergerak untuk mengisi celah AdControl yang runtuh dan berkembang saat permintaan berikutnya dibuat.

Iklan tidak menyegarkan

  1. Periksa properti isAutoRefreshEnabled . Secara default, properti opsional ini diatur ke true. Saat diatur ke false, metode refresh harus digunakan untuk mengambil iklan lain.

    <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>
    
  2. Periksa panggilan ke metode refresh . Saat menggunakan refresh otomatis, refresh tidak dapat digunakan untuk mengambil iklan lain. Saat menggunakan refresh manual, refresh harus dipanggil hanya setelah minimal 30 hingga 60 detik tergantung pada koneksi data perangkat saat ini.

    Contoh ini menunjukkan cara menggunakan metode refresh . Kode HTML berikut menunjukkan contoh cara instantiate AdControl dengan isAutoRefreshEnabled diatur ke 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>
    

    Contoh Theis menunjukkan cara menggunakan fungsi refresh .

    args.setPromise(WinJS.UI.processAll()
        .then(function (args) {
            window.setInterval(function()
            {
                document.getElementById("myAd").winControl.refresh();
            }, 60000)
        })
    );
    
  3. AdControl berperilaku normal. Terkadang iklan yang sama akan muncul lebih dari sekali berturut-turut memberikan tampilan bahwa iklan tidak menyegarkan.

JavaScript

AdControl tidak muncul

  1. Pastikan bahwa kemampuan Internet (Klien) dipilih di Package.appxmanifest.

  2. Pastikan AdControl di-instantiated. Jika AdControl tidak instantiated. itu tidak akan tersedia.

    Cuplikan berikut menunjukkan contoh instantiating AdControl. Kode HTML ini menunjukkan contoh menyiapkan UI untuk 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>
    

    Kode JavaScript berikut menunjukkan contoh instantiating 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 {
                ...
            }
        }
    }
    
  3. Periksa elemen induk. Div >induk< harus ditetapkan dengan benar, aktif, dan terlihat.

    var adDiv = document.getElementById("myAd");
    var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv, {
        applicationId: "{ApplicationID}",
        adUnitId: "{AdUnitID}"
    });  
    
  4. Periksa ID aplikasi dan ID unit iklan. ID ini harus sesuai dengan ID aplikasi dan ID unit iklan yang Anda peroleh di Pusat Mitra. Untuk informasi selengkapnya, lihat Menyiapkan unit iklan di aplikasi Anda.

    var myAdControl = new MicrosoftNSJS.Advertising.AdControl(adDiv, {
        applicationId: "{ApplicationID}",
        adUnitId: "{AdUnitID}"
    });  
    
  5. Periksa elemen induk AdControl. Orang tua harus aktif dan terlihat.

  6. Nilai langsung untuk ApplicationId dan AdUnitId tidak boleh diuji di emulator. Untuk memastikan AdControl berfungsi seperti yang diharapkan, gunakan nilai pengujian untuk ApplicationId dan AdUnitId.

  1. Periksa kembali semua langkah di bagian AdControl tidak muncul .

  2. Tangani peristiwa onErrorOccurred , dan gunakan pesan yang diteruskan ke penangan peristiwa untuk menentukan apakah terjadi kesalahan dan jenis kesalahan apa yang dilemparkan. Detail lebih lanjut dapat ditemukan dalam Penanganan kesalahan di panduan JavaScript.

    Contoh ini menunjukkan cara menerapkan penangan kesalahan yang melaporkan pesan kesalahan. Cuplikan kode HTML ini memberikan contoh cara mengatur UI untuk menampilkan pesan kesalahan.

    <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>
    

    Contoh ini menunjukkan cara instantiate AdControl. Fungsi ini akan dimasukkan dalam file app.onactivated.

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

    Contoh ini menunjukkan cara melaporkan kesalahan. Fungsi ini akan dimasukkan di bawah fungsi self-running dalam file 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;
        }
    );
    

    Kesalahan paling umum yang menyebabkan kotak hitam adalah "Tidak ada iklan yang tersedia." Kesalahan ini berarti tidak ada iklan yang tersedia untuk dikembalikan dari permintaan.

  3. AdControl berperilaku normal. Terkadang iklan yang sama akan muncul lebih dari sekali berturut-turut memberikan tampilan bahwa iklan tidak menyegarkan.

Iklan tidak menyegarkan

  1. Periksa apakah properti IsAutoRefreshEnabledanda diatur ke false. Secara default, properti opsional ini diatur ke true. Saat diatur ke false, metode Refresh harus digunakan untuk mengambil iklan lain.

  2. Periksa panggilan ke metode Refresh . Saat menggunakan refresh otomatis (IsAutoRefreshEnabledtrue), Refresh tidak dapat digunakan untuk mengambil iklan lain. Saat menggunakan refresh manual (IsAutoRefreshEnabledsalah), Refresh harus dipanggil hanya setelah minimal 30 hingga 60 detik tergantung pada koneksi data perangkat saat ini.

    Contoh ini menunjukkan cara membuat div untuk 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>
    

    Contoh ini menunjukkan cara menggunakan fungsi 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)
        })
    );
    
  3. AdControl berperilaku normal. Terkadang iklan yang sama akan muncul lebih dari sekali berturut-turut memberikan tampilan bahwa iklan tidak menyegarkan.