Cihaz uyumlu tasarımları Analytics üzerinden ölçmek

Cihaz uyumlu tasarım (responsive design), son zamanlarda mobil cihazlar ve tabletler üzerinden İnternet'e erişimin hızla artmasıyla birlikte popüler oldu. Cihaz uyumlu tasarım, sitenin içeriğini tamamen aynı tutarak, ziyaretçilerin siteye erişmek istedikleri ekranın genişliğine göre tasarımı yani görünüşü şekillendirmek için kullanılan kod dosyasının (css) farklılaşmasıyla sağlanıyor. Genelde 3 ayrı görünüm için tasarım yapılıyor: PC (normal bilgisayar ekranı), tablet, ve mobil cihaz.

Cihaz uyumlu tasarım için ekran boyutları

Google Analytics ekibi, cihaz uyumlu tasarımın Analytics'le nasıl ölçülebileceği üzerine bir başarı hikayesi yayınlamış. Orada da anlatıldığı gibi, aslında Analytics'te zaten farklı ekran boyutlarına göre raporlama yapılsa da, özellikle 3 ayrı tasarım için bir geliştirme yapıldığına göre, bu tasarımların etkilerini ayrı olarak ölçmek en iyisi. Bunun için, sadece sayfa açılırken şu aşağıdaki komutlardan ilgili olanı Analytics kodunun arasına eklemek yeterli:

Bilgisayar ekranı = 960 px ve üstü ise
_gaq.push(['_setCustomVar', 1, 'PageVariation', 'fullsize', 3]);

Tablet ekranı = 520 px - 960 px aralığında ise
_gaq.push(['_setCustomVar', 1, 'PageVariation', 'tablet', 3]);

Mobil cihaz ekranı = 520 px veya altı ise
_gaq.push(['_setCustomVar', 1, 'PageVariation', 'mobile', 3]);

Bu kodları doğru şekilde çalıştırdığımızda, Analytics'te aşağıdaki gibi bir raporlama almaya başlayacağız:

Analytics üzerinde farklı ekran boyutlarına göre raporlama örneği

Ekran segmentine göre tüm Analytics raporlarımızı inceleyebilir, mobil cihazlarda en çok hangi sayfanın görüntülendiğini, tabletlerde hangi sayfadan satışa geçişlerin daha çok olduğunu, hatta sepet adımlarının cihaz uyumlu tasarımlara göre nasıl farklılaştığını görebileceğiz.

Eğer sonuçlarını ölçmüyorsanız, cihaz uyumlu tasarımı boşuna yapıp yapmadığınızı asla bilemezsiniz.