Docs
AMP

amp-ad

How to write the correct Adsense ad code on the AMP platform.
Translate

Install JS libraries

The thing that must be prepared to display ads on AMP is to ensure that the script has been installed in the theme, the script for <amp-ad> is as below:

<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>

<amp-ad> also supports other ad networks including Adsense, see the full list.

In the latest update amp-ad-0.1.js script has been added to the theme, so you no longer need to add this script.

Copy the ad code from Google Adsense

The good news is that Google Adsense fully supports AMP, you will get the option to use <amp-ad> or not when creating a new ad unit, this is an example of the <amp-ad> code you will get:

<amp-ad width='100vw' height='320'
  type='adsense'
  data-ad-client='ca-pub-000000000000000'
  data-ad-slot='0000000000'
  data-auto-format='rspv'
  data-full-width=''>
  <div overflow=''></div>
</amp-ad>

Place the obtained <amp-ad> code into the preferred section or use <amp-auto-ads>.

Setting up the amp-auto-ads

  1. Login/go to Adsense dashboard.
  2. Click Ads.
  3. Click Already have an AMP site?
  4. On the "Auto ads for AMP" page, enable Auto ads for AMP.
  5. In the "Ad formats" section, disable all ad formats that you don't want to display on your AMP site. (Optional)
  6. Copy the amp-auto-ads-0.1.js script or find and enable code like this inside the <head> tag: 
    <!--<script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>-->
  7. Copy the <amp-auto-ads> or find the code like the one below (right after the <body> tag) and replace data-ad-client value with your Adsense Publisher ID. 
    <!--[ Adsense script placement ]-->
<!--<amp-auto-ads type='adsense' data-ad-client='ca-pub-0000000000000000'/>-->

    Hint: Remove the opening and closing comment tags <!-- --> to activate the code.

  8. Click Done, it will take at least 1 hour for the ads to appear.

Install JS library

Hal yang harus dipersiapkan untuk menampilkan iklan di AMP adalah memastikan script sudah terpasang di tema, script untuk <amp-ad> seperti di bawah ini:

<script async='async' custom-element='amp-ad' src='https://cdn.ampproject.org/v0/amp-ad-0.1.js'/>

<amp-ad> juga mendukung jaringan iklan lain termasuk Adsense.

Dalam pembaruan terbaru, script amp-ad-0.1.js telah ditambahkan ke tema, sehingga Anda tidak perlu lagi menambahkan script ini.

Menyalin kode iklan dari Google Adsense

Kabar baiknya adalah Google Adsense mendukung penuh AMP, Anda akan mendapatkan pilihan untuk menggunakan <amp-ad> atau tidak ketika membuat unit iklan baru, ini adalah contoh kode <amp-ad> yang akan Anda dapatkan:

<amp-ad width='100vw' height='320'
  type='adsense'
  data-ad-client='ca-pub-000000000000000'
  data-ad-slot='0000000000'
  data-auto-format='rspv'
  data-full-width=''>
  <div overflow=''></div>
</amp-ad>

Tempatkan kode <amp-ad> yang diperoleh ke bagian yang diinginkan atau gunakan <amp-auto-ads>.

Menyiapkan amp-auto-ads

  1. Login/masuk ke dasbor Adsense
  2. Klik Iklan.
  3. Klik Sudah memiliki situs AMP?
  4. Di halaman "Iklan otomatis untuk AMP", aktifkan Iklan otomatis untuk AMP.
  5. Di bagian "Format iklan", nonaktifkan semua format iklan yang tidak ingin Anda tampilkan di situs AMP. (Opsional)
  6. Salin script amp-auto-ads-0.1.js atau temukan dan aktifkan kode seperti ini di dalam tag <head>: 
    <!--<script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>-->
  7. Salin <amp-auto-ads> atau temukan kode seperti di bawah ini (tepat setelah tag <body>) dan ganti nilai data-ad-client dengan ID Penayang Adsense Anda. 
    <!--[ Adsense script placement ]-->
<!--<amp-auto-ads type='adsense' data-ad-client='ca-pub-0000000000000000'/>-->

    Petunjuk: Hapus tag komentar pembuka dan penutup <!-- --> untuk mengaktifkan kode.

  8. Klik Selesai, akan memakan waktu setidaknya 1 jam untuk iklan muncul.
External links: Pranala luar: