AMP sayfalarına Analytics ekleme

Accelerated Mobile Pages (AMP), hızlı oluşturulan statik içerikler için web sayfaları oluşturmak amacıyla 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ülemelerini ölçmek için temel kurulum

Bir AMP sayfasında temel Google Analytics yüklemesi oluşturmak için bu kod snippet'ini kopyalayın ve <GA_MEASUREMENT_ID> değerini Google etiketi kimliğinizle değiştirin. Google etiketi 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>

Birden çok hedefe veri gönderme

Aynı <amp-analytics> etiketiyle birden fazla hedefe veri gönderebilirsiniz. Bunun için config komutunuza yeni <GA_MEASUREMENT_ID_NEW> ölçüm kimliğini eklemeniz yeterlidir.

<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" : {
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" },
      "<GA_MEASUREMENT_ID_NEW>": { "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 desteğini etkinleştirmek için yapılandırılır. Çerezleri etkinleştirmek için <amp-analytics> için type özelliğini "gtag" (gtag.js desteğini etkinleştirmek için) ve data-credentials özelliğini "include" olarak ayarlayın.

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

AMP, kendi onaylı kitaplıkların dışında hiçbir JavaScript'e izin vermez. Bu nedenle, yapılandırma JSON ile gerçekleştirilir. vars bloğuna geçerli bir <GA_MEASUREMENT_ID> içeren gtag_id özelliği eklenir ve bunun 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 kullanın. Tetikleyici yapılandırmasında şu özellikler kullanılır:

  • selector: Hedef öğeyi belirtmek için kullanılan CSS seçici.
  • on: Etkinliğin türünü belirtir.
  • vars: event_name öğesinde etkinlik türünü belirtin ve gerektiği şekilde başka parametreler ekleyin.

Bu örnekte, temel bir Google Analytics etkinliğinin nasıl oluşturulacağı gösterilmektedir. Kimlik değeri "the-button" olan bir öğe tıklandığında etkinleşecek "button" adlı bir tetikleyici oluşturun. Bu tetikleyici Google Analytics'e event_name değeri "login", method değeri ise "Google" 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, kampanyalarla ilgili rapor oluşturmak için yaygın olarak kullanılan, Google Analytics'e özel bir etkinlik kategorisidir. Bu değerler, vars bloğunda 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 belgelerine bakın.

Parametrelerde değişiklik yapma

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

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

Alan adı bağlayıcı, ayrı alan adlarındaki 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'in alan trafiğini bağlama özelliğini devre dışı bırakmak için yapılandırma parametrelerine "linker": "false" 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>

Universal Analytics için Site Hızı

Google Analytics, sitenizin trafiğinin küçük bir bölümü için site hızı verilerini otomatik olarak toplayacak şekilde yapılandırılmıştır. Daha fazla veya daha az veri toplamak için örnek hızını değiştirebilirsiniz. Örnek hızı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 karşılaştırması

AMP trafiği, varsayılan olarak web trafiğindekilerden farklı istemci kimlikleri kullanır. AMP sayfaları daha hızlı yüklenir ve standart web sayfası muadillerinden farklı trafik kalıpları gösterir. Bu, genellikle AMP ve AMP olmayan trafik arasında farklı metrikler alacağınız anlamına gelebilir.

AMP trafiğini ölçmek için ayrı bir mülk kullanmak, metriklerin daha iyi analiz edilmesini ve trafiğiniz hakkında daha doğru bilgiler elde etmenizi sağlar. Tek bir mülk kullanmanız gerekiyorsa AMP ve AMP olmayan trafiği ayırt etmek için:

  • Veri kaynağı boyutunu veya özel bir boyutu (Universal Analytics) kullanın.
  • Özel etkinlik parametresi kullanın (Google Analytics 4).

Yapılandırmanızdaki hataları ayıklayın

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

amp-analytics uzantısı, bir yapılandırmada hata ayıklamaya ve sorun gidermeye yardımcı olmak için uyarı ve hata mesajları sağlar. Günlüğe kaydedilen hata mesajlarını web tarayıcınızın konsolunda görüntülemek için sayfanın URL'sine #log=1 ekleyin.

Eksiksiz örnek

Bu örnekte, bir sayfada tek bir düğme bulunan eksiksiz bir AMP sayfası gösterilmektedir. Bu yapılandırma, standart sayfa görüntüleme verilerini ve "button-click" 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>