AMP’li bir sitede sayaç kurulumu ve ayarları
JavaScript kodunun çalıştırılmasını gerektiren Yandex.Metrica sayaç kodunun Accelerated Mobile Pages (AMP) teknolojisini kullanan bir siteye yüklenmesi halinde site sayfaları doğrulama işleminden geçemez. Bu durum, AMP teknolojisinin bazı JavaScript ve HTML5 olanaklarını kullanmayı imkansız kılmasından kaynaklanır. Bu tür sitelere Yandex.Metrica sayacı özel bir yöntemle kurulur.
Sayacın AMP'nin kullanıldığı siteye bağlanması
Sitenizin sayfalarının HTML kodlarında gerekli değişiklikleri yapın:
AMP'li site sayfalarındaki ziyaretçi eylemlerinin izlenmesi için özel amp-analytics bileşeni kullanılır. Bu bileşeni site sayfa kodunuzun
head
öğesinin içine eklemeniz gerekir.<head> ... <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script> ... </head>
Ayrıca
body
öğesine deamp-analytic
bileşenini ekleyin. Ziyaret verilerinin Yandex.Metrica'ya aktarılabilmesi içintype
özelliğinin değeri olarakmetrika
'yı vecounterId
değişkeni aracılığıyla sayaç numarasını belirtin.<body> ... <amp-analytics type="metrika"> <script type="application/json"> { "vars": { "counterId": "XXXXXX" ... } } </script> </amp-analytics> ... </body>
Veri aktarımı
Sayaç başlatılırken;
- ziyaret parametrelerinin aktarımı için yaParams değişkeni,
- hedefe ulaşma gibi yararlı eylemlerin aktarımı için tetikleyici (trigger) özellikleri kullanılır.
- Ziyaret ve ziyaretçi parametrelerinin aktarılması
- Hemen çıkma oranı
- Hedefe ulaşma
- Sayfa kaydırma
- Sonsuz yayın akışını kaydırma
- Ayrı bir sayfa öğesi yükleme
- Bir sayaç kodunun genel örneği
Ziyaret ve ziyaretçi parametrelerinin aktarılması
Ziyaret sırasında serbest ziyaret ve ziyaretçi parametrelerinin yaParams değişkeni aracılığıyla aktarılmasının örneği:
...
"vars": {
"counterId": "XXXXXX",
"yaParams": "{\"key\":\"value\",\"__ymu\":{\"user_param_key\":\"user_param_value\"}}"
},
...
Gerektiğinde sadece ziyaret parametrelerinin veya sadece ziyaretçi parametrelerinin aktarılmasını da sağlayabilirsiniz:
...
"vars": {
"counterId": "XXXXXX",
"yaParams": "{\"key\":\"value\"}"
},
...
...
"vars": {
"counterId": "XXXXXX",
"yaParams": "{\"__ymu\":{\"user_param_key\":\"user_param_value\"}}"
},
...
Hemen çıkma oranı
Siteden hemen çıkma oranının tam göstergesini belirlemek için timer tetikleyici özelliğini kullanın:
{
...
"triggers": {
"notBounce": {
"on": "timer",
"timerSpec": {
"immediate": false,
"interval": 15,
"maxTimerLength": 14
},
"request": "notBounce"
},
...
}
}
Hedefe ulaşma
Belirli sayfa öğeleri tıklandığında hedefe ulaşma takibi için click tetikleyici özelliğini kullanın.
{
...
"triggers": {
"someGoalReach": {
"on": "click",
"selector": "#Button",
"request": "reachGoal",
"vars": {
"goalId": "superGoalId",
"yaParams": "{\"key\": \"value\"}" // hedefe ulaşıldığında ziyaretin parametreleri olarak etkinlikteki değişken değeri kullanılacaktır
}
},
...
}
}
Alan | Türü | Açıklama |
---|---|---|
goalId | String | Yandex.Metrica arayüzünde JavaScript eylemi türünde bir hedef oluşturulduğunda belirlenen hedef kimlik belirleyicisi. |
Alan | Türü | Açıklama |
---|---|---|
goalId | String | Yandex.Metrica arayüzünde JavaScript eylemi türünde bir hedef oluşturulduğunda belirlenen hedef kimlik belirleyicisi. |
Sayfa kaydırma
Sayfanın belirli noktaya kadar kaydırıldığını (sayfanın boyuna göre kaydırılma yüzdesini) scroll tetikleyici özelliği yardımıyla tespit edebilirsiniz. Bu eylemi bir hedef olarak kaydedebilirsiniz.
{
...
"triggers": {
"halfScroll": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [
50
]
},
"request": "reachGoal",
"vars": {
"goalId": "halfScrollGoal"
}
},
"partsScroll": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [
25,
90
]
},
"request": "reachGoal",
"vars": {
"goalId": "partsScrollGoal"
}
},
...
}
}
Sonsuz yayın akışını kaydırma
Sonsuz yayın akışı, birbirini takip eden makaleleri görüntülemek için kullanılabilir. Makaleden makaleye geçişleri ve bunların her birinin görüntülemesini sabitlemek için amp-next-page-scroll tetikleyici özelliğini kullanın.
{
...
"triggers": {
"trackScrollThrough": {
"on": "amp-next-page-scroll",
"request": "pageview"
},
...
}
}
Ayrı bir sayfa öğesi yükleme
Sayfa öğesi ekranında sayfanın görüntülendiği anları tespit etmek için visible tetikleyici özelliğini kullanın.
Bir sayaç kodunun genel örneği
Örnek kod yalnızca sayacın sahip olduğu özellikleri göstermek için verilmiştir. Kopyalarken (//<...>) yorumlarını silin, XXXXXX yerine sayacınızın numarasını belirtin ve ek değişiklikleri yapın (örneğin, ziyaretçi ve ziyaret parametrelerinin iletilmesini özelleştirin).
<body>
...
<amp-analytics type="metrika">
<script type="application/json">
{
// Отправка параметров визита и посетителя
"vars": {
"counterId": "XXXXXX",
"yaParams": "{\"key\":\"value\",\"__ymu\":{\"user_param_key\":\"user_param_value\"}}"
},
// Передача триггеров
"triggers": {
// Точный показатель отказов
"notBounce": {
"on": "timer",
"timerSpec": {
"immediate": false,
"interval": 15,
"maxTimerLength": 14
},
"request": "notBounce"
},
// Скроллинг страницы
"halfScroll": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [
50
]
},
// Отслеживание скроллинга как цели
"request": "reachGoal",
"vars": {
"goalId": "halfScrollGoal"
}
},
// Скроллинг страницы
"partsScroll": {
"on": "scroll",
"scrollSpec": {
"verticalBoundaries": [
25,
90
]
},
// Отслеживание скроллинга как цели
"request": "reachGoal",
"vars": {
"goalId": "partsScrollGoal"
}
},
// Скроллинг бесконечной ленты
"trackScrollThrough": {
"on": "amp-next-page-scroll",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
...
</body>