Sitenizin çevrimdışı kullanımını nasıl izleyeceğinizi öğrenerek sitenizin neden daha iyi bir çevrimdışı deneyime ihtiyacı olduğunu açıklayabilirsiniz.
Sitenizin çevrimdışı kullanımını nasıl izleyeceğinizi öğrenin. Böylece sitenizin neden daha iyi bir çevrimdışı moda ihtiyacı olduğunu açıklayabilirsiniz. Çevrimdışı kullanım analizlerini uygularken hangi tuzaklardan ve sorunlardan kaçınmanız gerektiğini öğrenin.
Online ve çevrimdışı tarayıcı etkinliklerinin tuzakları
Çevrimdışı kullanımı izlemenin en basit çözümü, online ve offline etkinlikleri için etkinlik işleyiciler oluşturmak (birçok tarayıcı bu etkinlikleri destekler) ve analiz izleme mantığınızı bu işleyicilere yerleştirmektir. Maalesef bu yaklaşımla ilgili çeşitli sorunlar ve sınırlamalar vardır:
- Genel olarak, her ağ bağlantısı durumu etkinliğini izlemek gereksiz olabilir ve mümkün olduğunca az veri toplanması gereken, gizliliğe odaklı bir dünyada verimsizdir. Ayrıca,
onlineveofflineetkinlikleri, ağ kaybının sadece bir anlık olması durumunda da tetiklenebilir. Bu durum, kullanıcı tarafından muhtemelen görülmez veya fark edilmez. - Çevrimdışı etkinliğin analiz takibi, analiz sunucusuna ulaşmıyor.
- Kullanıcı internete bağlı değilken yerel olarak bir zaman damgası izlemek ve kullanıcı tekrar internete bağlandığında çevrimdışı etkinliği analiz sunucusuna göndermek, kullanıcının sitenizi tekrar ziyaret etmesine bağlıdır. Kullanıcı, çevrimdışı mod olmadığı için sitenizden ayrılırsa ve bir daha geri gelmezse bunu izlemenin bir yolu yoktur. Çevrimdışı bırakmaları izleme özelliği, sitenizin neden daha iyi bir çevrimdışı moda ihtiyacı olduğuna dair bir gerekçe oluşturmak için kritik öneme sahip verilerdir.
onlineetkinliği, internet erişimi hakkında değil yalnızca ağ erişimi hakkında bilgi sahibi olduğundan çok güvenilir değildir. Bu nedenle, kullanıcı çevrimdışı olabilir ve izleme ping'i gönderme işlemi başarısız olabilir.- Kullanıcı, internete bağlı değilken mevcut sayfada kalmaya devam etse bile diğer analiz etkinliklerinin (ör.kaydırma etkinlikleri, tıklamalar vb.) hiçbiri izlenmez. Bu etkinlikler, daha alakalı ve faydalı bilgiler olabilir.
- Yalnızca çevrimdışı olmak çok anlamlı değildir. Yüklenemeyen kaynakları bilmek muhtemelen en önemlisidir. Bu durum, özellikle tek sayfalık uygulamalar (SPA'lar) için önemlidir. Bu uygulamalarda, düşen ağ bağlantısı, kullanıcıların anlayacağı bir tarayıcı çevrimdışı hata sayfasına yol açmayabilir. Bunun yerine, sayfanın rastgele ve dinamik kısımlarının sessizce başarısız olmasına neden olabilir.
Çevrimdışı kullanım hakkında temel bilgiler edinmek için bu çözümü kullanmaya devam edebilirsiniz ancak birçok dezavantaj ve sınırlama dikkatlice değerlendirilmelidir.
Daha iyi bir yaklaşım: hizmet çalışanı
Çevrimdışı modu etkinleştiren çözüm, çevrimdışı kullanımı izlemek için de daha iyi bir çözümdür. Kullanıcı çevrimdışı olduğu sürece Analytics ping'lerini IndexedDB'de depolayabilir ve kullanıcı tekrar çevrimiçi olduğunda bunları yeniden gönderebilirsiniz. Google Analytics için bu özellik Workbox modülünde zaten kullanılabilir. Ancak dört saatten fazla ertelenen isabetlerin işlenmeyebileceğini unutmayın.
En basit haliyle, Workbox tabanlı bir service worker'da aşağıdaki iki satırla etkinleştirilebilir:
import * as googleAnalytics from 'workbox-google-analytics';
googleAnalytics.initialize();
Bu, çevrimdışı durumdayken mevcut tüm etkinlikleri ve sayfa görüntüleme ping'lerini izler ancak bunlar olduğu gibi yeniden oynatıldığından çevrimdışı gerçekleştiğini bilemezsiniz. Bir özel boyut kullanarak analytics ping'ine offline işareti ekleyerek izleme isteklerini Workbox ile değiştirebilirsiniz:
import * as googleAnalytics from 'workbox-google-analytics';
googleAnalytics.initialize({
parameterOverrides: {
customDimension1: 'offline',
},
});
Kullanıcı, internet bağlantısı tekrar kurulmadan önce çevrimdışı olduğu için sayfadan ayrılırsa ne olur? Bu durum normalde hizmet çalışanını uyku moduna geçirir. Bağlantı geri geldiğinde verileri gönderemediği için Workbox Google Analytics modülü Background Sync API'yi kullanır. Arka plan senkronizasyonu, kullanıcı sekmeyi veya tarayıcıyı kapatsa bile bağlantı geri geldiğinde analiz verilerini gönderir.
Ancak bu yöntemin bir dezavantajı vardır: Bu yöntem mevcut izlemeyi çevrimdışı kullanıma uygun hale getirse de temel bir çevrimdışı modu uygulamadığınız sürece muhtemelen çok fazla alakalı veri gelmez. Bağlantı kesildiğinde kullanıcılar sitenizden hızlı bir şekilde ayrılmaya devam eder. Ancak artık, çevrimdışı boyutunun uygulandığı kullanıcılar ile normal kullanıcılarınızın ortalama oturum uzunluğunu ve kullanıcı etkileşimini karşılaştırarak bu durumu en azından ölçebilir ve nicel olarak ifade edebilirsiniz.
SPA'lar ve geç yükleme
Çok sayfalı web sitesi olarak oluşturulan bir sayfayı ziyaret eden kullanıcılar internet bağlantısı kesildiğinde gezinmeye çalıştığında tarayıcının varsayılan çevrimdışı sayfası gösterilir. Bu sayede kullanıcılar ne olduğunu anlayabilir. Ancak tek sayfalık uygulama olarak oluşturulan sayfalar farklı şekilde çalışır. Kullanıcı aynı sayfada kalır ve yeni içerik, tarayıcıda gezinme olmadan AJAX aracılığıyla dinamik olarak yüklenir. Kullanıcılar çevrimdışı olduklarında tarayıcı hata sayfasını görmez. Bunun yerine, sayfanın dinamik kısımları hatalarla oluşturulur, tanımlanmamış durumlara geçer veya dinamik olmaktan çıkar.
Geç yükleme nedeniyle çok sayfalı web sitelerinde de benzer etkiler görülebilir. Örneğin, ilk yükleme internete bağlıyken gerçekleşmiş olabilir ancak kullanıcı kaydırma yapmadan önce internet bağlantısını kesmiş olabilir. Ekranın alt kısmındaki tüm geç yüklenen içerikler sessizce başarısız olur ve eksik kalır.
Bu durumlar kullanıcıları gerçekten rahatsız ettiğinden bunları izlemek mantıklıdır. Service worker'lar, ağ hatalarını yakalamak ve sonunda bunları analizlerle izlemek için mükemmel bir noktadır. Workbox ile, bir mesaj etkinliği göndererek sayfayı başarısız istekler hakkında bilgilendirmek için global catch işleyicisi yapılandırılabilir:
import { setCatchHandler } from 'workbox-routing';
setCatchHandler(({ event }) => {
// https://developer.mozilla.org/docs/Web/API/Client/postMessage
event.waitUntil(async function () {
// Exit early if we don't have access to the client.
// Eg, if it's cross-origin.
if (!event.clientId) return;
// Get the client.
const client = await clients.get(event.clientId);
// Exit early if we don't get the client.
// Eg, if it closed.
if (!client) return;
// Send a message to the client.
client.postMessage({
action: "network_fail",
url: event.request.url,
destination: event.request.destination
});
return Response.error();
}());
});
Tüm başarısız istekleri dinlemek yerine, yalnızca belirli rotalardaki hataları yakalamak da mümkündür. Örneğin, yalnızca /products/* rotalarında oluşan hataları bildirmek istiyorsak setCatchHandler içinde URI'yi normal ifadeyle filtreleyen bir kontrol ekleyebiliriz.
Daha temiz bir çözüm, registerRoute öğesini özel bir işleyiciyle uygulamaktır. Bu, iş mantığını ayrı bir rotada kapsar ve daha karmaşık hizmet çalışanlarında daha iyi sürdürülebilirlik sağlar:
import { registerRoute } from 'workbox-routing';
import { NetworkOnly } from 'workbox-strategies';
const networkOnly = new NetworkOnly();
registerRoute(
new RegExp('https:\/\/example\.com\/products\/.+'),
async (params) => {
try {
// Attempt a network request.
return await networkOnly.handle(params);
} catch (error) {
// If it fails, report the error.
const event = params.event;
if (!event.clientId) return;
const client = await clients.get(event.clientId);
if (!client) return;
client.postMessage({
action: "network_fail",
url: event.request.url,
destination: "products"
});
return Response.error();
}
}
);
Son adım olarak, sayfanın message etkinliğini dinlemesi ve Analytics ping'i göndermesi gerekir.
Yine, hizmet çalışanı içinde çevrimdışı gerçekleşen analiz isteklerini arabelleğe aldığınızdan emin olun. Daha önce açıklandığı gibi, yerleşik Google Analytics desteği için workbox-google-analytics eklentisini başlatın.
Aşağıdaki örnekte Google Analytics kullanılmaktadır ancak diğer analiz sağlayıcılar için de aynı şekilde uygulanabilir.
if ("serviceWorker" in navigator) {
// ... SW registration here
// track offline error events
navigator.serviceWorker.addEventListener("message", event => {
if (gtag && event.data && event.data.action === "network_fail") {
gtag("event", "network_fail", {
event_category: event.data.destination,
// event_label: event.data.url,
// value: event.data.value
});
}
});
}
Bu, Google Analytics'te başarısız kaynak yüklemelerini izler. Bu yüklemeler, raporlama ile analiz edilebilir. Elde edilen analiz, hizmet çalışanı önbelleğe almayı ve genel olarak hata işlemeyi iyileştirmek, sayfayı kararsız ağ koşullarında daha sağlam ve güvenilir hale getirmek için kullanılabilir.
Sonraki adımlar
Çevrimdışı kullanımı izlemenin farklı yöntemlerini, avantajlarını ve eksikliklerini öğrendiniz. Bu, kullanıcılarınızdan kaçının internet bağlantısı kesildiği için sorun yaşadığını ölçmenize yardımcı olsa da bu yalnızca bir başlangıçtır. Web siteniz iyi tasarlanmış bir çevrimdışı mod sunmadığı sürece, analizlerde çevrimdışı kullanımın çok fazla olmadığını görürsünüz.
Tam izlemeyi etkinleştirmenizi ve ardından çevrimdışı özelliklerinizi izlemeye odaklanarak yinelemeler halinde genişletmenizi öneririz. Çevrimdışı hata sayfasıyla başlayın. Bu, Workbox ile kolayca oluşturulabilir ve özel 404 sayfalarına benzer bir kullanıcı deneyimi en iyi uygulamasıdır. Ardından, daha gelişmiş çevrimdışı yedeklemeler ve son olarak gerçek çevrimdışı içeriklere geçin. Bu özelliği reklamınızda duyurduğunuzdan ve kullanıcılarınıza iyi bir şekilde açıkladığınızdan emin olun. Böylece kullanımın arttığını göreceksiniz. Sonuçta herkes zaman zaman internet bağlantısı olmadan kalır.
Farklı işlevlerdeki paydaşları web sitenize daha fazla yatırım yapmaya ikna etmeyle ilgili ipuçları için Metrikleri raporlama ve performans kültürü oluşturma ile Web sitesi hızını işlevler arası olarak düzeltme başlıklı makalelere göz atın. Bu yayınlar performansa odaklanmış olsa da paydaşlarla nasıl etkileşim kuracağınız hakkında genel fikirler edinmenize yardımcı olur.