Google AMP - Javascript Kustom
Pada bab sebelumnya, kita telah mempelajari banyak komponen amp. Kita juga telah melihat bahwa agar setiap komponen bekerja kita perlu menambahkan file javascript.
Misalnya, untuk amp-iframe, skrip yang ditambahkan adalah sebagai berikut -
<script async custom-element="amp-iframe"
src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>Kita punya asyncditambahkan ke tag script. Ini adalah standar untuk amp karena mereka memuat semua file javascript secara asinkron. Ada sebuahcustom-element atribut ditambahkan yang memiliki nama komponen yang digunakan untuk itu.
Untuk menggunakan amp-component apa pun yang bukan merupakan bagian dari file javascript amp inti, skrip harus ditambahkan seperti yang ditunjukkan di atas.
Kita banyak terbiasa menulis, banyak kode javascript di dalam halaman dan juga menyertakan file javascript menggunakan tag script.
Bagaimana kita bisa melakukannya di amp? Jadi untuk itu AMP tidak mengizinkan kode script apapun untuk ditulis atau memuat tag script secara eksternal.
Amp memiliki komponennya sendiri untuk menangani pekerjaan yang seharusnya dilakukan oleh skrip tambahan yang ditambahkan di halaman. Ini pada dasarnya dilakukan untuk alasan performa, untuk memuat konten halaman lebih cepat dan tidak ada javascript yang menunda rendering atau melakukan perubahan apa pun pada DOM.
Ini adalah spesifikasi yang diberikan oleh AMP sesuai situs resmi mereka untuk tag skrip -
Dilarang kecuali tipenya adalah application / ld + json. (Nilai lain yang tidak dapat dijalankan dapat ditambahkan sesuai kebutuhan.) Pengecualian adalah tag skrip wajib untuk memuat AMP runtime dan tag skrip untuk memuat komponen yang diperpanjang.
Contoh kerja yang bisa kita gunakan application/ld+jsondi dalam halaman amp kami ditampilkan di sini. Perhatikan bahwa kami menggunakan tag skrip dengan type = ”application / ld + json” untuk komponen amp-analytics untuk mengaktifkan pelacak.
Demikian pula, kita dapat menggunakan tag script dengan type = ”application / ld + json” pada amp-components lainnya jika diperlukan.
Contoh
<!doctype html>
<html amp>
<head>
<meta charset = "utf-8">
<title>amp-analytics</title>
<script async src = "https://cdn.ampproject.org/v0.js">
</script>
<script async custom-element = "amp-analytics"
src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
<link rel = "canonical" href = "ampanalytics.html">
<meta name = "viewport" content = "width=device-width,
minimum-scale = 1,initial-scale = 1">
<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>
</head>
<body>
<h1>Google Amp - Analytics</h1>
<amp-analytics>
<script type = "application/json">
{
"requests": {
"event": "http://localhost:8080/googleamp/tracking.php?
user=test&account=localhost&event=${eventId}"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "event",
"vars": {
"eventId": "pageview"
}
}
}
}
</script>
</amp-analytics>
</body>
</html>Saat halaman dibuka di browser, pelacak akan diaktifkan untuk tampilan halaman. Itu bisa dilihat di tab jaringan Google seperti gambar di bawah ini.
