Analizle etkileşimi izleyin
Analytics platformları genellikle, analitik sistemine geri gönderilen olayları tetikleyen satır içi JavaScript parçacıkları ve işlev çağrıları aracılığıyla web sitelerine entegre edilir. AMP, bu işlemi birkaç analitik iş ortağı için çoğaltmak için esnek bir JSON yapılandırma sözdizimi sağlar.
Aşağıda, geleneksel JavaScript tabanlı Google Analytics izlemenin bir örneği verilmiştir. Bunu amp-analytics JSON biçimine yeniden yazacağız, ancak önce geleneksel yaklaşıma bakalım:
<script>
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
(i[r] =
i[r] ||
function () {
(i[r].q = i[r].q || []).push(arguments);
}),
(i[r].l = 1 * new Date());
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
})(
window,
document,
'script',
'//www.google-analytics.com/analytics.js',
'ga'
);
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
Bu JavaScript oldukça basittir; pageview olayını izlemek için bir bildirim gönderir.
Bu işlevi AMP'de çoğaltmak için önce amp-analytics bileşen kitaplığını belgemizin <head> bölümüne eklemeliyiz:
<script
async
custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"
></script>
Ardından, amp-analytics bileşenini belgenin body bölümünün sonuna ekleyelim:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-YYYY-Y"
},
"triggers": {
"default pageview": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "Name of the Article"
}
}
}
}
</script>
</amp-analytics>
Bu sayfanın üst kısmındaki JavaScript örneğinde olduğu gibi, bu amp-analytics parçacığı Google Analytics'e bir sayfanın görüntülendiğini belirten bir bildirim gönderir.
Bunu belirtmek için, type googleanalytics olarak ayarladık ve daha sonra JSON'da "default pageview" olarak adlandırdığımız bir tetikleyici oluşturduk. Bu tetikleyici, sayfa görünür olduğunda ("on": "visible" nedeniyle) tetiklenir ve tetiklendiğinde, belirttiğimiz vars ile Google Analytics'e bir pageview analizi isteği göndeririz.
amp-analytics'i yapılandırmak için kullanılan JSON, hangi analitik verilerin gönderileceğini ve ne zaman gönderileceğini açıklamak için çok esnek bir formattır. amp-analytics, formatla ilgili tüm ayrıntılara sahiptir.
Yukarıdaki örneğe dayanarak, "click on #header trigger" adlı başka bir tetikleyici ekleyebiliriz:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-YYYY-Y"
},
"triggers": {
"default pageview": {
"on": "visible",
"request": "pageview",
"vars": {
"title": "Name of the Article"
}
},
"click on #header trigger": {
"on": "click",
"selector": "#header",
"request": "event",
"vars": {
"eventCategory": "examples",
"eventAction": "clicked-header"
}
}
}
}
</script>
</amp-analytics>
Bu yeni tetikleyicinin adından da tahmin edebileceğiniz gibi, "header" kimliğine sahip öğe tıklandığında tetiklenecektir ("on": "click" ve "selector": "#header"" ile belirtilir). Bu tetikleyici etkinleştiğinde, isteğe dahil edilecek birkaç değişkeni belirterek event isteğini analitik sağlayıcımıza göndereceğiz.
Entegre etmek istediğiniz özel bir izleme platformunuz varsa, amp-analytics'i kullanabilir ve izleme verilerini göndermek için kendi kişiselleştirilmiş URL uç noktalarınızı tanımlayabilirsiniz. amp-analytics bileşen referans belgelerinden daha fazla bilgi edinin.
“UA-YYYY-Y” örnek bir Google Analytics hesabıdır; bu kendi web sitenizin Google Analytics izleme koduyla değiştirilmelidir.
amp-pixel'e bir göz atmak isteyebilirsiniz. Yalnızca sayfa görüntülemelerini izlemeniz gerekiyorsa, amp-pixel amp-analytics'ten daha hafif bir çözümdür, çünkü yalnızca geleneksel piksel izlemenin gereksinimlerini çözmeyi amaçlamaktadır. Daha fazla bilgi edinmek için Analytics: temel bilgiler kılavuzu.