Görselleri Değiştirme / Gizleme ve Raporlama

İlk olarak değerlendirdiğim çözümlerden biri, görelleri ayrıca değerlendirme imkanı da sunduğu için Google Photos¹ oldu.

Google Photos görselleri kaynak olarak kullanmaya pek elverişli değil. Ancak, albüm olarak gayet kullanışlı bir servis olduğu da aşikar. Flickr², Dropbox³, Facebook Albüm⁴ gibi diğer alternatiflerle olan deneyimlerimi baz aldığımda da doğru bir karar verdiğimi düşünüyor(d)um.

Ancak, Google oturumu ile bir albüme giriş yaptığınızda edindiğiniz görsel yoluyla oturum dışında edindiğiniz farklılık göstermekte. Bunun nedeni öncelikle görselin, ardından görselin yer aldığı albümün public olarak düzenlenmesi gerekliliği. Diğer yandan, eğer görsellerle kolaj ya da animasyon oluşturmuşsanız kolajı ya albüme eklemelisiniz ya da kolay ve animasyon için ayrıca public url edinmelisiniz. Dolayısıyla bu yapı sunduğu avantjalara karşın daha fazla dezavantaja sahipti. Ardından, mecburen CDN çözümlerine yöneldim.

Görselleri doğrudan WordPress içerisiğinden çağırmak istemememin birkaç nedeni var.

1. WordPress yerine farklı bir blog sistemine geçeceğim,
2. İmajlar çok fazla yer kaplıyor ve alandan tasarruf etmek istiyorum,
3. Medyaları harici bir alanda tutarak sitenin bağlı olduğu barındırma alanından bağımsız hale getirmek istiyorum,
4. Albüm ve kolaj gibi işlemlerde sadece bağlantı paylaşarak paylaşım yapılabilmesini amaçlıyorum.

Fotoğrafların taşınması ve yazılar içerisindeki kaynak url’lerin değiştirilmesiyle birlikte yeni bir sekmede sayfalara baktığımda her şey oldukça muntazam görünüyordu. Ta ki bir ziyaretçim görsellerle ilgili görüntüleme sorunu yaşadığını iletene kadar. Başlarda sorunu tam olarak anlayamadım. CDN ya da kullanıcının bağlantısının yavaşlığı öncelikli değerlendirdiğim konular oldu. Ardından farklı device ve taracıyılarla sayfalara eriştiğimde görsellerin görüntülenemediğini fark ettim. Görsellerin kaynak url’lerini görüntülemek istediğimde benden oturum açmam istendiğinde her şey netleşti. Oturum içerisinde edindiğiniz görsel url’leri oturum boyunca geçerlilik kazanmakta. Tekrar tekrar imajların düzenlemesinin gerekmesi oldukça can sıkıcı bir boyuta ulaşınca en azından hatalı imajları bir süre kullanıcılardan gizlemeye karar verdim. Bu noktada oturum içi oluşturulan görsellerle oturum dışı oluşturulan görselleri ayırmak için jQuery ile imaj atmaya karar verdim.

// jQuery
$('img').one('error', function() {
    // REPLACE BROKEN IMAGES
    // Exmaple 1
    this.src = 'http://www.clker.com/cliparts/J/h/C/1/o/C/broken-file-icon-hi.png';

    // Example 2
    // $(this).attr("src", "http://www.clker.com/cliparts/J/h/C/1/o/C/broken-file-icon-hi.png");

    // Example 3
    // $(this).prop("src", "http://www.clker.com/cliparts/J/h/C/1/o/C/broken-file-icon-hi.png");
});

Görüntülenemeyen imajları belirleyeceğiniz sabit bir imajla nasıl değiştirebileceğinize dair yukarıda 3 farklı yöntem iletiyorum. Bu sayede hatalı olan imajları belirleyip tekrar güncelledim. Ancak açıkça söylemek gerekirse Google Photos içerisinden imajları eğer kolay ya da albüm paylaşımı yapmıyorsanız tekli görsel olarak paylaşmak tam bir eziyet olabiliyor. Peki, silindiği, adı ya da dosya yolu değiştirildiği gibi nedenlerle görüntülenemeyen imajlar yerine sabit bir imaj atadık, bu kadar mı? İmajların hepsini değiştirdikten sonra sonraki süreçte karşılaşabilecek muhtemel durumları tüm yazıların içeriklerini incelemeden ziyaretçilere bırakmaya karar verdim. Elbette bu aşamada kullanıcılara artık sabit bir görsel de göstermek istemiyorum. Bu aşamada ihtiyacım olan ne sebele olursa olsun görüntülenemeyen imajları gizlemek ve raporlamak.

// jQuery
$('img').one('error', function() {
    dataLayer.push({
        'event': 'brokenImage',
        'eventLabel': this.src
    });
    // HIDE BROKEN IMAGES
    $(this).hide();
});

Evet, ihtiyacım olan işlem bu kadar basit. Eğer bir imaj görüntülenemiyorsa onu gizliyor ve dataLayer olarak bunu Google Analytics’e iletiyorum. Böylelikle halihazırda her gün aldığım raporlarda ekstra bir küçük alanda imajların günlük durumlarını da kontrol edebiliyorum.

Ayrıca CSS ile görüntülenemeyen imajlar üzerinde düzenlemeler yapıp en azından daha hoş bir görüntü ile kullanıcılarınızı geçici durum hakkında da bilgilendirebilirsiniz. Konu hakkında daha detaylı bilgi için Ire Aderinokun‘ın Styling Broken Images⁵ yazısını inceleyebilirsiniz.

Peki, tüm bu süreç görüntülenemeyen imajlar için mi? Örnek olarak değindiğim konu dışında yukarıdaki akışı farklı bir çok amaç için değerlendirebilirsiniz. Mesela, imajların tıklanma yoğunluklarını da raporlar dahilinde derliyor ve tıklanma yoğunluğu düşük olanları alternatif görsellerle değiştiriyorum. Yukarıdaki süreçte mobil ve desktop ziyaretlerde sabit görsel alanlarında farklı görselleri görüntüleyebilir (replace) ve bu görüntüleme/tıklama yoğunluklarını Google Analytics üzerinden takip edebilirsiniz. Bu sadece örneklerden biri.