amp-ad

How to write the correct Adsense ad code in AMP version

Pertama-tama pastikan bahwa JS library di bawah sudah terinstal pada template Anda, jika tidak maka tambahkankan pada bagian <head>:

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

Script di atas juga sudah support untuk beberapa situs penyedia iklan lain. Pada pembaruan terbaru, script ini sudah ditambahkan dalam template jadi Anda tidak perlu melakukan apapun dengan script ini.

Google Adsense Sudah Support AMP

Kabar baiknya sekarang Google Adsense sudah sepenuhnya mendukung AMP, Anda bisa langsung mendapatkan kode <amp-ad> ketika membuat unit iklan baru, ini adalah contoh kode iklan 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>

Menyiapkan Auto Ads pada AMP

  1. Login ke akun Adsense Anda
  2. klik Iklan > Ringkasan
  3. klik Sudah memilik situs AMP?
  4. di halaman 'Dapatkan kode Adsense untuk situs AMP', aktifkan Izinkan Google menempatkan iklan display di situs AMP Anda,
  5. salin script amp-auto-ads-0.1.js atau temukan dan aktifkan kode seperti ini di dalam tag <head> blog Anda:
    <!--<script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>-->
  6. salin kode <amp-auto-ads> atau temukan kode seperti di bawah ini(tepat setelah tag <body>) lalu ganti ID Adsense yang tertera dengan milik Anda.
    <!--[ Adsense script placement ]-->
    <!--<amp-auto-ads type='adsense' data-ad-client='ca-pub-0000000000000000'/>-->

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

  7. Klik selesai, butuh waktu setidaknya 1 jam untuk menampilkan iklan di halaman blog Anda.

First make sure that the below JS library is installed in your template, if not then add it in the <head> section:

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

This script also supports several other ad provider sites. In the latest update, this script has been added in the template so you don't need to do anything with this script.

Google Adsense Already Supports AMP

The good news is that now Google Adsense fully supports AMP, you can immediately get the <amp-ad> code when creating a new ad unit, this is an example the 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>

Setting up Auto Ads on AMP

  1. Login to your Adsense account
  2. click Ads > Overview
  3. click Already have an AMP site?
  4. on the 'Get Adsense code for AMP site' page, enable Allow Google to place display ads on your AMP site,
  5. copy the amp-auto-ads-0.1.js script or find and enable code like this inside your blog's <head> tag:
    <!--<script async='async' custom-element='amp-auto-ads' src='https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js'/>-->
  6. Copy <amp-auto-ads> code or find the code below (right after the <body> tag) and replace the Adsense ID listed with yours.
    <!--[ Adsense script placement ]-->
    <!--<amp-auto-ads type='adsense' data-ad-client='ca-pub-0000000000000000'/>-->

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

  7. Click done, it will take at least 1 hour to show ads on your blog page.