Bagaimana cara mempelajari dan memasukkan amp-analytics

amp-analytics

Elemen amp-analytics Anda dapat menggunakannya untuk mengukur aktivitas situs web Anda di AMP. Saat ini, amp-analytics mendukung empat jenis acara:

- Tampilan halaman
- Klip jangkar
- Menit
- Perpindahan
- Perubahan pada carrusel AMP

Contoh ini menunjukkan peristiwa apa yang dapat diukur dan bagaimana hal itu dapat dikonfigurasi. Untuk mendapatkan gambaran umum lengkap dari semua opsi dan parameter yang tersedia, lihat dokumentasi resmi.

Cara Penambahanya

Impor komponen amp-analytics tepat setelah pembukaan <head>


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

Kami perlu menambahkan amp-iframe untuk mengintegrasikan panel analisis.


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

Kami akan menggunakan titik akhir analisis demo untuk menunjukkan apa yang dapat dilakukan amp-analytics. Panel tertanam melalui amp-iframe dan menunjukkan data yang diterima oleh titik akhir analisis secara real time. Itu harus terlihat di sudut kanan bawah.


Contohnya



  


<amp-iframe class="fixed-dashboard ampstart-card m1"
  width="180"
  height="180"
  layout="fixed"
  sandbox="allow-scripts allow-same-origin"
  frameborder="0"
  src="https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/embed?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample">
  <amp-img src="/img/pixel-white.png"
    layout="fixed-height"
    height="350"
    width="auto"
    placeholder></amp-img>
</amp-iframe>

Tampilan halaman

Ini adalah konfigurasi sederhana dari amp-analytics untuk memicu satu permintaan ketika halaman menjadi terlihat. Perhatikan bagaimana eventId variabel dalam permintaan dan nilai konkret di blok vars.

Penting: amp-analytics itu harus dikonfigurasi dalam badan dokumen.


Contohnya



  


<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "event",
          "vars": {
            "eventId": "pageview"
          }
        }
      }
    }
  </script>
</amp-analytics>

Ini adalah pelacakan visualisasi yang lebih canggih. Contoh ini memicu permintaan analisis ketika elemen tertentu menjadi terlihat. Elemen ditentukan oleh id dan harus elemen AMP (amp-img, amp-iframe, amp-ad, ...).


Contohnya



  


<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "event",
          "visibilitySpec": {
            "selector": "#cat-image-id",
            "visiblePercentageMin": 20,
            "totalTimeMin": 500,
            "continuousTimeMin": 200
          },
          "vars": {
            "eventId": "catview"
          }
        }
      }
    }
  </script>
</amp-analytics>

Gambar ini akan mengaktifkan permintaan untuk analisis, jika setidaknya 20% dari itu terlihat selama 500 ms dengan waktu minimum 200 ms visibilitas kontinu.


Contohnya




<amp-img id="cat-image-id"
  src="/img/cat-looking-up-300x200.jpg"
  width="300"
  height="200"
  attribution="visualhunt"
  alt="a cat"
  layout="responsive"></amp-img>

Klip jangkar

Interaksi pengguna juga dapat dilacak. Konfigurasi ini akan melacak klik pada tautan jangkar pada halaman.


Contohnya



  


<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "trackAnchorClicks": {
          "on": "click",
          "selector": "a",
          "request": "event",
          "vars": {
            "eventId": "clickOnAnyAnchor"
          }
        }
      }
    }
  </script>
</amp-analytics>

Cobalah dengan mengklik salah satu tautan.


Contohnya



  
    a link
  
  
    another link
  


<ul>
  <li>
    <a>a link</a>
  </li>
  <li>
    <a>another link</a>
  </li>
</ul>

Dimungkinkan juga untuk mengaktifkan acara klik hanya untuk tautan tertentu. Pilih elemen spesifik untuk dilacak dengan menentukan pengidentifikasi selector. Contoh ini hanya melacak klik jangkar dengan id anchor-id.


Contohnya



  


<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "trackAnchorClicks": {
          "on": "click",
          "selector": "#anchor-id",
          "request": "event",
          "vars": {
            "eventId": "clickOnSpecialAnchor"
          }
        }
      }
    }
  </script>
</amp-analytics>

Hanya satu dari tautan ini yang akan mengaktifkan acara clickOnSpecialAnchor


Contohnya



  
    a special link.
  
    a not so special link.


<ul>
  <li>
    <a id="anchor-id">a special link</a>.</li>
  <li>
    <a id="another-anchor-id">a not so special link</a>.</li>
</ul>

Travel events

Gunakan acara gulir untuk mengaktifkan permintaan dalam kondisi tertentu saat halaman tersebut digulir.


Contohnya



  


<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "scrollPings": {
          "on": "scroll",
          "scrollSpec": {
            "verticalBoundaries": [10, 20, 30, 40, 50, 60, 70, 80, 90]
          },
          "request": "event",
          "vars": {
            "eventId": "scroll"
          }
        }
      }
    }
  </script>
</amp-analytics>

Menit

Acara pengatur waktu diaktifkan dalam interval yang ditentukan.


Contohnya



  


<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "pageTimer": {
          "on": "timer",
          "timerSpec": {
            "interval": 10,
            "maxTimerLength": 600
          },
          "request": "event",
          "vars": {
            "eventId": "timer"
          }
        }
      }
    }
  </script>
</amp-analytics>

Pelacakan carrusel di AMP

Dimungkinkan untuk melacak peristiwa amp-carousel dengan amp-analytics (ini hanya berfungsi untuk type="slides" ). Ini adalah contoh dari carrusel:


Contohnya



  Slide 1
  Slide 2
  Slide 3



<amp-carousel width="400"
  height="300"
  layout="responsive"
  type="slides">
  <div class="slide"
    data-slide-id="slide1">Slide 1</div>
  <div class="slide"
    data-slide-id="slide2">Slide 2</div>
  <div class="slide">Slide 3</div>
</amp-carousel>

Anda bisa menggunakannya fromSlide y toSlide. Nilai tersebut diambil dari atribut data-slide-id cuando está presente, selain itu mewakili indeks slide (dari 0).

Acara tersebut amp-carousel-change dikeluarkan saat ada perubahan pada slide yang saat ini terlihat:


Contohnya



  


<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "ampCarouselChange": {
          "on": "amp-carousel-change",
          "request": "event",
          "vars": {
            "eventId": "carousel-change-${toSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>

Acara selanjutnya amp-carousel-next dikeluarkan saat ada gulir ke slide berikutnya:


Contohnya



  


<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "ampCarouselNext": {
          "on": "amp-carousel-next",
          "request": "event",
          "vars": {
            "eventId": "carousel-next-${toSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>

Acara tersebut amp-carousel-next dikeluarkan saat ada gulir ke slide sebelumnya:


Comtohnya



  


<amp-analytics>
  <script type="application/json">
    {
      "requests": {
        "event": "https://amp-publisher-samples-staging.herokuapp.com/amp-analytics/ping?user=amp-vmnLQPmabOxm0q_sX4aThsMe4kO0cReHKKJQxroWbsijCHi7j6b-Iqsrf2YqgZ_k&account=ampbyexample&event=${eventId}"
      },
      "triggers": {
        "ampCarouselPrev": {
          "on": "amp-carousel-next",
          "request": "event",
          "vars": {
            "eventId": "carousel-prev-${fromSlide}"
          }
        }
      }
    }
  </script>
</amp-analytics>

Tags: Amp Html Tutorial Blog

5/02/2017

Bagaimana cara mempelajari dan memasukkan amp-analytics

amp-analytics

Related post

Disqus comments:

Facebook comments:

Drafting

Youtube

Cookies