Memasang dan Menggunakan Google Analytics di AMP Blogger


Memasang Google Analytics di AMP Blogger

Google Analytics adalah sebuah layanan gratis dari Google yang berfungsi untuk menampilkan statistik pengunjung dari suatu situs web. Seperti menelusuri pengunjung berdasarkan informasi halaman, mesin pencari, iklan, jaringan pay-per-click, email marketing.

Bagaimana cara memasang Google Analytics pada Blogger?

Pada menu setelah Blogger sudah disediakan opsi untuk meletakkan kode analytics dan memanggilnya, untuk mencarinya silahkan ikuti cara dibawah ini:

  1. Pada Blogger klik Setelan.
  2. Klik Lainnya.
  3. Scroll kebagian bawah sampai Anda menemukan Google Analytics.
  4. Masukkan kode ID Properti Web Analytics dan klik Simpan setelan.

Kemudian pada tema/template Anda mmasukkan kode dibawah ini sebelum tag </body>, jika kode sudah ada maka tidak perlu ditambahkan lagi.

Anda mungkin menyukai postingan ini



<b:include data='blog' name='google-analytics'/>


Kode tersebut adalah tag untuk membuat script analytics dari ID analytics yang sudah di cantumkan pada setelan.

Sayangnya kode diatas tidak bisa digunakan dalam tema AMP Blogger karena berisi javascript yang berakibat blog Anda tidak valid AMP. Jika demikian maka gunakan cara dibawah ini agar tema Anda tetap valid AMP:

Cara memasang AMP Analytics

Pertama gunakan skrip amp-analytics pada tag <head> di template Anda.


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


Selanjutnya letakkan kode dibawah ini pada elemen body template Anda tepatnya sebelum tag </body>


<b:if cond='!data:view.isPreview'>
  <amp-analytics id='analytics1' type='googleanalytics'>
    <script type='application/json'>
      {
        "vars": { "account": "<data:blog.analyticsAccountNumber/>" },
        "triggers": {
          "trackPageview": { "on": "visible",  "request": "pageview" }
        }
      }
    </script>
  </amp-analytics>
</b:if>


tag <data:blog.analyticsAccountNumber/> berfungsi untuk memanggil ID analytics yang sudah di simpan pada setelan jadi Anda bisa mengubah atau menabahkan ID Analytics tanpa perlu edit HTML template.

Mengenal AMP HTML, Apa itu AMP?


Mengenal AMP HTML, Apa itu AMP

AMP atau Accelerated Mobile Pages merupakan project open source yang digunakan untuk menyediakan laman web yang dimuat dengan lebih cepat pada perangkat seluler, dirilis pada oktober 2015 dengan tujuan untuk meningkatkan pengalaman pengguna khusunya publisher dalam mengoptimasi laman mobile yang lebih baik.

AMP HTML dibangun dengan struktur web yang sudah ada tapi membatasi CSS, HTML dan Javascript agar website dapat diakses lebih cepat.

Bagaimana AMP HTML bekerja?

AMP HTML bekerja dengan menambahkan AMP JavaScript library dan tidak merubah struktur utama sebuah web. Struktur web seperti biasa, hanya ditambahkan AMP JS library sehingga mencukupi spek AMP HTML. Kode sederhana dari sebuah web dengan AMP HTML seperti ini :

Anda mungkin menyukai postingan ini


<!doctype html>
<html amp='amp' dir='ltr' lang='id'>
  <head>
    <meta charset='utf-8'>
    <link rel='canonical' href='hello-world.html'>
    <meta name='viewport' content='width=device-width,minimum-scale=1,initial-scale=1'>
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async='async' src='https://cdn.ampproject.org/v0.js'></script>
  </head>
  <body>Hello World!</body>
</html>


Dengan menambahkan AMP JS Library, akan mencakup :
  1. AMP JS Library, yang mengelola pemuatan sumber daya eksternal untuk memastikan halaman di render lebih cepat.
  2. Sebuah validator AMP yang menyediakan cara bagi pengembang web untuk dengan mudah memvalidasi bahwa kode mereka memenuhi spesifikasi AMP HTML.
  3. Beberapa elemen kustom, yang disebut komponen HTML AMP, yang membuat pola umum mudah diimplementasikan.

AMP JS library

AMP JS library sudah menyertakan komponen yang terpasang (amp-ad, amp-video, amp-img, amp-pixel) sehingga tidak diperlukan lagi script tambahan, untuk mempercepat render.

AMP Validator

AMP Validator memungkinkan pengembang web untuk dengan mudah mengidentifikasi jika halaman web tidak memenuhi spesifikasi AMP HTML.

Menambahkan kata "#depelopment=1" kedalam URL halaman AMP HTML akan memudahkan pengembang untuk mengetahui kesalahan struktur AMP HTML.

AMP HTML Components

AMP HTML Components adalah serangkaian elemen kustom tambahan atau mengganti fungsi dari elemen HTML5.

  • Menggantikan elemen HTML5 yang speknya tidak diizinkan seperti amp-img dan amp-video.
  • enerapkan konten pihak ketiga , seperti amp-youtube, amp-ad, dan amp-twitter.
  • Menambahkan desain lain, seperti amp-lightbox dan amp-carousel.
  • Mempermudah teknik pembuatan web, seperti amp-anim, yang memungkinkan pengembang web untuk menampilkan gambar animasi, baik gambar (GIF) atau file video (WebM atau MP4) berdasarkan kompatibilitas browser.

Referensi:
kompidesign.blogspot.com/2015/11/tutorial-mengenal-amp-html.html