Analytics'i AMP sayfalarına ekleme

Accelerated Mobile Pages (AMP), hızlı oluşturulan statik içeriğe yönelik web sayfaları oluşturmak için 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

AMP sayfasında temel bir Google Analytics yüklemesi oluşturmak için bu kod snippet'ini kopyalayıp <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 için desteği etkinleştirmek üzere yapılandırılır. gtag.js desteğini etkinleştirmek için <amp-analytics> için type özelliğini "gtag", data-credentials özelliğini de "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 bunun yerine JSON ile gerçekleştirilir. vars bloğuna geçerli bir <GA_MEASUREMENT_ID> içeren gtag_id özelliği, onun altına da <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ımlanmış değerlerle triggers kullanın. Tetikleyici yapılandırmasında şu özellikler kullanılır:

  • selector: Hedef öğe 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 gerekirse 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 "login", method değeri olarak "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 ve 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 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 olanlardan farklı istemci kimlikleri kullanır. AMP sayfaları daha hızlı yüklenir ve standart web sayfalarına göre 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ğinizin daha doğru bir görünümünü elde etmenizi sağlar. Tek bir özellik kullanmanız gerektiğinde AMP ve AMP olmayan trafiği ayırt etmek için:

  • Veri kaynağı boyutunu veya özel 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ı tanımlamak için kullanılabilir. Doğrulayıcıyı açmak için 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 bir 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>