Cara memasukkan amp-analytics

5/11/2017 04:11:00 AM


amp-analytics


Element amp-analytics dapat digunakan untuk mengukur aktivitas situs web Anda di AMP. Saat ini, amp-analytics mendukung empat jenis acara yang berbeda:

- Tampilan halaman
- Tanpilan Clic
- Minute
- Displacement
- Perubahan pada korsel AMP

Contoh ini menunjukkan kejadian mana yang dapat diukur dan bagaimana konfigurasi dapat dikonfigurasi. Untuk mendapatkan gambaran lengkap tentang semua pilihan dan parameter yang tersedia, lihat dokumentasi resmi.

Cara menambahkannya

Simpan atau masukan kode amp-analytics dibawah ini setelah kode <head>


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

Dan tambahkan pula kode amp-iframe untuk mengintegrasikan panel analisis.


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

Kita akan menggunakan analisis demo endpoint untuk mendemonstrasikan apa yang bisa dilakukan dengan amp-analytics. Panel tertanam melalui amp-iframedan menampilkan data yang diterima oleh titik akhir analisis secara real time. Ini harus terlihat di sudut kanan bawah.


Hanya Contoh




  



<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>

Pageview

ini adalah konfigurasi sederhana amp-analisis untuk menembak satu permintaan saat halaman menjadi terlihat. Perhatikan bagaimana EventID variabel dalam permintaan dan nilai aktual di blok vars.

Penting: amp-analytics harus diatur didalam dokumen.


Hanya Contoh




  



<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 merupakan elemen AMP (amp-img, amp-iframe, amp-ad, ...).


Hanya Contoh




  



<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 paling sedikit 20% dari itu terlihat untuk 500 ms dengan waktu minimum 200 ms visibilitas terus menerus.


Hanya Contoh






<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>

Clics Anchor

Interaksi pengguna juga bisa dilacak. Konfigurasi ini akan melacak klik pada link anchor pada halaman..


Hanya Contoh




  



<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 link.


Hanya Contoh






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

Hal ini juga memungkinkan untuk mengaktifkan aktivitas klik hanya untuk link tertentu. Pilih elemen tertentu untuk pelacakan dengan menentukan pengenal selector. Contoh ini hanya melacak klik pada anchor dengan id anchor-id.


Hanya Contoh




  



<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 link ini yang akan memicu event clickOnSpecialAnchor


Hanya Contoh






<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 aktivitas gulir untuk mengaktifkan permintaan dalam kondisi tertentu saat halaman digulir.


Hanya Contoh




  



<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>

Pengaturan menit

Pengaturan timer diaktifkan dalam interval yang ditentukan.


Hanya contoh




  



<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 untuk AMP

Hal ini dimungkinkan untuk melacak amp-carousel dengan amp-analytics (ini bekerja hanya untuk type="slides" ). Inilah contohnya carrusel:


Hanya Contoh




  
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 dan toSlide. Nilai diambil dari atribut data-slide-id Bila ada, sebaliknya itu mewakili indeks slide (dari 0).

Caranya amp-carousel-change itu dikeluarkan saat ada perubahan pada slide yang saat ini terlihat:


Hanya contoh




  



<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>

Cara berikutnya amp-carousel-next itu dikeluarkan saat ada scroll ke slide berikutnya:


Hanya contoh



  



<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>

Cara amp-carousel-nextdikeluarkan saat ada scroll ke slide sebelumnya:


Hanya contoh




  



<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>



Video Youtube AMP




Tags:



You Might Also Like

Comments: