Menambahkan Analytics ke halaman AMP

Accelerated Mobile Pages (AMP) adalah platform yang digunakan untuk membuat halaman web untuk konten statis yang dirender dengan cepat. AMP menyertakan elemen <amp-analytics> yang memungkinkan pengukuran interaksi pengguna, dan memiliki dukungan bawaan untuk Google Analytics.

Penyiapan dasar untuk mengukur kunjungan halaman

Untuk membuat penginstalan dasar Google Analytics di halaman AMP, salin cuplikan kode ini dan ganti <GA_MEASUREMENT_ID> dengan ID properti yang ingin Anda gunakan. (Temukan ID Google Analytics Anda.)

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

Cara kerjanya

Elemen <amp-analytics> adalah komponen AMP yang diperluas dan secara eksplisit diaktifkan sebagai custom-element dalam tag skrip.

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

Blok elemen <amp-analytics> dikonfigurasi untuk mengaktifkan dukungan bagi produk pengukuran Google. Tetapkan atribut type untuk <amp-analytics> ke "gtag" (untuk mengaktifkan dukungan gtag.js) dan atribut data-credentials ke "include" (untuk mengaktifkan cookie.)

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

AMP tidak mengizinkan JavaScript di luar library-nya sendiri yang disetujui, jadi konfigurasi dilakukan dengan JSON. Properti gtag_id dengan <GA_MEASUREMENT_ID> yang valid ditambahkan ke blok vars, dan di bawahnya properti konfigurasi dengan <GA_MEASUREMENT_ID>: {} ditambahkan sebagai nilai.

Mengukur peristiwa

Gunakan triggers dengan nilai yang ditentukan untuk mengukur peristiwa di halaman AMP. Properti ini digunakan dalam konfigurasi pemicu:

  • selector: pemilih CSS untuk menentukan elemen target.
  • on: menentukan jenis peristiwa.
  • vars: menentukan jenis peristiwa di event_name, dan menambahkan parameter lainnya jika perlu.

Contoh ini menunjukkan cara menyiapkan peristiwa Google Analytics dasar. Buat pemicu yang disebut "button" yang akan diaktifkan saat elemen dengan nilai ID "the-button" diklik. Pemicu ini akan mengirim nilai event_name "login" dan nilai method "Google" ke Google Analytics:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Peristiwa Google Analytics adalah kategori peristiwa khusus untuk Google Analytics yang biasa digunakan untuk membuat laporan tentang kampanye. Nilai ini dapat ditentukan di blok vars dengan parameter event_category, event_label, dan value:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Lihat dokumentasi amp-analytics untuk mempelajari konfigurasi pemicu lebih lanjut.

Mengubah parameter

Untuk mengganti parameter Google Analytics default atau menambahkan parameter baru, tambahkan nilai yang diinginkan ke bagian parameter di blok config Anda. Contoh ini mengganti nilai peristiwa dan kunjungan halaman default untuk page_title dan page_location:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

Penaut domain memungkinkan dua situs terkait atau lebih pada domain terpisah untuk diukur sebagai satu. Tentukan domain yang harus ditautkan dengan properti "linker": { "domains": [...] }:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

Di halaman AMP dengan Google Analytics yang dikonfigurasi, kemampuan untuk menautkan ke domain kanonis dari AMP Cache diaktifkan secara default. Untuk menonaktifkan kemampuan Google Analytics dalam menautkan traffic domain, tambahkan "linker": "false" ke parameter konfigurasi:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Kecepatan Situs

Google Analytics dikonfigurasi untuk mengumpulkan data kecepatan situs secara otomatis untuk sebagian kecil traffic situs Anda. Anda dapat mengubah frekuensi sampel untuk mengumpulkan lebih banyak atau lebih sedikit data. Untuk menetapkan frekuensi sampel ke 100%, tambahkan kode yang ditandai ke konfigurasi Anda:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 100
      }
    }
  }
}
</script>
</amp-analytics>

Untuk berhenti mengumpulkan data kecepatan situs, gunakan kode yang ditandai:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "site_speed_sample_rate": 0
      }
    }
  }
}
</script>
</amp-analytics>

Traffic AMP vs non-AMP

Secara default, traffic AMP menggunakan client ID yang berbeda dengan yang digunakan untuk traffic web. Halaman AMP dimuat lebih cepat dan menampilkan pola traffic yang berbeda dengan halaman web standar, yang sering kali berarti Anda akan mendapatkan metrik yang berbeda antara traffic AMP dan non-AMP.

Penggunaan properti terpisah untuk mengukur traffic AMP memungkinkan analisis metrik yang lebih baik dan gambaran yang lebih akurat tentang traffic Anda. Jika Anda perlu menggunakan satu properti untuk mengukur traffic AMP dan non-AMP, gunakan dimensi sumber data atau dimensi kustom untuk membedakannya.

Secara default, Google Analytics akan mengirim nilai "AMP" melalui dimensi sumber data. Gunakan nilai ini untuk menyegmentasikan, memfilter, atau menganalisis konten AMP vs non-AMP dalam satu tampilan.

Men-debug konfigurasi Anda

Validator AMP dapat digunakan untuk mengetahui apakah halaman web tidak memenuhi spesifikasi HTML AMP. Tambahkan #development=1 ke URL halaman untuk mengaktifkan validator.

Ekstensi amp-analytics memberikan pesan peringatan dan error untuk membantu melakukan debug dan memecahkan masalah konfigurasi. Tambahkan #log=1 ke URL halaman untuk melihat pesan error yang dicatat di konsol browser web Anda.

Contoh lengkap

Contoh ini menunjukkan halaman AMP lengkap dengan satu tombol di halaman. Konfigurasi ini akan mengirimkan data kunjungan halaman standar dan peristiwa "button-click" ke Google Analytics:

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

    <link rel="canonical" href="self.html" />
    <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>

    <!-- Load AMP -->
    <script async src="https://cdn.ampproject.org/v0.js"></script>

    <!-- Load amp-analytics -->
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  </head>
  <body>
    <!-- Configure analytics to use gtag -->
    <amp-analytics type="gtag" data-credentials="include">
      <script type="application/json">
        {
          "vars": {
            "gtag_id": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>