Guide to implement AMP for your WordPress site in less than 15 minutes. Including implement Google Analytics and Google Adsense.

1. AMP for WordPress
Jakarta WordPress Meetup #15
Ivan Kristianto
@ivankristianto

2. Tentang Saya
• Nama saya Ivan Kristianto
• Senior Web Engineer at 10up
• WordPress core contributor
• ElasticPress team member
• Jakarta WordPress Meetup Organizer

3. AMP for WordPress Plugin
https://wordpress.org/plugins/amp/

4. Download, Install & Activate Plugin

7. Google
Analytics di
AMP

8. Google Analytics
JSON Template
{
"vars": {
"account": "UA-XXXXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
},
"trackClick": {
"on": "click",
"selector": "a",
"request": "event",
"vars": {
"eventAction": "click"
}
}
}
}
https://gist.github.com/ivankristianto/544ff778146f769b1dbd775bd70de109

9. Google
Adsense di
AMP

10. Iklan Otomatis untuk AMP
Iklan otomatis untuk AMP secara otomatis menempatkan Iklan
otomatis AdSense di halaman AMP Anda.
Setelah menambahkan skrip otomatis AMP dan kode iklan, Google
akan secara otomatis menampilkan iklan pada halaman AMP Anda
pada waktu yang optimal saat iklan cenderung berperforma baik dan
memberikan pengalaman yang baik.
https://support.google.com/adsense/answer/9011462?hl=id

11. Langkah 1: Enable Auto Ads for AMP

12. Langkah 2: Tambahkan javascript ke header
https://gist.github.com/ivankristianto/f8872192f3d01f508a00f07833fa7e2f

13. Langkah 3: Tambahkan code AMP ke Body

14. Cara Menambahkan AMP Ads ke Tema WordPress
• Ambil kode yang dari langkah 2, tambahkan di file functions.php dalam tema
Anda di baris paling akhir sebelum penutupan tag PHP ?>
• Kemudian tambahkan folder dengan nama “amp”, dalam folder tema Anda
• Copy file single.php dari plugins/amp/templates/single.php
• Sisipkan kode dari langkah 3, ke dalam kode tersebut, setelah code </header>
• Validate artikel Anda dengan dengan tools: https://validator.ampproject.org/
• Jika Sudah valid, tunggu sekitar 2 jam, maka ads akan muncul di website Anda

15. Google
Adsense in
AMP

16. Useful Resources
• https://www.ampproject.org/
• https://validator.ampproject.org/ & https://search.google.com/test/amp
• Auto Ads for AMP: https://support.google.com/adsense/answer/9011462
• Analytics for AMP: https://developers.google.com/analytics/devguides/collection/amp-analytics/
• AMP for WordPress Repo: https://github.com/Automattic/amp-wp
• Test site speed on 3G: https://testmysite.thinkwithgoogle.com/
• Free AMP template: https://ampstart.com/
• AMP by Example: https://ampbyexample.com/
• WP-ID Slack: https://chat.wp-id.org/, channel #amp

17. Q&A