Memasang Javascript di Halaman Website AMP-HTML

Seperti kita ketahui bahwa kita tidak bisa memasang kode javascript secara langsung di halaman web Google AMP. Akibatnya, halaman AMP anda akan terdeteksi gagal validasi. Ini penting mengingat Google sudah memberikan cara khusus menangani digunakannya javascript di halaman AMP.

• Dengan menggunakan amp-iframe
• Dengan menggunakan amp-script (terbaru/update)

Javascript yang ingin dipasang di halaman AMP disebut dengan "custom javascript". Dikatakan "custom" karena harus disesuaikan atau wajib mengikuti aturan Google AMP agar tetap tervalidasi. Untuk itu, anda harus menyimpan custom javascript tersebut di sebuah hosting yang bisa diakses oleh public.

Bagaimana cara menyimpan custom javascript tersebut? Ada 2 cara, yaitu:

• Di web lain, yang menyediakan layanan pembuatan halaman website, seperti; gitlab, github pages, dsb.
• Web Hosting sendiri, ini jika anda mempunyai hosting sendiri.

Cara Menyimpan Custom Javascript di Web Hosting Sendiri

Cara termudah adalah menggunakan web hosting anda sendiri sebagai tempat penyimpanan kode javascript. Adalah lebih baik dibuatkan sub-domain yang khusus untuk menyimpan file javascript atau file lainnya yang bersifat sumber pustaka website anda. Misalnya untuk menyimpan file javascript, file-file bootstrap, file css yang dimasukkan ke dalam folder-folder tersendiri dan bisa diakses.

Tahapan Membuat & Menyimpan Custom Javascript

Berikut ini adalah tahapan pembuatan file di web hosting anda;

• Buka cPanel Hosting anda dan buatlah Sub-domain khusus untuk itu, misalnya: "rep". (noted)
• Bukalah notepad di komputer/laptop anda dan copy-paste-kan semua file Javascript ke dalam notepad tersebut dan berilah nama yang singkat dan unik, misalnya: filejs_iklan1.txt
• Rename file [filejs_iklan1.txt] tersebut dengan menekan F2 pada keyboard atau klik kanan pada file dan pilih [rename]
• Hapuslah ekstensi file [txt] pada [filejs_iklan1.txt] ini dan gantilah dengan ekstensi [html] sehingga menjadi [filejs_iklan1.html]
• Buka cPanel hosting anda dimana folder tempat menyimpan telah terbuka. Lalu, klik upload
• Pada tombol [select file], pilih file [filejs_iklan1.html] tadi untuk diupload
• Tunggu sampai proses upload berhasil 100% complete.

Dengan mengikuti tahapan tersebut, anda sudah berhasil menyimpan file custom javascript anda di web hosting sendiri yang jelas, lebih cepat diakses dan relatif aman.

Memasukkan Link Custom Javascript ke Amp-iframe

Selanjutnya, adalah mengambil link file custom javascript anda tersebut berdasarkan path atau alamat dimana file custom javascript [filejs_iklan1.html] tadi disimpan.

Jika path file [filejs_iklan1.html] berada di: /public_html/rep/filejs_iklan1.html, maka URL link file tersebut berada di: http://rep.domainwebmu.com/filejs_iklan1.html

Yang terakhir adalah, menaruh link tersebut ke dalam amp-iframe sebagai contoh:
<amp-iframe frameborder="0" height="310" layout="responsive" sandbox="allow-scripts allow-same-origin" src="http://rep.domainwebmu.com/filejs_iklan1.html" width="310"></amp-iframe>

Semoga tutorial singkat "Javascript di Halaman Amp | Custom Javascript in AMP Pages" ini dapat bermanfaat untuk anda.