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

Var olan, oturmuş bir sistemden belki zorunluluk, belki keyfi nedenlerle ayrılmak istediğinizde genelde ilk aşamada sistemler arasındaki farklılıkları düşünür ve panikleriz. İşin keyfi boyutunda süreci istediğimiz kadar uzatabilir ya da sonlandırabiliriz, ancak zorunluluk durumunda geri adım atmak mümkün olmayacaktır. Yıllardır wordpress kullanan, üzerine çözümler üreten biri olarak yakın zamanda bazı benim için radikal sayılabilecek adımlar atmaya karar verdim. Özetle, “mekan değişikliğinde ferahlık vardır” şeklinde açıklayabileceğim bu süreçle birlikte pek çok sorun ve çözümle haşır neşir olmaktayım. Bunlardan biri blog içeriklerinde kullandığım görselleri Google Photos altına taşımamla ortaya çıktı. Normalde 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 bu süreçte şöyle bir sorun yaşadım. 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.

Doğrudan wordpress içerisinden neden eklemediğimiz sorarsanız, bunun bir kaç 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 link 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.

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.

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 hali hazırda her gün aldığım raporlarda ekstra bir küçük alanda imajların günlük durumlarını da kontrol edebiliyorum.

Img replace error

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 (alternatif link) 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.

Leave a Reply