Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Amp for WordPress - WordPress Jakarta Meetup #15

277 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Amp for WordPress - WordPress Jakarta Meetup #15

  1. 1. AMP for WordPress Jakarta WordPress Meetup #15 Ivan Kristianto @ivankristianto
  2. 2. Tentang Saya • Nama saya Ivan Kristianto • Senior Web Engineer at 10up • WordPress core contributor • ElasticPress team member • Jakarta WordPress Meetup Organizer
  3. 3. AMP for WordPress Plugin https://wordpress.org/plugins/amp/
  4. 4. Download, Install & Activate Plugin
  5. 5. Google Analytics di AMP
  6. 6. 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
  7. 7. Google Adsense di AMP
  8. 8. 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
  9. 9. Langkah 1: Enable Auto Ads for AMP
  10. 10. Langkah 2: Tambahkan javascript ke header https://gist.github.com/ivankristianto/f8872192f3d01f508a00f07833fa7e2f
  11. 11. Langkah 3: Tambahkan code AMP ke Body
  12. 12. 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
  13. 13. Google Adsense in AMP
  14. 14. 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
  15. 15. Q&A

×