Sayacın AMP'nin kullanıldığı siteye kurulumu

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.

Not. Bu durumda E-Ticaret, Oturum Kaydı ve Paylaş butonu tıklamalarının takibi olmak üzere bazı Yandex.Metrica özellikleri desteklenir.

AMP teknolojisinin kullanıldığı sitelerde Yandex.Metrica sayacını çalıştırmak için site sayfalarınızın HTML kodlarında değişiklikler yapmanız gerekir:

  1. 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>
  2. Ayrıca body öğesine de amp-analytic bileşenini ekleyin. Ziyaret verilerinin Yandex.Metrica'ya aktarılabilmesi için type özelliğinin değeri olarak metrika'yı ve counterId 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>

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.
  1. Ziyaret ve ziyaretçi parametrelerinin aktarılması
  2. Hemen çıkma oranı
  3. Hedefe ulaşma
  4. Sayfa kaydırma
  5. Sayfanın veya belirli bir öğesinin yüklenmesi
  6. 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\"}"
},
...

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": 16
            },
            "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 şu eylemdeki değişken değeri ziyaret parametreleri olarak kullanılı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.

Sayfa kaydırma

Sayfanın belirli noktaya kadar kaydırıldığını (başka bir deyişle, 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"
            }
        },
        ...
    }
}

Sayfanın veya belirli bir öğesinin yüklenmesi

Ziyaretçi ekranında sayfanın veya belirli bir öğesinin görüntülendiği anları tespit etmek için visible tetikleyici özelliğini kullanın. Bu özellik ek özellikler içerebilir.

Bir sayaç kodunun genel örneği

Bu kod örneği, sayaç yardımıyla neler yapılabileceğini göstermek amacıyla verilmiştir. Bunu kopyalarken yorumlar (//<...>) bölümünü silmeniz, XXXXXX yerine sayacınızın numarasını yazmanız ve ziyaretçi ile ziyaret parametrelerinin aktarımı gibi bazı ek ayarlamalar yapmanız gerekir.

<body>
    ...
        <amp-analytics type="metrika">
            <script type="application/json">
                {
                    // Ziyaret ve ziyaretçi parametrelerinin aktarılması
                    "vars": {
                        "counterId": "XXXXXX",
                        "yaParams": "{\"key\":\"value\",\"__ymu\":{\"user_param_key\":\"user_param_value\"}}"
                    },
                    // Tetikleyicilerin (trigger'ların) aktarılması
                    "triggers": {
                        // Hemen çıkma oranının tam değeri
                        "notBounce": {
                            "on": "timer",
                            "timerSpec": {
                                "immediate": false,
                                "interval": 15,
                                "maxTimerLength": 16
                            },
                            "request": "notBounce"
                        },
                        // Sayfa kaydırma
                        "halfScroll": {
                            "on": "scroll",
                            "scrollSpec": {
                                "verticalBoundaries": [
                                    50
                                ]
                            },
                            // Sayfa kaydırmanın bir hedef olarak takibi
                            "request": "reachGoal",
                            "vars": {
                                "goalId": "halfScrollGoal"
                            }
                        },
                        // Sayfa kaydırma
                        "partsScroll": {
                            "on": "scroll",
                            "scrollSpec": {
                                "verticalBoundaries": [
                                    25,
                                    90
                                ]
                            },
                            // Sayfa kaydırmanın bir hedef olarak takibi 
                            "request": "reachGoal",
                            "vars": {
                                "goalId": "partsScrollGoal"
                            }
                        }
                    }
                }
            </script>
        </amp-analytics>
    ...
</body>