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