amp-analytics - Google Analytics AMP HTML
Sebuah website atau blog yang dikelola dengan baik dan sungguh-sungguh pasti butuh analisa untuk mengetahui seberapa banyak pengunjung yang singgah ke website kita, halaman apa saja yang paling banyak dikunjungi, halaman apa yang minim pengunjung dan lain sebagainya. Semua ini, butuh tool atau widget yang biasanya didapat dari pihak ketiga yang menangani pekerjaan itu dengan baik. Salah satu yang banyak digunakan adalah Google analytics.
Cara Penggunaan
amp-analytics dengan Google Analytics (GA)
Langkah Pertama. Hal yang paling pokok untuk dapat menggunakan amp-analytics adalah menyisipkan script berikut sebelum penutup </head> tag pada template blog atau website Anda:
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
amp-analytics sebenarnya tidak hanya dapat digunakan dengan Google Analytics, tetapi juga masih banyak pihak ketiga lainnya yang support. Pada tutorial ini hanya fokus bagaimana mengintegrasikan Google Analytics pada halaman web AMP.
Langkah Kedua, Login sebagai admin ke web Google Analytics. Kemudian cari menu Admin Klik pada Property, pada pilihan dropdown klik Create New Property. Ini dilakukan jika sebelumnya Anda belum pernah memiliki property id untuk domain yang ingin didaftarkan.
Setelah berhasil membuat property id tersebut, Anda akan memperoleh tracking ID dengan format seperti berikut:
UA-XXXXX-Y
Simpan kode tersebut yang nantinya akan digunakan pada panduan berikutnya.
Langkah Ketiga, gunakan contoh kode dibawah ini, ganti UA-XXXXX-Y dengan kode yang telah di dapatkan pada panduan langkah pertama diatas. Berikut kodenya:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Letakkan kode diatas setelah <body> tag pada template blog/website Anda. Tepatnya, langsung setelah tag pembuka <body> lihat contoh lengkapnya dibawah ini.
Kode diatas adalah contoh paling sederhana untuk tracking jumlah viewer masing-masing halaman web.
Contoh lengkap dan full valid AMP HTML yang bisa dijadikan panduan menggunakan amp-analytics adalah sebagai berikut:
<!doctype html>
<html amp="amp" lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="https://www.apacara.com" />
<title>amp-analytics example - apacara.com</title>
<meta name="author" content="Halwa RF" />
<link rel="publisher" href="https://plus.google.com/+HalwaRF" />
<meta name="viewport" content="width=device-width,minimum-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>
<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>
<style amp-custom>
</style>
</head>
<body>
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-99999999-4"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
KONTEN WEB SITE DISINI
</body>
</html>
Jika Anda menggunakan blogger blogspot, mungkin kode-nya harus di-escape sebagai berikut:
<amp-analytics id='analytics1' type='googleanalytics'>
<script type='application/json'>
{
"vars": {
"account": "UA-99999999-4"
},
"triggers": {
"defaultPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Ingat, UA-99999999-4 adalah contoh property id. Pada kenyataannya, harus diganti dengan property id milik Anda.
Selain kita dapat track page views (halaman dilihat) kita juga dapat melacak events atau peristiwa yang didapat dari interaksi user (pengunjung). Selengkapnya dapat dilihat pada dokumentasi resmi atau sumber yang kami berikan dibawah ini.
SHARE