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>
Bağlantı alanları
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>
İlgili kaynaklar
- AMP: AMP Projesi
- AMP: AMP nedir?
- AMP: amp-analytics
- gtag.js: AMP ile gtag.js kullanma
- Universal Analytics yardım merkezi: Accelerated Mobile Pages (AMP)
- Google Analytics 4 Yardım Merkezi: Accelerated Mobile Pages (AMP)