AMP sayfalarına Analytics ekleme

Accelerated Mobile Pages (AMP) hızlı oluşturulan statik içerik 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 desteğe sahiptir.

Sayfa görüntülemelerini ölçmek için temel kurulum

Bir AMP sayfasında temel bir Google Analytics yüklemesi oluşturmak için bu kod snippet'ini kopyalayıp <GA_MEASUREMENT_ID> öğesini Google etiket 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 ölçüm kimliği <GA_MEASUREMENT_ID_NEW> 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ş bir AMP bileşeni olup bir komut dosyası etiketinde açık bir şekilde custom-element olarak 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 desteği etkinleştirecek şekilde yapılandırılmıştır. <amp-analytics> için type özelliğini "gtag" (gtag.js desteğini etkinleştirmek için) ve data-credentials özelliğini "include" (çerezleri etkinleştirmek için) olarak ayarlayın.

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

AMP, kendi onaylı 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> değerine sahip bir gtag_id özelliği eklenir ve altına <GA_MEASUREMENT_ID>: {} eklenmiş bir yapılandırma mülkü değer olarak eklenir.

Etkinlikleri ölçme

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

  • selector: Hedef öğe 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. Kimlik değeri "the-button" olan bir öğe tıklandığında tetiklenecek, "button" adlı bir tetikleyici oluşturun. Bu tetikleyici, Google Analytics'e event_name değerinde "login" ve bir method "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, Google Analytics'e özgü bir etkinlik kategorisidir ve genellikle kampanyalar hakkında rapor oluşturmak için kullanılır. 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 yapma

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>

Alan bağlayıcı, ayrı alanlardaki iki veya daha fazla alakalı sitenin tek olarak ölçülmesini sağlar. "linker": { "domains": [...] } özelliğine 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, standart alanınıza AMP önbelleğinden bağlantı verme ö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 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 olarak 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 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ğinizin daha doğru bir görünümünün elde edilmesini sağlar. Tek bir mülk kullanmanız gerekiyorsa AMP trafiğini ve AMP olmayan trafiği ayırt etmek için:

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

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

Bir web sayfasının AMP HTML spesifikasyonunu karşılamadığını belirlemek için AMP Doğrulayıcı 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ızın konsolunda 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, tek bir sayfada tek bir düğmeyle 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>