Bu sayfa, Cloud Translation API ile çevrilmiştir.

AMP sayfalarına Analytics ekleme

Accelerated Mobile Pages (AMP), hızlı oluşturulan statik içerik için web sayfaları oluşturmak üzere kullanılan bir platformdur. AMP, kullanıcı etkileşimlerinin ölçülmesini sağlayan bir <amp-analytics> öğesi içerir ve Google Analytics için yerleşik destek sunar.

Sayfa görüntüleme sayısını ölçmek için temel kurulum

AMP sayfasında temel bir Google Analytics yüklemesi oluşturmak için bu kod snippet'ini kopyalayıp <GA_MEASUREMENT_ID> özelliğini kullanmak istediğiniz mülk kimliğiyle değiştirin. (Google Analytics kimliğinizi bulun.)

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

İşleyiş şekli

<amp-analytics> öğesi, genişletilmiş AMP bileşenidir ve komut dosyası etiketinde custom-element olarak açıkça etkinleştirilir.

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

<amp-analytics> öğe bloğu, Google ölçüm ürünleri için destek sağlayacak şekilde yapılandırılmıştır. <amp-analytics> için type özelliğini "gtag" (gtag.js desteğini etkinleştirmek için); data-credentials özelliğini "include" (çerezleri etkinleştirmek için) olarak ayarlayın.

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

AMP, kendi onaylanmış kitaplıklarının dışında JavaScript'e izin vermez. Bu nedenle, yapılandırma JSON ile gerçekleştirilir. vars bloğuna geçerli <GA_MEASUREMENT_ID> özelliğine sahip bir gtag_id özelliği eklenir ve altına <GA_MEASUREMENT_ID>: {} içeren bir yapılandırma özelliği değer olarak eklenir.

Etkinlikleri ölçme

AMP sayfalarındaki etkinlikleri ölçmek için tanımlı değerlerle triggers'i kullanın. Bu özellikler bir tetikleyici yapılandırmasında kullanılır:

selector: Bir hedef öğeyi belirtmek için bir CSS seçici.
on: Etkinliğin türünü belirtir.
vars: event_name içinde etkinlik türünü belirtin ve gerekirse ek parametreler ekleyin.

Bu örnekte, temel bir Google Analytics etkinliğinin nasıl oluşturulacağı gösterilmektedir. "button" kimliğine sahip bir öğe tıklandığında tetiklenecek, "button" adlı bir tetikleyici oluşturun. Bu tetikleyici, Google Analytics'e event_name değeri: "login" ve method değeri için "Google" değeri gönderir:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Google Analytics Etkinlikleri, genellikle kampanyalarla ilgili raporlar oluşturmak için kullanılan, Google Analytics'e özgü etkinliklerin kategorisidir. Bu değerler, vars blokunda event_category, event_label ve value parametreleriyle belirtilebilir:

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

Tetikleyici yapılandırması hakkında daha fazla bilgi edinmek için amp-analytics dokümanlarına bakın.

Parametrelerde değişiklik yapın

Varsayılan Google Analytics parametrelerini geçersiz kılmak veya yeni parametreler eklemek için config blokunuzun parameter bölümüne istediğiniz değerleri ekleyin. Bu örnekte, page_title ve page_location için varsayılan sayfa görüntüleme ve etkinlik değerleri geçersiz kılınmıştır:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

Bağlantı alanları

Alan bağlayıcı, ayrı alanlardaki iki veya daha fazla ilgili sitenin tek olarak ölçülmesini sağlar. "linker": { "domains": [...] } mülküne bağlanması gereken alanları belirtin:

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

Google Analytics'in yapılandırıldığı AMP sayfalarında, AMP önbelleğinden standart alanınıza bağlantı oluşturma özelliği varsayılan olarak etkindir. Google Analytics' alan trafiğini bağlama özelliğini devre dışı bırakmak için "linker": "false" öğesini yapılandırma parametrelerine ekleyin:

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

Site Hızı

Google Analytics, site trafiğinizin küçük bir kısmı için site hızı verilerini otomatik olarak toplayacak şekilde yapılandırılır. Daha fazla veya daha az veri toplamak için örnek hızını değiştirebilirsiniz. Örnek oranını %100'e ayarlamak için vurgulanan kodu yapılandırmanıza ekleyin:

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

Site hızı verilerini toplamayı durdurmak için vurgulanan kodu kullanın:

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

AMP ve AMP olmayan trafik

AMP trafiği, varsayılan olarak web trafiği için farklı istemci kimlikleri kullanır. AMP sayfaları, daha hızlı yüklenir ve standart web sayfası eşdeğerlerine göre farklı trafik kalıpları gösterir. Bu da genellikle AMP olan ve olmayan trafik arasında farklı metrikler elde edebileceğiniz anlamına gelir.

AMP trafiğini ölçmek için ayrı bir mülk kullanılması, metriklerin daha iyi analiz edilmesini ve trafiğinizin daha doğru şekilde gösterilmesini sağlar. AMP ve AMP olmayan trafiği ölçmek için tek bir mülk kullanmanız gerekiyorsa bunları ayırt etmek için veri kaynağı boyutunu veya özel bir boyutu kullanın.

Google Analytics, varsayılan olarak "AMP" değerini veri kaynağı boyutu üzerinden gönderir. Bu değeri, tek bir görünümde AMP ve AMP olmayan içeriği segmentlere ayırmak, filtrelemek veya analiz etmek için kullanın.

Yapılandırmanızdaki hataları ayıklama

AMP Doğrulayıcı, bir web sayfasının AMP HTML spesifikasyonunu karşılamadığını belirlemek için kullanılabilir. Doğrulayıcıyı etkinleştirmek için sayfanın URL'sine #development=1 ekleyin.

amp-analytics uzantısı, yapılandırmayla ilgili hataları ayıklamanıza ve sorunları gidermenize yardımcı olacak uyarı ve hata mesajları sunar. Web tarayıcınızdaki günlüğe kaydedilen hata mesajlarını görüntülemek için bir sayfanın URL'sine #log=1 ekleyin.

Tam örnek

Bu örnekte, bir sayfada tek bir düğmeyle eksiksiz bir AMP sayfası gösterilmektedir. Bu yapılandırma, standart sayfa görüntüleme verilerini ve düğme tıklama etkinliklerini Google Analytics'e gönderir:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <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": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>

İlgili kaynaklar

AMP: AMP Projesi
AMP: AMP nedir?
AMP: amp-analytics
gtag.js: AMP ile gtag.js'yi kullanma
Google Analytics yardım merkezi: Accelerated Mobile Pages (AMP)