Panduan pemecahan masalah HTML dan JavaScript

Artikel
07/13/2023

Peringatan

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

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

HTML
JavaScript

HTML

AdControl tidak muncul

Pastikan bahwa kemampuan Internet (Klien) dipilih di Package.appxmanifest.
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>
```

Periksa ID aplikasi dan ID unit iklan. ID ini harus cocok 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>

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>

Periksa posisi elemen. AdControl harus berada di dalam area yang dapat dilihat.

Periksa properti visibilitas. Properti ini tidak boleh diatur untuk diciutkan 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>

Periksa properti posisi. Properti posisi harus diatur ke nilai yang sesuai tergantung pada properti lain elemen (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>

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>

Periksa lembar gaya eksternal. Jika properti diatur pada elemen AdControl melalui lembar gaya 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>

Periksa induk AdControl. Jika AdControl berada di 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>

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

Kotak hitam berkedip dan menghilang

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

Tangani peristiwa onErrorOccurred, dan gunakan pesan yang diteruskan ke penanganan aktivitas untuk menentukan apakah terjadi kesalahan dan jenis kesalahan apa yang dilemparkan. Detail selengkapnya dapat ditemukan di 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.

AdControl berulah secara normal. Secara default, AdControl akan diciutkan saat tidak dapat menampilkan iklan. Jika elemen lain adalah turunan dari induk yang sama, mereka dapat bergerak untuk mengisi celah AdControl yang diciutkan dan diperluas saat permintaan berikutnya dibuat.

Iklan tidak di-refresh

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>

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 membuat instans 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)
    })
);

AdControl berulah secara normal. Terkadang iklan yang sama akan muncul lebih dari sekali berturut-turut yang memberikan tampilan bahwa iklan tidak di-refresh.

JavaScript

AdControl tidak muncul

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

Pastikan AdControl dibuat instans. Jika AdControl tidak dibuat. tidak akan tersedia.

Cuplikan berikut menunjukkan contoh pembuatan instans AdControl. Kode HTML ini menunjukkan contoh pengaturan 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 pembuatan instans 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 {
            ...
        }
    }
}

Periksa elemen induk. Induk <div> harus ditetapkan, aktif, dan terlihat dengan benar.

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

Periksa ID aplikasi dan ID unit iklan. ID ini harus cocok 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}"
});  
```
Periksa elemen induk AdControl. Induk harus aktif dan terlihat.
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.

Kotak hitam berkedip dan menghilang

Periksa kembali semua langkah di bagian AdControl tidak muncul .
Tangani peristiwa onErrorOccurred, dan gunakan pesan yang diteruskan ke penanganan aktivitas untuk menentukan apakah terjadi kesalahan dan jenis kesalahan apa yang dilemparkan. Detail selengkapnya dapat ditemukan di Penanganan kesalahan di panduan JavaScript.

Contoh ini menunjukkan cara menerapkan penanganan kesalahan yang melaporkan pesan kesalahan. Cuplikan kode HTML ini memberikan contoh cara menyiapkan 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 membuat instans AdControl. Fungsi ini akan disisipkan 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 disisipkan di bawah fungsi yang berjalan sendiri 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.
AdControl berulah secara normal. Terkadang iklan yang sama akan muncul lebih dari sekali berturut-turut yang memberikan tampilan bahwa iklan tidak di-refresh.

Iklan tidak di-refresh

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

Periksa panggilan ke metode Refresh . Saat menggunakan refresh otomatis (IsAutoRefreshEnabled adalah true), Refresh tidak dapat digunakan untuk mengambil iklan lain. Saat menggunakan refresh manual (IsAutoRefreshEnabled salah), 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 memperlihatkan 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)
    })
);

AdControl berulah secara normal. Terkadang iklan yang sama akan muncul lebih dari sekali berturut-turut yang memberikan tampilan bahwa iklan tidak di-refresh.

Bagikan melalui

Panduan pemecahan masalah HTML dan JavaScript

HTML

AdControl tidak muncul

Kotak hitam berkedip dan menghilang

Iklan tidak di-refresh

JavaScript

AdControl tidak muncul

Kotak hitam berkedip dan menghilang

Iklan tidak di-refresh

Saran dan Komentar

Sumber Daya Tambahan: