AMP
ID
English Deutsch Français العربية Español Italiano 日本語 한국어 Português Русский Türkçe 中文 Polski Tiếng việt

Contoh penggunaan

Panduan ini menyediakan sejumlah contoh penggunaan umum untuk melacak keterlibatan pengguna:

CATATAN – Ingin menambahkan contoh penggunaan? Beri tahu kami. Atau Anda juga dapat menyumbangkan contoh penggunaan Anda sendiri, kunjungi Cara Berkontribusi.

Melacak jumlah kunjungan halaman

Pelajari cara melacak jumlah kunjungan halaman menggunakan amp-pixel dan amp-analytics.

Menggunakan amp-pixel

Kirimkan data jumlah tampilan atau kunjungan halaman ke URL yang ditentukan dengan menggunakan amp-pixel:

<amp-pixel src="https://foo.com/pixel?"></amp-pixel>

Menggunakan amp-analytics - tanpa vendor

Kirimkan data jumlah tampilan kunjungan halaman ke URL yang ditentukan dengan menggunakan amp-analytics:

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}"
      },
      "vars": {
        "account": "ABC123"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        }
      }
    }
  </script>
</amp-analytics>

Menggunakan amp-analytics - googleanalytics

Kirimkan data jumlah tampilan atau kunjungan halaman ke Google Analytics (kunjungi juga Pelacakan halaman di Google Analytics):

<amp-analytics type="googleanalytics" id="analytics1">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y" // Replace with your property ID.
      },
      "triggers": {
        "trackPageview": {
          // Trigger names can be any string. trackPageview is not a required name.
          "on": "visible",
          "request": "pageview"
        }
      }
    }
  </script>
</amp-analytics>

Melacak data klik halaman

Pelajari cara melacak klik halaman dengan menggunakan amp-analytics, mengirimkan data peristiwa ke URL yang ditentukan, dan ke Google Analytics.

Mengirimkan data ke URL yang ditentukan

Contoh berikut ini menggunakan atribut selector untuk mengirimkan peristiwa click ke URL yang ditentukan setiap kali pengguna mengeklik sebuah tautan (<a href>):

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
      },
      "vars": {
        "account": "ABC123"
      },
      "triggers": {
        "trackAnchorClicks": {
          "on": "click",
          "selector": "a",
          "request": "event",
          "vars": {
            "eventId": "42",
            "eventLabel": "clicked on a link"
          }
        }
      }
    }
  </script>
</amp-analytics>

Mengirimkan data ke Google Analytics

Contoh berikut ini menggunakan atribut selector trigger untuk mengirimkan peristiwa click ke Google Analytics saat elemen tertentu diklik (kunjungi juga pelacakan peristiwa AMP di Google Analytics):

<amp-analytics type="googleanalytics" id="analytics3">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y" // Replace with your property ID.
      },
      "triggers": {
        "trackClickOnHeader": {
          "on": "click",
          "selector": "#header",
          "request": "event",
          "vars": {
            "eventCategory": "ui-components",
            "eventAction": "header-click"
          }
        }
      }
    }
  </script>
</amp-analytics>

Melacak pengguliran

Lacak gulir di halaman dengan menggunakan amp-analytics. Contoh berikut ini menggunakan atribut scrollspec untuk mengirimkan peristiwa scroll ke URL yang ditentukan jika halaman digulir secara vertikal sebanyak 25%, 50%, dan 90%. Peristiwa ini juga dipicu ketika halaman digulir secara horizontal hingga seluas 90% scroll:

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
      },
      "vars": {
        "account": "ABC123"
      },
      "triggers": {
        "scrollPings": {
          "on": "scroll",
          "scrollSpec": {
            "verticalBoundaries": [25, 50, 90],
            "horizontalBoundaries": [90]
          }
        }
      }
    }
  </script>
</amp-analytics>

Melacak interaksi sosial

Pelajari cara melacak interaksi sosial dengan menggunakan amp-analytics, mengirimkan data peristiwa ke URL yang ditentukan, dan ke Google Analytics.

Mengirimkan data ke URL yang ditentukan

Contoh berikut ini menggunakan atribut selector untuk mengirimkan peristiwa click ke URL yang ditentukan setiap kali pengguna mengeklik tweet (#tweet-link):

<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
      },
      "vars": {
        "account": "ABC123"
      },
      "triggers": {
        "trackClickOnTwitterLink": {
          "on": "click",
          "selector": "#tweet-link",
          "request": "event",
          "vars": {
            "eventId": "43",
            "eventLabel": "clicked on a tweet link"
          }
        }
      }
    }
  </script>
</amp-analytics>

Mengirimkan data ke Google Analytics

Contoh berikut ini menggunakan atribut selector trigger untuk mengirimkan peristiwa saat tombol sosial tertentu diklik (kunjungi juga pelacakan interaksi sosial AMP di Google Analytics):

<amp-analytics type="googleanalytics" id="analytics4">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-XXXXX-Y" // Replace with your property ID.
      },
      "triggers": {
        "trackClickOnTwitterLink": {
          "on": "click",
          "selector": "#tweet-link",
          "request": "social",
          "vars": {
            "socialNetwork": "twitter",
            "socialAction": "tweet",
            "socialTarget": "https://www.examplepetstore.com"
          }
        }
      }
    }
  </script>
</amp-analytics>