Accelerated Mobile Pages (AMP) projesi, web içeriğinizin performansını artırmaya yardımcı olan açık kaynaklı bir web platformudur. AMP, Google etiketi ve Google Etiket Yöneticisi için yerleşik destek içerir. Bu kılavuzda, AMP sayfaları için Google Analytics'in nasıl ayarlanacağı açıklanmaktadır.
Kurulum
Google etiketi, Google Analytics, Google Ads ve diğer Google ürünlerini AMP sayfalarına yüklemenize olanak tanır. Google Etiket Yöneticisi, bir AMP kapsayıcısı oluşturur ve Etiket Yöneticisi arayüzünden gelişmiş yapılandırmalar oluşturup üçüncü taraf etiketlerini dağıtmanıza olanak tanır.
Aşağıdaki düğmelerden platform tercihinizi seçin:
Google etiketi
gtag.js'nin AMP uygulaması, AMP web sitenizde analizleri etkinleştirmenize olanak tanımak için amp-analytics çerçevesini kullanır. Veriler, aynı gtag.js uygulamasından AMP sayfalarından Google Ads, Google Analytics ve diğer Google ürünlerine gönderilebilir.
Kurulum
gtag.js'yi bir AMP sayfasında yapılandırmak için öncelikle sayfadaki <head> etiketi içine amp-analytics bileşenini eklediğinizden emin olun:
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
</script>
Ardından, Google etiketini AMP sayfanıza sayfadaki <body> etiketi içinde bir JSON bileşeni olarak ekleyin. <TARGET_ID> değerini, veri göndermek istediğiniz ürünlerin (ör. Google Ads, Google Analytics) etiket kimliğiyle değiştirin:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
Google etiketinde birden fazla ürün yapılandırmak için ilgili üründeki etiketin tamamını yüklemeniz gerekmez. Hedef kimliğini ayrı bir config komutuna eklemeniz yeterlidir.
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TAG_ID>",
"config" : {
"<TAG_ID>": { "groups": "default" },
<!-- Additional IDs -->
}
}
}
</script>
</amp-analytics>
Daha fazla bilgi için amp-analytics belgelerine bakın.
Etkinlik tetikleyicileri
Ürünlerinize belirli verileri göndermek için tıklama gibi etkinliklere dayalı tetikleyiciler yapılandırın. AMP'deki gtag.js tetikleyicileri, diğer amp-analytics tetikleyici yapılandırmaları ile aynı JSON kalıplarını izler.
Bu örnekte, Google Analytics'e nasıl click etkinliği gönderileceği gösterilmektedir. selector değeri, hangi öğenin hedeflendiğini belirtmenize olanak tanıyan bir CSS seçicidir. on değeri, etkinlik türünü belirtir. Bu örnekte bu, bir click etkinliğidir. vars bölümünde, event_name içinde etkinlik türünü belirtin ve gerektiğinde ek parametreler ekleyin.
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
Önerilen etkinliklere ek olarak kendi özel etkinliklerinizi de belirtebilirsiniz.
Google Analytics ile özel boyutlar ve parametreler gönderme
gtag.js kullanarak AMP sayfalarından Google Analytics'e özel boyutlar ve metrikler göndermek için <amp-analytics> JSON'daki tetikleyici yapılandırmalarınızda extraUrlParams özelliğinden yararlanabilirsiniz. Google Analytics'teki özel parametreler, etkinlik parametreleri olarak gönderilir.
- Dize değerli etkinlik parametreleri için
ep.önekini kullanın. - Sayısal değerli etkinlik parametreleri için
epn.önekini kullanın.
Göndermeden önce bu özel boyutların ve metriklerin Google Analytics mülkünüze kaydedildiğinden emin olun.
Örnek: Sayfa görüntüleme ile özel parametreler
Bu yapılandırma, ilk sayfa görüntüleme ile birlikte bir özel boyut my_custom_dimension ve bir özel metrik my_page_score gönderir:
<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
"vars": {
"gtag_id": "G-XXXXXX",
"config": {
"G-XXXXXX": { "groups": "default" }
}
},
"triggers": {
"pageview": {
"on": "visible",
"request": "pageview",
"extraUrlParams": {
"ep.my_custom_dimension": "value1",
"epn.my_page_score": 95
}
}
}
}
</script>
</amp-analytics>
Örnek: Tıklama etkinliği içeren özel parametreler
Bu yapılandırma, kimliği myButton olan bir öğe tıklandığında özel parametreler gönderir:
<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
"vars": {
"gtag_id": "G-XXXXXX",
"config": {
"G-XXXXXX": { "groups": "default" }
}
},
"triggers": {
"pageview": {
"on": "visible",
"request": "pageview"
},
"trackButtonClick": {
"on": "click",
"selector": "#myButton",
"request": "event",
"vars": {
"event_name": "button_click",
"event_category": "Interactive"
},
"extraUrlParams": {
"ep.button_id": "myButton",
"ep.custom_info": "MoreDetails"
}
}
}
}
</script>
</amp-analytics>
Alanları bağlama
Alan adı bağlayıcı, ayrı alan adlarındaki iki veya daha fazla ilgili sitenin tek bir site olarak ölçülmesini sağlar. Bağlanacak alanları belirtmek için "linker": { "domains": [...] } kullanın:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<TARGET_ID>",
"config" : {
"<TARGET_ID>": {
"groups": "default",
"linker": { "domains": ["example.com", "example2.com", "foo.example.com"] }
}
}
}
}
</script>
</amp-analytics>
Eksiksiz örnek
Bu kod örneği, tek bir AMP sayfası oluşturan ve düğme tıklandığında Google Analytics'e bir button-click etkinliği gönderen bir AMP sayfasının eksiksiz ve çalışan bir demosunu göstermektedir. <TAG_ID> değerini geçerli bir etiket kimliği ile değiştirin:
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<link rel="canonical" href="self.html" />
<title>AMP gtag demo</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<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": "<TAG_ID>",
"config": {
"<TAG_ID>": {}
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
<h1>Welcome to the mobile web</h1>
<div>
<button type="button" id="the-button">Example: Log in with Google</button>
</div>
</body>
</html>
Sorun giderme
Etiketleme ayarlarınızı doğrulamak için validator.amp.dev adresini kullanın veya aşağıdaki adımları uygulayarak cid değerinin alanlar arasında tutarlı olmasını manuel olarak sağlayın:
- Çerezleri temizlediğinizden veya Gizli modu kullandığınızdan emin olun.
cidbir Google Analytics çerezinde bulunmuyorsa web tarayıcınızın Ağ sekmesinde de görülebilir.collect requestaraması yapın ve yük,ciddeğeri içermelidir.AMP sayfasından web sitenizin başka bir alanına geçiş yaptıktan sonra
cidvegcliddeğeri, URL dekorasyonu kullanılarak iletilmelidir:**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**Nihai açılış sayfasında, ilk açılış sayfasındakiyle aynı
ciddeğeri bulunmalıdır.Standart sayfa ile AMP olmayan açılış sayfaları arasındaki yönlendirmelere ve alan adı değişikliklerine dikkat edin.