AMP

AMP sayfalarınız için temel analiz nasıl yapılandırılır?

Analytics platformları, genellikle, analiz sistemine geri gönderilen olayları tetikleyen satır içi JavaScript parçacıkları ve işlev çağrıları aracılığıyla web sitelerine entegre edilir. AMP, bu süreci birkaç analiz iş ortağı için çoğaltmak için esnek bir JSON yapılandırma sözdizimi sağlar.

İPUCU – Google Analytics'i analitik sağlayıcınız olarak kullanıyorsanız, amp-analytics öğrenin.

Bağlam için: AMP olmayan sayfalarda analiz

Aşağıda, geleneksel JavaScript tabanlı Google Analytics izleme örneği verilmiştir. Bunu amp-analytics JSON biçiminde yeniden yazacağız, ancak önce geleneksel yaklaşıma bakalım:

<script>
  (function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r;
    (i[r] =
      i[r] ||
      function () {
        (i[r].q = i[r].q || []).push(arguments);
      }),
      (i[r].l = 1 * new Date());
    (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
    a.async = 1;
    a.src = g;
    m.parentNode.insertBefore(a, m);
  })(
    window,
    document,
    'script',
    '//www.google-analytics.com/analytics.js',
    'ga'
  );

  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview');
</script>

Bu JavaScript oldukça basittir; pageview olayını izlemek için bir bildirim gönderir.

1. Adım: amp-analytics komut dosyasını dahil edin

Bu işlevi AMP'de çoğaltmak için önceamp-analytics bileşen kitaplığını belgemizin <head> bölümüne eklemeliyiz:

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

2. Adım: Yapılandırma kodunu ekleyin

Ardından, amp-analytics bileşenini belgenin body bölümünün sonuna ekleyelim:

<amp-analytics type="googleanalytics">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-YYYY-Y"
      },
      "triggers": {
        "default pageview": {
          "on": "visible",
          "request": "pageview",
          "vars": {
            "title": "Name of the Article"
          }
        }
      }
    }
  </script>
</amp-analytics>

Bu sayfanın üst kısmındaki JavaScript örneğinde olduğu gibi, bu amp-analytics parçacığı, Google Analytics'e bir sayfanın görüntülendiğini belirten bir bildirim gönderecektir.

Bunu belirtmek için, type googleanalytics olarak ayarladık ve ardından JSON'da "default pageview" adını verdiğimiz bir tetikleyici oluşturduk. Bu tetikleyici, sayfa görünür olduğunda ("on": "visible" nedeniyle) tetiklenecek ve tetiklendiğinde, vars ile belirttiğimiz değişkenlerle Google Analytics'e birpageview analizi isteği göndereceğiz.

amp-analytics'i yapılandırmak için kullanılan JSON, hangi analitik verilerin gönderileceğini ve ne zaman gönderileceğini açıklamak için çok esnek bir formattır. amp-analytics, formatla ilgili tüm ayrıntılara sahiptir.

3. Adım: Daha fazla tetikleyici ekleyin

Yukarıdaki örneğe dayanarak, "click on #header trigger" adlı başka bir tetikleyici ekleyebiliriz:

<amp-analytics type="googleanalytics">
  <script type="application/json">
    {
      "vars": {
        "account": "UA-YYYY-Y"
      },
      "triggers": {
        "default pageview": {
          "on": "visible",
          "request": "pageview",
          "vars": {
            "title": "Name of the Article"
          }
        },
        "click on #header trigger": {
          "on": "click",
          "selector": "#header",
          "request": "event",
          "vars": {
            "eventCategory": "examples",
            "eventAction": "clicked-header"
          }
        }
      }
    }
  </script>
</amp-analytics>

Bu yeni tetikleyicinin adından da tahmin edebileceğiniz gibi, "header" kimliğine sahip öğe tıklandığında tetiklenecektir ("on": "click" ve "selector": "#header"" ile belirtilir). Bu tetikleyici etkinleştiğinde, isteğe dahil edilecek birkaç değişkeni belirterek event isteğini analitik sağlayıcımıza göndereceğiz.

Entegre etmek istediğiniz özel bir izleme platformunuz varsa, amp-analytics'i kullanabilir ve izleme verilerini göndermek için kendi kişiselleştirilmiş URL uç noktalarınızı tanımlayabilirsiniz. amp-analytics bileşen referans belgelerinde daha fazla bilgi edinin.

NOT – “UA-YYYY-Y”, örnek bir Google Analytics hesabıdır. Sitenizde bu örneği kullanıyorsanız, kendi web sitenizin Google Analytics izleme koduyla değiştirilmelidir.

İPUCU – Daha basit bir izleme sistemiyle ilgileniyorsanız, amp-pixel'e bir göz atmak isteyebilirsiniz. Yalnızca sayfa görüntülemelerini izlemeniz gerekiyorsa, amp-pixelamp-analytics'ten daha hafif bir çözümdür, çünkü yalnızca geleneksel piksel izlemenin gereksinimlerini çözmeyi amaçlamaktadır. Analytics'te daha fazla bilgi edinin:Analytics: temel bilgiler kılavuzu.