Penyiapan tag untuk AMP

Project Accelerated Mobile Pages (AMP) adalah platform web open source yang membantu meningkatkan performa konten web Anda. AMP menyertakan dukungan bawaan untuk tag Google dan Google Tag Manager. Panduan ini menjelaskan cara menyiapkan Google Analytics untuk halaman AMP.

Penginstalan

Tag Google memungkinkan Anda menginstal Google Analytics, Google Ads, dan produk Google lainnya di halaman AMP. Google Tag Manager menyiapkan penampung AMP dan memberi Anda kemampuan untuk membuat konfigurasi lanjutan dan men-deploy tag pihak ketiga dari antarmuka Tag Manager.

Pilih preferensi platform dari tombol berikut:

Tag Google

Penerapan AMP gtag.js menggunakan framework amp-analytics agar Anda dapat memanfaatkan analisis instrumen untuk situs AMP. Data dapat dikirim dari halaman AMP ke Google Ads, Google Analytics, dan produk Google lainnya dari penerapan gtag.js yang sama.

Penginstalan

Untuk mengonfigurasi tag Google (gtag.js) di halaman AMP, pertama-tama pastikan Anda telah menyertakan komponen amp-analytics dalam tag <head> di halaman:

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

Selanjutnya, tambahkan tag Google ke halaman AMP Anda sebagai komponen JSON dalam tag <body> di halaman. Ganti <TARGET_ID> dengan ID tag untuk produk (misalnya, Google Ads, Google Analytics) yang menjadi tujuan pengiriman data Anda:

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

Untuk mengonfigurasi beberapa produk di tag Google, Anda tidak perlu menginstal seluruh tag dari produk tersebut. Anda hanya perlu menambahkan ID tujuan ke perintah config terpisah.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

Untuk informasi selengkapnya, lihat dokumentasi amp-analytics.

Pemicu peristiwa

Untuk mengirim data tertentu ke produk Anda, konfigurasikan pemicu berdasarkan peristiwa seperti klik. Pemicu untuk gtag.js di AMP mengikuti pola JSON yang sama seperti konfigurasi pemicu amp-analytics lainnya.

Contoh ini menunjukkan cara mengirim peristiwa click ke Google Analytics. Nilai selector adalah pemilih CSS yang memungkinkan Anda menentukan elemen mana yang ditargetkan. Nilai on menentukan jenis peristiwa, yang dalam hal ini adalah peristiwa click. Di bagian vars, tentukan jenis peristiwa di event_name dan tambahkan parameter tambahan yang diperlukan.

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

Selain peristiwa yang direkomendasikan, Anda dapat menentukan peristiwa kustom Anda sendiri.

Menautkan domain

Penaut domain memungkinkan dua situs terkait atau lebih di domain terpisah untuk diukur sebagai satu kesatuan. Untuk menentukan domain yang akan ditautkan, gunakan "linker": { "domains": [...] }:

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

Kemampuan untuk menautkan ke domain kanonis dari cache AMP diaktifkan secara default. Untuk menonaktifkan kemampuan untuk menautkan traffic domain, tambahkan "linker": "false" ke parameter config:

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

Contoh lengkap

Contoh kode ini menggambarkan demo lengkap pengoperasian halaman AMP yang membuat satu halaman AMP dan mengirim peristiwa button-click ke Google Analytics saat tombol diklik. Ganti <TAG_ID> dengan ID tag yang valid:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <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>

    <!-- 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": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

Pemecahan masalah

Gunakan amptagtest.appspot.com untuk memvalidasi konfigurasi pemberian tag atau Anda dapat memastikan secara manual bahwa nilai cid konsisten di seluruh domain dengan melakukan hal berikut:

Pastikan untuk menghapus cookie atau menggunakan mode Samaran.
Jika cid tidak ditemukan dalam cookie Google Analytics, nilai tersebut juga dapat diamati di tab Jaringan browser web Anda. Telusuri collect request, dan payload harus berisi nilai cid.

Setelah Anda beralih dari Google CDN ke situs klien, nilai cid dan gclid harus diteruskan melalui dekorasi URL:

**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**

Halaman landing terakhir harus tetap memiliki nilai cid yang sama seperti di halaman landing awal.
Berhati-hatilah dengan pengalihan dan perubahan domain antara halaman kanonis dan halaman landing non-AMP.