Google Analytics'in Universal Analytics mülküyle ReactJS üzerinde nasıl kullanılacağına ilişkin bu kılavuzu paylaşıyorum . Hakkında konuşacağımız iki ürünle ilgili biraz giriş:

ReactJS, kullanıcı arayüzleri oluşturmak ve sürdürmek için bir SPA (Tek Sayfa Uygulaması) Javascript Kitaplığıdır; bu, uygulamanın, tarayıcının tüm yeni sayfaları yüklemesinin varsayılan yöntemi yerine, sunucudan veya yerel durumdan yeni verilere dayanarak mevcut sayfayı dinamik olarak yazacağı anlamına gelir. çok sayfalı uygulama

Google Analytics (GA), web sitenizi ziyaret ettiklerinde önemli kullanıcı bilgilerini kolayca takip edebileceğiniz, Google'ın sunduğu bir analiz aracıdır. 2020'nin 4. çeyreği itibarıyla Google, daha gelişmiş izleme özelliklerine ve daha iyi kontrol paneline sahip yeni Google Analytics 4 (GA4) özelliğini kullanıma sundu. Bu makale için, özellikle Google Analytics'in daha eski bir sürümü olan Universal Analytics (UA) mülkünü araştırıyoruz.

Hazırlık

Öncelikle, bu basit adımları izleyerek web siteniz için izleme kimliğini almanız gerekir.

1. Google Analytics web sitesine gidin ve ilk kez kullanıyorsanız, veri paylaşım ayarlarınızı içeren bir hesap oluşturmanız istenecektir.
2. Yeni bir mülk oluşturun — Universal Analytics mülkü seçeneğini belirlemeyi unutmayın. UA, GA4 veya her iki özelliği oluşturma seçeneklerine sahipsiniz.
3. Hesabınızı ve mülklerinizi ayarlamak için kalan bilgileri doldurun; ve ardından izleme kimliğini alırsınız (örn. UA-123456789–1).

Google Analytics ve ReactJS'de UA mülkü kullandığımda, React-GA kitaplığını en rahat şekilde kullanıyorum. Bu makale yazıldığı gibi, NPM'de haftalık 450K'dan fazla indiriliyor. Bu kodu ReactJS uygulamanızda çalıştırarak kolayca kurabilirsiniz.

# npm
npm i -s react-ga
# yarn
yarn add react-ga

uygulama

Web sitenizde kullanabileceğiniz iki basit GA uygulaması vardır.

Sayfa görüntülemeleri İzleme — izlemek istediğiniz her sayfanın componentDidMount'ında bu kod satırını kullanarak belirli hedef dönüşüm hunisini daha iyi anlamak için web sitenizi ziyaret ettiklerinde kullanıcı yolculuğunuzu izleyebilirsiniz.

ReactGA.pageview(window.location.pathname);

Etkinlik İzleme — başarılı ödeme, sosyal paylaşım, belirli düğmelere tıklama vb. gibi kampanya hedeflerinizle uyumlu olan web sitenizdeki önemli etkinlikleri izleyebilirsiniz.

Google Analytics'i ReactJS uygulamanıza doğru şekilde uyguladığınızı nasıl anlarsınız?

Basit ! ReactJS uygulamanızı açmanız veya yerel olarak çalıştırmanız ve GA panosunda Gerçek Zamanlı raporun Genel Bakış sekmesini açmanız yeterlidir. Web sitenizde aktif bir ziyaretçiniz olduğunu göreceksiniz, o da SİZ!

…ve Voilà!

Bu kadar ! GA'nın, kullanıcınız tarafından ziyaret edilen sayfa görüntülemelerini ve ReactJS uygulamanızda izlemek istediğiniz önemli olayları izlemesini başarıyla sağladınız.

Google Analytics hakkında daha fazla bilgi edinmek istiyorsanız, bunu aşağıdaki kaynaktan öğrenmenizi öneririm:

Google Analytics Akademisi: Yeni Başlayanlar için Google Analytics

Google Analytics Akademisi: Gelişmiş Google Analytics

Google Analytics Akademisi: Uzman Kullanıcılar için Google Analytics

Umarım bu kısa makale, bazı sorularınızı yanıtlayabilir veya web sitenizde analitik uygulamayı öğrenmeye olan ilginizi en üst düzeye çıkarabilir. Makalemi okuduğun için teşekkür ederim !