Konsep Lanjutan Accelerated Mobile Pages

1. Ringkasan

Codelab ini merupakan kelanjutan dari konsep yang diperkenalkan dalam Dasar-Dasar Accelerated Mobile Pages. Anda seharusnya sudah menyelesaikan codelab sebelumnya sebelum memulai lab ini atau setidaknya sudah memiliki pemahaman dasar tentang konsep inti AMP.

Dalam codelab ini, Anda akan mempelajari cara AMP menangani iklan, analisis, penyematan video, integrasi media sosial, carousel gambar, dan lainnya. Untuk mencapainya, Anda akan membangun contoh dari codelab Dasar-Dasar dengan menambahkan fitur-fitur ini melalui berbagai komponen AMP.

Yang akan Anda pelajari

• Iklan Display dengan amp-ad.
• Sematkan video YouTube, kartu Twitter, dan elemen teks responsif.
• Buat carousel dengan gambar dan kombinasi konten menggunakan amp-carousel.
• Pola pelacakan sederhana dengan amp-analytics.
• Cara menambahkan navigasi situs ke halaman Anda.
• Cara kerja font dengan AMP.

Yang Anda butuhkan

• Kode contoh
• Chrome (atau browser setara yang dapat memeriksa konsol JavaScript)
• Python (sebaiknya 2.7) atau ekstensi Chrome 200 OK Web Server
• Editor Kode (misalnya Atom, Sublime, Notepad++)

2. Mendapatkan kode contoh

Anda dapat mendownload semua kode contoh ke komputer:

Download ZIP

...atau clone repositori GitHub dari command line:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-advanced.git

Anda akan mendownload file ZIP yang berisi beberapa file resource contoh dan halaman article.html awal.

Ekstrak folder dan buka direktori melalui command line di komputer Anda.

3. Jalankan halaman sampel tersebut

Untuk menguji halaman contoh, kita perlu mengakses file dari server web. Ada beberapa cara untuk membuat server web lokal sementara untuk tujuan pengujian. Untuk lab kode ini, kami akan memberikan petunjuk untuk 3 opsi yang tersedia:

• Aplikasi Google Chrome "Web Server for Chrome" - Ini adalah pendekatan yang direkomendasikan karena merupakan solusi lintas platform yang paling sederhana dan tersedia. Catatan: pendekatan ini mengharuskan Google Chrome diinstal.
• Firebase Hosting - Opsi alternatif jika Anda juga tertarik untuk menjelajahi platform hosting aset statis baru kami, "Firebase Hosting". Diaktifkan SSL secara default.
• Server HTTP Python lokal - Memerlukan akses ke command line.

Catatan: Sangat disarankan agar HTTPS digunakan di lingkungan produksi. HTTPS memiliki beberapa manfaat selain keamanan, termasuk SEO. Anda dapat membaca selengkapnya tentang topik ini di sini.

Opsi #1: Server Web untuk Chrome

Anda dapat menemukan aplikasi "Web Server for Chrome" di link ini di Chrome Web Store.

Setelah menginstal Aplikasi Chrome, Anda harus mengarahkan aplikasi ke folder tertentu melalui tombol "Pilih Folder". Untuk codelab ini, Anda harus memilih folder tempat Anda mengekstrak file contoh codelab.

Selain itu, Anda harus mencentang opsi "Automatically show index.html" dan menetapkan port ke "8000". Anda harus memulai ulang server web agar perubahan ini diterapkan.

Akses URL ini melalui:

http://localhost:8000/article.amp.html

Jika URL di atas berhasil dimuat, Anda dapat melanjutkan ke bagian berikutnya.

Opsi #2: Firebase Hosting

Jika Anda tertarik untuk menjelajahi hosting web statis Firebase yang baru, Anda dapat mengikuti petunjuk yang tersedia di sini untuk men-deploy situs AMP ke URL hosting Firebase.

Firebase Hosting adalah penyedia hosting statis yang dapat Anda gunakan untuk men-deploy dan menghosting situs statis serta asetnya dengan cepat, termasuk file HTML, CSS, dan JavaScript. Pengguna mendapatkan manfaat dari latensi yang lebih rendah karena konten statis di-cache di jaringan penayangan konten (CDN) dengan titik kehadiran (PoP) yang berlokasi di seluruh dunia.

Terakhir, Firebase Hosting selalu ditayangkan melalui SSL sehingga sangat cocok untuk AMP dan web secara umum. Jika Anda lebih tertarik untuk berfokus sepenuhnya pada AMP, abaikan saja opsi ini.

Opsi #3: Server Python HTTP

Jika Anda tidak menggunakan Chrome atau kesulitan menginstal ekstensi Chrome, Anda juga dapat menggunakan Python dari command line untuk mengaktifkan server web lokal.

Untuk menjalankan server HTTP bawaan Python dari command line, cukup jalankan perintah berikut:

python -m SimpleHTTPServer

Lalu akses URL ini:

http://localhost:8000/article.amp.html

4. Mempelajari komponen inti AMP

Sistem komponen AMP memungkinkan kami membangun fitur yang efisien dan responsif dengan cepat ke dalam artikel kami dengan sedikit upaya. Library JavaScript AMP inti dalam tag <head> mencakup beberapa komponen inti:

• amp-ad - Penampung untuk menampilkan iklan.
• amp-img - Pengganti tag img HTML.
• amp-pixel - Digunakan sebagai piksel pelacakan untuk menghitung tayangan halaman.
• amp-video - Pengganti tag video HTML5.

Semua komponen inti di atas dapat langsung digunakan dalam dokumen AMP. Contoh kode kita sudah menggunakan amp-img di halaman dan kita telah mempelajari hubungannya dengan sistem tata letak AMP di codelab Dasar-Dasar AMP, jadi mari kita pelajari amp-ad di bab berikutnya.

Catatan: Penyematan video HTML5 dan piksel pelacakan adalah fitur penting dalam pengembangan web. Jika Anda tertarik untuk menyematkan komponen ini, Anda dapat mempelajari halaman referensinya masing-masing di sini dan di sini.

5. Menambahkan iklan

Halaman article.amp.html contoh Anda akan terlihat seperti berikut:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script type="application/ld+json">
    {
     "@context": "http://schema.org",
     "@type": "NewsArticle",
     "mainEntityOfPage":{
       "@type":"WebPage",
       "@id":"https://example.com/my-article.html"
     },
     "headline": "My First AMP Article",
     "image": {
       "@type": "ImageObject",
       "url": "https://example.com/article_thumbnail1.jpg",
       "height": 800,
       "width": 800
     },
     "datePublished": "2015-02-05T08:00:00+08:00",
     "dateModified": "2015-02-05T09:20:00+08:00",
     "author": {
       "@type": "Person",
       "name": "John Doe"
     },
     "publisher": {
       "@type": "Organization",
       "name": "⚡ AMP Times",
       "logo": {
         "@type": "ImageObject",
         "url": "https://example.com/amptimes_logo.jpg",
         "width": 600,
         "height": 60
       }
     },
     "description": "My first experience in an AMPlified world"
    }
    </script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

Di atas adalah halaman sederhana, fakta paling menarik dari halaman ini adalah bahwa halaman ini lulus validasi AMP dan validasi data meta mesin telusur Schema.org. Jika halaman ini di-deploy di situs berita, halaman tersebut akan memenuhi syarat untuk disertakan dalam carousel penelusuran Google baru yang dikhususkan untuk konten AMP, sehingga halaman ini menjadi titik awal yang bagus untuk pekerjaan kita.

Sebelum mengubah halaman, mari buka Chrome Developer Tools. Saat mengerjakan situs (terutama situs yang berfokus pada perangkat seluler), sebaiknya simulasikan pengalaman seluler saat melakukan pengujian di browser. Mulai dengan membuka Konsol Developer di Chrome melalui Menu > More Tools > Developer Tools:

Sekarang, periksa output JavaScript di konsol developer. Pastikan Anda telah memilih tab Konsol:

Sekarang, klik tombol simulasi perangkat di konsol developer. Hal ini diwakili oleh ponsel dan tablet yang diletakkan bersebelahan:

Di menu yang muncul, setel perangkat ke "Nexus 5X":

Sekarang kita dapat mulai mengerjakan halaman itu sendiri. Mari kita coba menambahkan iklan ke artikel AMP kita.

Semua iklan di AMP dibuat menggunakan komponen amp-ad. Dengan menggunakan komponen ini, kita dapat mengonfigurasi iklan dengan beberapa cara seperti lebar, tinggi, dan mode tata letak. Namun, banyak platform iklan akan memerlukan konfigurasi tambahan seperti ID akun untuk jaringan iklan, iklan yang harus ditayangkan, atau opsi untuk menargetkan iklan. Untuk amp-ad, kita cukup mengisi berbagai opsi yang diperlukan sebagai atribut HTML.

Lihat contoh iklan Klik Ganda ini:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static">
</amp-ad>

Seperti yang dapat Anda lihat, ini adalah konfigurasi yang sangat sederhana. Perhatikan atribut type. Atribut ini memberi tahu komponen amp-ad tentang platform iklan yang ingin Anda gunakan. Dalam hal ini, kita menginginkan platform Double Click, sehingga nilai jenisnya adalah doubleclick.

Atribut data-slot lebih unik. Setiap atribut yang diawali dengan data- di amp-ad adalah atribut khusus vendor. Artinya, tidak semua vendor akan memerlukan atribut khusus ini atau bereaksi jika atribut ini diberikan. Misalnya, bandingkan contoh Double Click di atas dengan iklan uji dari platform A9:

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

Coba tambahkan kedua contoh di atas ke dalam artikel Anda tepat setelah tag <header>. Muat ulang halaman dan Anda akan melihat dua iklan pengujian telah muncul:

Penting: Anda mungkin mengalami beberapa error di konsol developer seperti 'Mixed Content' atau 'XMLHttpRequest cannot load'. Yang pertama kemungkinan terkait dengan iklan A9 karena tidak semua konten yang dimuatnya aman. Ini adalah persyaratan penting untuk semua iklan yang ditayangkan di AMP.

Mari kita pelajari beberapa opsi lainnya yang tersedia untuk digunakan dengan Double Click. Coba tambahkan dua konfigurasi iklan penargetan geografis ini ke halaman Anda:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk">
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us">
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

Sayangnya, penargetan geografis tidak dapat dikontrol dari kode halaman itu sendiri. Namun, iklan uji ini telah dikonfigurasi di dasbor DoubleClick agar hanya ditampilkan di negara tertentu, khususnya Inggris Raya dan Amerika Serikat.

Muat ulang halaman dan lihat. Screenshot berikut diambil dari Australia, sehingga kedua iklan tidak dimuat:

Contoh penargetan geografis di atas menunjukkan bahwa amp-ad cukup fleksibel untuk semua jenis fitur platform iklan.

Catatan: Anda mungkin melihat bahwa di dalam tag amp-ad ini terdapat tag div tambahan dengan atribut bernama fallback. Dapatkah Anda menebak apa yang ditunjukkan oleh atribut pengganti? Atribut ini memberi tahu sistem pemuatan AMP untuk hanya menampilkan konten elemen tersebut saat elemen induk gagal dimuat dengan berhasil. Artinya, elemen induk melakukan penggantian pada elemen turunan – oleh karena itu istilahnya adalah 'fallback'.

Berikut adalah jaringan iklan yang saat ini didukung:

• A9
• Adblade
• Adform
• AdReactor
• AdSense
• AdTech
• Criteo
• Dot dan Media
• Doubleclick
• Flite
• Industrybrains
• OpenX
• plista
• Smart AdServer
• Yieldmo
• Revcontent
• TripleLift
• Teads
• I-Mobile
• Webediads

Pastikan Anda membaca halaman dokumentasi untuk komponen Iklan AMP guna mendapatkan informasi tentang platform iklan terbaru yang didukung.

Di bab berikutnya, kita akan mempelajari komponen AMP yang lebih canggih dan cara menyertakannya dalam dokumen AMP.

Catatan: Tidak ada JavaScript yang disediakan jaringan iklan yang diizinkan untuk dijalankan di dalam dokumen AMP. Sebagai gantinya, AMP runtime memuat iframe dari asal yang berbeda (melalui sandbox iframe) sebagai dokumen AMP dan menjalankan JS jaringan iklan di dalam sandbox iframe tersebut.

Penting: Spesifikasi amp-ad kemungkinan akan terus berubah secara signifikan seiring waktu. Pendekatan saat ini dirancang untuk mem-bootstrap format agar dapat menampilkan iklan.

6. Memperluas konten dengan komponen yang diperluas

Sekarang Anda memiliki dokumen AMP dasar dengan teks, gambar, dan bahkan iklan yang disematkan di halaman – semua elemen penting untuk menceritakan kisah dan memonetisasi konten Anda. Namun, situs modern sering kali menyertakan lebih banyak fungsi daripada sekadar gambar dan teks.

Jadi, mari kita tingkatkan kualitas dokumen AMP dan pelajari komponen yang tersedia di luar komponen inti yang disebutkan sebelumnya.

Dalam bab ini, kita akan mencoba menambahkan fungsi web yang lebih canggih yang biasanya ditemukan di artikel berita:

• Video YouTube
• Tweet
• Kutipan artikel

Menyematkan video YouTube

Mari kita coba menyematkan video YouTube ke dalam dokumen. Kode berikut akan menyematkan video, menambahkannya ke halaman Anda:

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270">
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

Muat ulang halaman dan lihat halaman. Anda akan melihat teks ini, bukan video: "Video tidak dapat dimuat".

Meskipun browser Anda dapat menampilkan video YouTube tanpa masalah, Anda akan tetap menerima error ini. Mengapa? Video sebenarnya tidak gagal dimuat, tetapi komponennya yang gagal.

Perlu diingat, tidak semua komponen disertakan dalam file JavaScript koleksi AMP dasar. Kita perlu menyertakan permintaan JavaScript tambahan untuk komponen YouTube secara khusus. Semua komponen kecuali set inti akan memerlukan referensi JavaScript tambahan ini.

Tambahkan permintaan berikut ke tag <head>:

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

Muat ulang halaman dan Anda akan melihat video YouTube:

Sekali lagi, kita telah menentukan lebar dan tinggi video agar rasio aspek dapat dihitung oleh sistem tata letak AMP. Selain itu, jenis tata letak telah disetel ke responsif, yang berarti video ini akan mengisi lebar elemen induknya.

Pelajari lebih lanjut komponen YouTube.

Catatan: Selain komponen YouTube, AMP menyertakan komponen video HTML5 generik yang dinamai amp-video dan komponen AMP khusus untuk pemutar Brightcove Video Cloud atau Perform yang dinamai amp-brightcove. Lihat "AMP By Example" untuk contoh pemutaran video lainnya, termasuk video Facebook, Instagram, Vine, Twitter & Dailymotion.

Catatan: Atribut penggantian berguna untuk memberikan informasi jika komponen gagal dimuat. Bagaimana jika browser pengguna tidak mendukung komponen AMP tertentu? Pengalaman pengguna akan lebih baik jika pengguna diberi tahu alasan fungsi mungkin tidak ada.

Menampilkan Tweet

Menyematkan tweet yang telah diformat sebelumnya dari Twitter adalah fitur umum artikel berita. Komponen AMP Twitter dapat menyediakan fungsi ini dengan mudah.

Mulailah dengan menambahkan permintaan JavaScript berikut ke tag <head> dokumen Anda:

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

Sekarang di artikel Anda, tambahkan kode ini untuk menyematkan tweet itu sendiri:

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

Atribut data-tweetid adalah contoh lain dari atribut kustom yang diperlukan oleh vendor platform tertentu. Dalam hal ini, Twitter mengenali atribut data-tweetid sebagai yang sesuai dengan tweet tertentu yang akan disematkan di halaman.

Muat ulang browser Anda dan lihat halaman. Anda akan melihat tweet tersebut muncul:

Pelajari lebih lanjut komponen Twitter.

Catatan: AMP mencakup lebih banyak komponen untuk menyematkan konten dari jejaring sosial. Lihat komponen Instagram dan komponen Vine.

Menyoroti kutipan artikel

Elemen umum dalam artikel berita adalah menyoroti cuplikan teks dari artikel yang sangat menarik. Misalnya, kutipan dari sumber tertentu atau fakta penting dapat diulang dengan font yang lebih besar untuk menarik perhatian pembaca.

Namun, karena tidak semua kutipan atau cuplikan teks memiliki panjang karakter string yang sama, akan sulit untuk menyeimbangkan ukuran font yang lebih besar dengan jumlah ruang yang akan digunakan teks tertentu di halaman.

AMP menyertakan komponen lain khusus untuk jenis situasi ini yang disebut amp-fit-text. Dengan demikian, Anda dapat menentukan elemen lebar tetap dan tinggi tetap serta ukuran font maksimum. Komponen ini secara cerdas menskalakan ukuran font agar sesuai dengan teks kutipan dalam lebar dan tinggi yang tersedia.

Ayo kita coba. Pertama, tambahkan library komponen ke tag <head>:

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

Tambahkan kode berikut ke halaman Anda:

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

Muat ulang halaman dan lihat hasilnya.

Sekarang lakukan eksperimen lebih lanjut. Apa yang terjadi jika kutipannya jauh lebih pendek?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  #YOLO
</amp-fit-text>

Atau bagaimana dengan kutipan yang lebih panjang?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
   And the Raven, never flitting, still is sitting, still is sitting. On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon's that is dreaming, And the lamp-light o'er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

Sebagai eksperimen terakhir dengan amp-fit-text, coba buat teks pendek seperti #YOLO dengan tinggi yang jauh lebih besar – misalnya, nilai 400 – dan pertahankan nilai atribut max-font-size 42. Seperti apa tampilan halaman yang dihasilkan? Apakah teks berada di tengah secara vertikal atau apakah tinggi tag amp-fit-text menyusut agar sesuai dengan ukuran font maksimum? Dengan mengetahui apa yang Anda ketahui tentang sistem tata letak AMP, coba jawab pertanyaan sebelum mengedit dokumen.

7. Carousel Kompleks

Fitur umum lainnya dalam pengembangan web adalah korsel. AMP menyertakan komponen generik yang dirancang untuk memenuhi kebutuhan ini. Mari kita mulai dengan contoh sederhana seperti carousel gambar.

Jangan lupa untuk menyertakan library komponen carousel dengan menambahkan permintaan JavaScript berikut ke tag <head> dokumen Anda:

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

Selanjutnya, kita akan menyematkan carousel gambar sederhana dengan tata letak responsif serta lebar dan tinggi yang telah ditentukan sebelumnya. Tambahkan kode berikut ke halaman Anda:

<amp-carousel layout="fixed-height" height="168" type="carousel" >
  <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>

Muat ulang halaman Anda dan Anda akan melihat carousel di halaman Anda:

Komponen carousel dapat dikonfigurasi dengan berbagai cara. Coba ubah jenisnya menjadi slides dan lihat hasilnya. Pastikan untuk mengubah atribut layout dari amp-carousel dan gambar di dalamnya menjadi responsive juga.

Sekarang, alih-alih daftar elemen yang dapat di-scroll, Anda akan melihat satu elemen dalam satu waktu. Coba menggeser secara horizontal untuk berpindah antar-elemen. Jika Anda menggeser ke elemen ketiga, Anda tidak akan dapat menggeser lebih jauh.

Selanjutnya, tambahkan atribut loop. Muat ulang halaman dan segera coba geser ke kiri. Carousel akan terus mengalami pengulangan.

Terakhir, mari buat carousel ini diputar otomatis setiap 2 detik. Tambahkan atribut autoplay ke halaman dan atribut penundaan dengan nilai 2000 seperti ini: delay="2000".

Hasil akhirnya akan terlihat seperti berikut:

<amp-carousel layout="responsive" width="300" height="168" 
         type="slides" autoplay delay="2000" loop>
  <amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img>
</amp-carousel>

Muat ulang halaman dan coba!

Catatan: Anda mungkin melihat bahwa kami menggunakan jenis tata letak fixed-height di carousel. Jenis carousel adalah persyaratan, sedangkan jenis slides memerlukan jenis tata letak responsive. Elemen dengan tinggi tetap menggunakan ruang yang tersedia, tetapi mempertahankan tinggi yang tidak berubah. Atribut tinggi harus ditentukan, sedangkan atribut lebar tidak boleh ada atau harus disetel ke otomatis agar fixed-height berfungsi.

Carousel gambar sudah bagus namun, bagaimana cara untuk memunculkan konten yang lebih rumit di carousel? Mari kita coba memadukan semuanya dengan menempatkan iklan, beberapa teks, dan gambar sekaligus dalam satu carousel. Dapatkah amp-carousel menangani campuran semacam ini sekaligus? Tentu saja.

Pertama, mari kita tambahkan gaya ini ke halaman untuk memastikan komponen amp-fit-text dan amp-carousel bekerja sama dengan aman:

amp-fit-text {
    white-space: normal;
}

Sekarang coba masukkan kode carousel berikut ke halaman Anda:

<amp-carousel layout="fixed-height" height="250" type="carousel" >
    <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>

    <amp-ad width="300" height="250"
      type="doubleclick"
      data-slot="/35096353/amptesting/image/static">
        <div placeholder>This advert is still loading.</div>
    </amp-ad>

    <amp-fit-text width="300" height="250" layout="fixed">
        Big, bold article quote goes here.
    </amp-fit-text>
</amp-carousel>

Muat ulang halaman dan Anda akan melihat sesuatu seperti ini:

Pelajari lebih lanjut Komponen carousel.

Catatan: Dalam contoh terakhir, Anda mungkin melihat komponen amp-ad menyertakan elemen div turunan dengan atribut placeholder. Jika Anda ingat, kita pernah mengalami skenario serupa dengan amp-ad sebelumnya dalam codelab dengan sistem fallback. Apa perbedaan antara placeholder dan penggantian? Elemen Fallback muncul saat elemen induk gagal dimuat, yaitu jika tidak ada iklan yang tersedia. Sedangkan elemen placeholder muncul di tempat elemen induk saat sedang dimuat. Dalam arti tertentu, setiap atribut mengapit proses pemuatan elemen induk.

Penting: Sayangnya, komponen amp-ad menggunakan iframe di balik layar yang dapat mengganggu gestur menggeser pada carousel itu sendiri. Ini adalah masalah umum yang sedang diselidiki.

8. Melacak dengan amp-analytics

Platform Analytics biasanya diintegrasikan ke situs melalui cuplikan JavaScript inline dan panggilan fungsi yang memicu peristiwa yang dikirim kembali ke sistem Analytics. AMP memberikan sintaks konfigurasi JSON yang fleksibel untuk membuat replika proses ini untuk beberapa partner analisis.

Berikut adalah contoh pelacakan Google Analytics yang didorong oleh JavaScript tradisional yang akan kita tulis ulang dalam format JSON amp-analytics. Pertama, pendekatan JavaScript tradisional:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

Di atas cukup sederhana, mengirimkan notifikasi untuk peristiwa tayangan halaman yang akan dilacak.

Untuk mereplikasi semua hal di atas dalam komponen amp-analytics, pertama-tama kita menyertakan library komponen di <head> dokumen:

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

Kemudian, kita menyertakan komponen sebagai berikut:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

Mungkin terlihat lebih rumit, tetapi sebenarnya ini adalah format yang sangat fleksibel untuk mendeskripsikan beberapa jenis peristiwa yang berbeda. Selain itu, format JSON tidak menyertakan blob kode JavaScript dalam contoh tradisional yang berpotensi menyebabkan kesalahan jika diubah secara tidak sengaja.

Dalam format JSON, kunci pemicu mencakup serangkaian kunci yang merepresentasikan semua pemicu peristiwa yang akan kita lacak. Kunci pemicu tersebut adalah deskripsi peristiwa, misalnya "default pageview" di atas. Nilai kunci judul terkait dengan nama halaman yang sedang dilihat.

Dengan memperluas contoh di atas, kita dapat menambahkan pemicu lain "klik pada pemicu #header":

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

Pemicu ini persis seperti namanya, dengan menggunakan pemilih DOM "#header", kita dapat membuat kueri untuk tag dengan ID "header" dan pada peristiwa saat tag tersebut "diklik" atau diketuk di perangkat, kita mengirimkan tindakan peristiwa "clicked-header" ke platform analisis dengan label kategori "examples".

Jika memiliki platform pelacakan kustom yang ingin diintegrasikan, Anda tetap dapat menggunakan amp-analytics dan menentukan endpoint URL yang dipersonalisasi sendiri untuk informasi pelacakan. Baca komponen amp-analytics lebih lanjut di sini.

Catatan: Dalam semua contoh analisis ini, "UA-YYYY-Y" harus diganti dengan kode pelacakan Google Analytics situs Anda.

Catatan: Jika Anda tertarik dengan sistem pelacakan yang lebih sederhana, Anda dapat melihat amp-pixel. Jika Anda hanya perlu melacak tayangan halaman, solusi ini lebih ringan daripada amp-analytics karena hanya bertujuan untuk menyelesaikan persyaratan pelacakan piksel tradisional. Baca selengkapnya di sini.

Penting: Komponen analisis masih dalam proses pengembangan. Seiring berkembangnya komponen amp-analytics, akan ada lebih banyak platform analisis yang bergabung dan lebih banyak jenis peristiwa yang dapat dilacak. Untuk informasi terbaru, baca dokumen referensi.

9. Menjelajahi situs Anda

Persyaratan umum situs seluler adalah penyertaan menu navigasi situs. Menu ini dapat berupa berbagai bentuk. Berikut beberapa contoh cara navigasi dapat ditampilkan di dokumen AMP:

1. Buat link kembali ke halaman beranda Anda – opsi paling sederhana.
2. Menu sub-judul melalui komponen carousel.

Link Halaman Beranda

Cara paling sederhana untuk membuat pengguna mengakses opsi navigasi reguler situs Anda adalah dengan mengarahkan mereka kembali ke antarmuka situs reguler Anda.

Coba tambahkan link HTML ini ke tag <header>:

<header>
  <a href="homepage.html">
    <amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img>
  </a>

  News Site
</header>

Kemudian tambahkan aturan ini ke CSS inline Anda:

.home-button {
  float: left;
}

Sekarang muat ulang halaman. Anda akan melihat link di sudut kiri atas halaman yang mengarah ke homepage.html - jika Anda mengklik link ini, Anda akan segera mengetahui bahwa link tersebut tidak mengarah ke mana pun.

Link ini dapat diganti dengan URL halaman beranda situs Anda agar pengguna dapat membuka bagian lain situs Anda melalui navigasi situs reguler Anda.

Seperti yang disebutkan, ini adalah pendekatan paling sederhana yang tersedia – memanfaatkan navigasi situs yang ada. Selanjutnya, kita akan mempelajari dua alternatif.

Sub Heading Menu

Pendekatan lain untuk masalah ini adalah menampilkan menu navigasi situs Anda di dalam dokumen AMP. Agar tetap berada di bagian kecil halaman, kita dapat menggunakan carousel untuk menampilkan menu yang dapat di-scroll di bawah header situs.

Karena kita memerlukan komponen carousel, pastikan untuk menambahkan JavaScript komponen ke tag <head> di halaman Anda:

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

Coba tambahkan cuplikan HTML ini tepat di bawah tag <header> Anda:

...
</header>
<div class="sub-menu">
  <amp-carousel layout="fixed-height" height="38" type="carousel">
    <a href="#example1">Example 1</a>
    <a href="#example2">Example 2</a>
    <a href="#example3">Longer Named Example 3</a>
    <a href="#example4">Example 4</a>
    <a href="#example5">Example 5</a>
    <a href="#example6">Example 6</a>
  </amp-carousel>
</div>
<article>
...

Kemudian, tambahkan aturan ini ke CSS inline Anda:

.sub-menu {
  background: black;
}

.sub-menu a {
  display: block;
  background: tomato;
  margin: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

Sekarang muat ulang halaman. Anda akan melihat menu link yang muncul di bawah judul artikel Anda. Menu ini dapat di-scroll secara horizontal untuk menyimpan banyak link navigasi.

Navigasi sub-menu ini adalah cara yang bagus untuk menyimpan banyak link tanpa menghabiskan terlalu banyak ruang di halaman Anda.

10. Menambahkan font

Seperti yang dibahas sebelumnya, tidak ada permintaan stylesheet eksternal yang diizinkan dalam dokumen AMP. Namun, ada satu pengecualian untuk aturan ini: font.

Font adalah bagian penting dari pengalaman membaca artikel bagi pengguna web dan karena browser web mengambil file font melalui permintaan stylesheet eksternal, pengecualian ini diperlukan di AMP.

Mari coba menambahkan referensi ke font Raleway ke dokumen:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">

Sekarang, perbarui CSS Anda untuk menyertakan referensi ke Raleway:

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

Muat ulang halaman Anda dan lihat tampilan baru halaman Anda. Periksa juga output validator dan Anda akan melihat bahwa tidak ada keluhan terkait permintaan eksternal ini.

Catatan: Menyertakan font dalam dokumen tidak memerlukan komponen tambahan. Namun, sebenarnya ada komponen bernama amp-font. Sebenarnya tidak digunakan untuk memuat font web, tetapi Anda dapat menggunakannya untuk mendeteksi apakah font web telah berhasil dimuat atau tidak dan merespons dengan tepat jika perlu.

Anda dapat menggunakan fitur ini untuk menyembunyikan teks hingga font dimuat sepenuhnya sehingga pengguna tidak melihat teks berubah dari font sementara ke font aslinya. Jika font kemudian gagal, Anda mungkin hanya ingin menampilkan font sementara. Lagipula, skenario terburuk adalah jika pengguna tidak dapat membaca teks apa pun. Baca selengkapnya tentang amp-font di sini.

11. Selamat!

Anda telah menyelesaikan codelab AMP Lanjutan dan berhasil mempelajari banyak komponen utama AMP.

Semoga Anda memahami cara amp-ad dan amp-analytics dapat digunakan untuk mendukung berbagai platform iklan dan vendor analisis. Pastikan Anda menjelajahi daftar lengkap komponen AMP yang tersedia.

Berikut adalah beberapa topik dan link tambahan yang mungkin ingin Anda pelajari untuk meningkatkan keterampilan Anda lebih lanjut.

• AMP By Example - Katalog contoh yang lengkap untuk komponen dan pola komponen AMP.
• Contoh Iklan DoubleClick - Katalog lengkap contoh amp-ad.
• Semua tentang Penemuan Halaman
• Tag HTML yang Tidak Diizinkan
• Aturan & Animasi CSS yang Dibatasi
• Selengkapnya tentang iFrame
• AMP CDN
• Daftar Komponen AMP yang tersedia