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)