Vue.js SPA Uygulamalarınıza Google Analytics Entegrasyonu: Kapsamlı Bir Rehber

Vue.js SPA Uygulamalarınıza Google Analytics Entegrasyonu: Kapsamlı Bir Rehber

Günümüzün modern web uygulamaları, kullanıcı deneyimini zenginleştiren ve etkileşimli bir yapı sunan Tek Sayfa Uygulamaları (Single Page Application – SPA) mimarisiyle sıklıkla geliştirilmektedir. Vue.js, bu tür SPA’lar oluşturmak için popüler ve güçlü bir JavaScript framework’üdür. Ancak SPA’ların dinamik yapısı, geleneksel web sitelerinden farklı olarak sayfa yüklemelerini içermediği için, kullanıcı davranışlarını anlamak ve analiz etmek adına özel yaklaşımlar gerektirir. İşte bu noktada Google Analytics devreye girer. Google Analytics, web sitenizin ve mobil uygulamalarınızın performansını ölçmenize, kullanıcı etkileşimlerini takip etmenize ve değerli içgörüler elde etmenize olanak tanıyan güçlü bir web analiz hizmetidir. Bu makalede, Vue.js tabanlı SPA uygulamalarınıza Google Analytics (özellikle GA4) entegrasyonunu adım adım, kapsamlı bir şekilde inceleyeceğiz.

Geleneksel web sitelerinde, kullanıcı bir sayfadan diğerine geçtiğinde tarayıcı tam bir sayfa yüklemesi yapar ve bu yükleme, Google Analytics tarafından otomatik olarak bir “sayfa görüntüleme” (page view) olarak kaydedilir. Ancak SPA’larda, yönlendirmeler (routing) genellikle tarayıcıda JavaScript aracılığıyla gerçekleşir ve sayfanın tamamı yeniden yüklenmez; yalnızca içeriğin bir kısmı dinamik olarak güncellenir. Bu durum, Google Analytics’in varsayılan izleme mekanizmasını yanıltabilir ve sayfa görüntülemelerinin veya kullanıcı akışının doğru bir şekilde raporlanmasını engelleyebilir. Bu makale, bu zorlukların üstesinden gelmek için gerekli teknik adımları, en iyi uygulamaları ve farklı entegrasyon yöntemlerini ele alacaktır.

Google Analytics Temelleri ve GA4’e Odaklanma

Google Analytics, web sitelerinizin veya uygulamalarınızın trafik kaynaklarını, kullanıcı davranışlarını ve dönüşümlerini anlamanıza yardımcı olan bir dizi araç sunar. Son yıllarda Google, Universal Analytics’in (UA) yerini alan ve daha olay tabanlı (event-driven) bir model benimseyen Google Analytics 4’ü (GA4) piyasaya sürdü. GA4, geleneksel sayfa görüntülemelerinin yanı sıra, kullanıcıların uygulamanızla nasıl etkileşim kurduğunu daha derinlemesine anlamanızı sağlayan olaylara ve kullanıcılara odaklanır. Bu makalede, modern yaklaşım ve geleceğin standardı olduğu için GA4 entegrasyonuna ağırlık vereceğiz.

GA4’ün temel kavramları şunlardır:

• Mülk (Property): Verilerin toplandığı ve raporlandığı üst düzey kapsayıcıdır.
• Veri Akışı (Data Stream): Web sitenizden veya mobil uygulamanızdan gelen verilerin GA4 mülkünüze aktığı bir kanaldır. Web uygulamaları için genellikle bir “Web” veri akışı oluşturulur.
• Olaylar (Events): Kullanıcıların uygulamanızla gerçekleştirdiği her türlü etkileşimdir. Sayfa görüntülemeleri, tıklamalar, kaydırmalar, form gönderimleri gibi her şey bir olay olarak kabul edilir. GA4, otomatik olarak toplanan olaylar (örneğin, first_visit, session_start), gelişmiş ölçüm olayları (örneğin, scroll, click) ve özel olaylar sunar.
• Parametreler (Parameters): Olaylarla birlikte gönderilen ek bilgilerdir. Örneğin, bir add_to_cart olayına item_id, item_name, price gibi parametreler eklenebilir.
• Kullanıcı Özellikleri (User Properties): Kullanıcıların demografik veya davranışsal özelliklerini tanımlayan niteliklerdir. Örneğin, user_id, membership_level.

GA4, verileri toplamak için genellikle gtag.js kütüphanesini kullanır. Bu kütüphane, Google etiketlerini yönetmek için tek bir JavaScript kodu parçası sunar ve Google Analytics, Google Ads gibi çeşitli Google ürünlerine veri göndermeyi kolaylaştırır.

Vue.js SPA’lar ve Google Analytics: Özel Durumlar

Vue.js SPA’larında Google Analytics entegrasyonu, özellikle sayfa görüntülemelerinin doğru bir şekilde izlenmesi konusunda bazı özel dikkat gerektirir. Temel sorun, tarayıcının tam bir sayfa yüklemesi yapmamasıdır. Vue Router gibi istemci tarafı yönlendirme kütüphaneleri, URL’yi değiştirir ancak tarayıcıda yeni bir HTML belgesi talep etmez. Bu da Google Analytics’in varsayılan olarak yeni bir sayfa görüntülemesi kaydetmesini engeller.

Bu durumu aşmak için, Vue Router’ın yönlendirme sonrası (afterEach) kancalarını kullanarak her URL değişikliğinde manuel olarak bir “sayfa görüntüleme” olayı göndermemiz gerekir. Ayrıca, kullanıcıların buton tıklamaları, form gönderimleri, video oynatmaları gibi etkileşimlerini de özel olaylar olarak izlemek, uygulamanızın gerçek kullanım senaryolarını anlamak için kritik öneme sahiptir.

Ön Hazırlık: Google Analytics Hesabı Oluşturma ve Ayarlama

Entegrasyona başlamadan önce bir Google Analytics 4 mülküne ve bir web veri akışına ihtiyacınız var. İşte adımlar:

1. Google Hesabı Oluşturma/Giriş Yapma: Eğer yoksa bir Google hesabı oluşturun veya mevcut hesabınızla giriş yapın.
2. Google Analytics’e Erişim: analytics.google.com adresine gidin.
3. Mülk Oluşturma: Yönetici (Admin) panelinde “Mülk Oluştur” (Create Property) seçeneğini tıklayın. Mülk adını girin (örn. “Vue SPA Uygulamam”), raporlama saat dilimini ve para birimini seçin.
4. Veri Akışı Oluşturma: Mülkünüz oluşturulduktan sonra, “Veri Akışları” (Data Streams) bölümüne gidin ve “Web” seçeneğini seçin.
5. Web Sitesi URL’si ve Akış Adı: Vue.js uygulamanızın URL’sini (örn. https://www.ornekuygulama.com) girin ve bir akış adı belirleyin (örn. “Vue Uygulaması Web Akışı”).
6. Ölçüm Kimliği (Measurement ID) Edinme: Veri akışınızı oluşturduktan sonra, size bir “Ölçüm Kimliği” (Measurement ID) verilecektir. Bu kimlik, G-XXXXXXXXXX formatında olacaktır. Bu kimliği not alın, entegrasyon için buna ihtiyacımız olacak.
7. Gelişmiş Ölçüm (Enhanced Measurement): Varsayılan olarak etkinleştirilen gelişmiş ölçüm, sayfa görüntülemeleri, kaydırmalar, giden tıklamalar, site aramaları, video etkileşimleri ve dosya indirmeleri gibi olayları otomatik olarak izler. Bu, başlangıç için harika bir özelliktir.

Temel Entegrasyon Yöntemleri

Vue.js SPA’nıza Google Analytics eklemenin birkaç farklı yolu vardır. Her birinin kendine göre avantajları ve kullanım senaryoları bulunur.

gtag.js ile Manuel Entegrasyon

Bu yöntem, Google Analytics’i doğrudan index.html dosyanıza ekleyerek ve Vue bileşenlerinizde veya yaşam döngüsü kancalarında gtag() fonksiyonunu manuel olarak çağırarak çalışır. Bu, en temel ve esnek yaklaşımdır, ancak daha fazla manuel yönetim gerektirir.

Öncelikle, public/index.html dosyanızın etiketine aşağıdaki gtag.js kodunu ekleyin. YOUR_MEASUREMENT_ID kısmını kendi GA4 ölçüm kimliğinizle değiştirin.

Bu kod parçası, GA4 kütüphanesini yükler ve başlangıç yapılandırmasını yapar. gtag('config', 'YOUR_MEASUREMENT_ID') satırı, ilk sayfa yüklemesinde otomatik olarak bir sayfa görüntüleme olayı gönderir.

Daha sonra, uygulamanızda olay göndermek için gtag() fonksiyonunu kullanabilirsiniz. Örneğin, bir butona tıklandığında özel bir olay göndermek için:

// Bir Vue bileşeni içinde veya bir metotta
methods: {
  trackButtonClick() {
    if (typeof window.gtag === 'function') {
      window.gtag('event', 'button_click', {
        event_category: 'engagement',
        event_label: 'Anasayfa Butonu',
        value: 1
      });
      console.log('Google Analytics: button_click olayı gönderildi.');
    } else {
      console.warn('Google Analytics gtag fonksiyonu bulunamadı.');
    }
  }
}

Vue Plugin/Mixin Yaklaşımı

Büyük uygulamalarda gtag() çağrılarını her yere dağıtmak yerine, Google Analytics işlevselliğini merkezi bir Vue eklentisi (plugin) veya mixin içinde kapsüllemek daha temiz bir yaklaşımdır. Bu, kod tekrarını azaltır ve yönetimi kolaylaştırır.

Vue Eklentisi Oluşturma:

src/plugins/google-analytics.js adında bir dosya oluşturalım:

// src/plugins/google-analytics.js
export default {
  install: (app, options) => {
    const { measurementId, router } = options;

    // gtag.js kütüphanesinin yüklenip yüklenmediğini kontrol et
    if (!window.gtag) {
      console.warn('Google Analytics gtag.js kütüphanesi yüklenmemiş. Lütfen public/index.html dosyanızı kontrol edin.');
      return;
    }

    // Vue uygulamasına global bir $ga nesnesi ekle
    app.config.globalProperties.$ga = {
      // Sayfa görüntüleme olayını gönderme
      pageview(path, title = document.title) {
        if (window.gtag) {
          window.gtag('event', 'page_view', {
            page_path: path,
            page_title: title,
            page_location: window.location.origin + path
          });
          console.log(GA Pageview: ${path});
        }
      },
      // Özel bir olay gönderme
      event(eventName, eventParams = {}) {
        if (window.gtag) {
          window.gtag('event', eventName, eventParams);
          console.log(GA Event: ${eventName}, eventParams);
        }
      },
      // GA config güncelleme (örn. user_id ayarlama)
      config(configParams = {}) {
        if (window.gtag) {
          window.gtag('config', measurementId, configParams);
          console.log(GA Config:, configParams);
        }
      }
    };

    // Vue Router entegrasyonu (otomatik sayfa görüntüleme takibi)
    if (router) {
      router.isReady().then(() => {
        // İlk sayfa yüklemesi için
        app.config.globalProperties.$ga.pageview(router.currentRoute.value.fullPath);

        // Her rota değişimi için
        router.afterEach((to) => {
          app.config.globalProperties.$ga.pageview(to.fullPath);
        });
      });
    }
  }
};

Şimdi bu eklentiyi src/main.js dosyanızda kaydedin:

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router'; // Vue Router'ı import ettiğinizden emin olun
import googleAnalytics from './plugins/google-analytics';

const app = createApp(App);

app.use(router);
app.use(googleAnalytics, {
  measurementId: 'YOUR_MEASUREMENT_ID', // Kendi GA4 ölçüm kimliğiniz
  router: router // Vue Router instance'ını geçiyoruz
});

app.mount('#app');

Artık herhangi bir Vue bileşeni içinde this.$ga.event('my_custom_event', { param: 'value' }) veya this.$ga.pageview('/my-custom-path') gibi çağrılar yapabilirsiniz.

NPM Paketleri Kullanımı

Topluluk tarafından geliştirilen NPM paketleri, Google Analytics entegrasyonunu daha da kolaylaştırabilir. Bu paketler genellikle otomatik sayfa izleme, kolay olay gönderme ve Vue’nun reaktif sistemine entegrasyon gibi özellikler sunar. vue-gtag, Vue 3 için popüler bir seçenektir.

Kurulum:

npm install vue-gtag-next # Vue 3 için
veya
yarn add vue-gtag-next

Yapılandırma (src/main.js):

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import VueGtag from 'vue-gtag-next';

const app = createApp(App);

app.use(router);
app.use(VueGtag, {
  property: {
    id: 'YOUR_MEASUREMENT_ID' // Kendi GA4 ölçüm kimliğiniz
  }
}, router); // router instance'ını da üçüncü argüman olarak geçirin

app.mount('#app');

Bu yapılandırma ile vue-gtag-next, Vue Router’daki rota değişimlerini otomatik olarak dinleyecek ve her değişimde bir page_view olayı gönderecektir. Ayrıca, $gtag veya $ga global özelliklerini kullanarak özel olaylar da gönderebilirsiniz.

Kullanım Örnekleri:

// Bir Vue bileşeni içinde
export default {
  methods: {
    trackProductView() {
      this.$gtag.event('view_item', {
        item_id: 'SKU123',
        item_name: 'Harika Ürün',
        currency: 'USD',
        value: 99.99
      });
    },
    trackCustomEvent() {
      this.$gtag.event('custom_action', {
        category: 'navigation',
        label: 'Sidebar Açıldı'
      });
    }
  }
};

NPM paketleri, entegrasyon sürecini büyük ölçüde basitleştirir ve genellikle daha az hata yapmanızı sağlar. Ancak, kütüphanenin sunduğu soyutlama nedeniyle bazen derinlemesine özelleştirme yapmak daha zor olabilir.

Sayfa Görüntülemelerini İzleme (Page View Tracking)

SPA’larda sayfa görüntülemelerini doğru bir şekilde izlemek, kullanıcıların uygulamanızda hangi sayfaları ziyaret ettiğini anlamak için hayati öneme sahiptir. Yukarıdaki plugin veya NPM paketi yaklaşımları genellikle bu işi otomatikleştirir, ancak nasıl çalıştığını anlamak ve manuel olarak nasıl yapılacağını bilmek önemlidir.

Vue Router ile Otomatik İzleme

Vue Router, uygulamanızdaki yönlendirmeleri yönettiği için, sayfa görüntülemelerini izlemek için ideal bir noktadır. router.afterEach kancası, her başarılı yönlendirmeden sonra çalışır ve bu sayede Google Analytics’e yeni bir sayfa görüntüleme olayı gönderebiliriz.

Eğer bir plugin veya NPM paketi kullanmıyorsanız, manuel olarak src/main.js dosyanızda aşağıdaki gibi bir yapılandırma yapabilirsiniz:

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);

// İlk sayfa yüklemesi için (gtag('config') zaten bir page_view gönderir,
// ancak manuel olarak da kontrol edilebilir)
if (window.gtag) {
  router.isReady().then(() => {
    // gtag('config') zaten ilk sayfa görüntülemesini gönderdiği için,
    // burada tekrar göndermek genellikle gerekli değildir.
    // Ancak, eğer gtag('config') içinde send_page_view: false ayarı yapıldıysa,
    // veya özel bir başlangıç izlemesi isteniyorsa kullanılabilir.
    // window.gtag('event', 'page_view', {
    //   page_path: router.currentRoute.value.fullPath,
    //   page_title: document.title,
    //   page_location: window.location.origin + router.currentRoute.value.fullPath
    // });
    console.log(GA Initial Pageview: ${router.currentRoute.value.fullPath});
  });
}

// Her rota değişimi sonrası sayfa görüntüleme olayı gönder
router.afterEach((to) => {
  if (window.gtag) {
    window.gtag('event', 'page_view', {
      page_path: to.fullPath,
      page_title: document.title, // Dinamik başlık için daha gelişmiş bir yapı gerekebilir
      page_location: window.location.origin + to.fullPath
    });
    console.log(GA Pageview: ${to.fullPath});
  }
});

app.mount('#app');

document.title, her sayfa için dinamik olarak değişiyorsa, Vue Router’ın meta alanlarını kullanarak veya bileşenlerin mounted kancalarında başlığı güncelleyerek daha doğru başlıklar gönderebilirsiniz.

Olayları İzleme (Event Tracking)

GA4’ün temelinde olaylar yatar. Sayfa görüntülemelerinin yanı sıra, kullanıcıların uygulamanızla olan tüm etkileşimlerini olaylar aracılığıyla izlemek, değerli kullanıcı davranışları verileri sağlar.

Standart Olaylar ve Gelişmiş Ölçüm

GA4’ün gelişmiş ölçüm özelliği, birçok yaygın olayı (kaydırma, giden bağlantı tıklamaları, site aramaları vb.) otomatik olarak izler. Bu özelliği veri akışı ayarlarınızdan kontrol edebilir ve etkinleştirebilirsiniz. Bu, manuel olarak kod yazma yükünü önemli ölçüde azaltır.

Özel Olaylar (Custom Events)

Gelişmiş ölçümün kapsamadığı veya uygulamanıza özel olan etkileşimleri izlemek için özel olaylar tanımlamalısınız. Örneğin, bir “ürün sepete eklendi” butonu tıklaması, bir “kayıt tamamlandı” formu gönderimi veya bir “video oynatıldı” eylemi özel olaylar olarak izlenebilir.

Bir özel olay göndermek için gtag('event', 'event_name', { parameters }) yapısını kullanırız:

// Bir bileşen içinde
export default {
  methods: {
    addToCart(product) {
      // Sepete ekleme mantığı
      // ...

      // Google Analytics olayını gönder
      if (this.$ga) { // Eğer plugin kullanılıyorsa
        this.$ga.event('add_to_cart', {
          item_id: product.id,
          item_name: product.name,
          item_category: product.category,
          price: product.price,
          currency: 'TRY',
          quantity: 1
        });
      } else if (window.gtag) { // Manuel gtag.js kullanılıyorsa
        window.gtag('event', 'add_to_cart', {
          item_id: product.id,
          item_name: product.name,
          item_category: product.category,
          price: product.price,
          currency: 'TRY',
          quantity: 1
        });
      }
      console.log(Ürün sepete eklendi: ${product.name});
    },
    submitFeedbackForm() {
      // Form gönderme mantığı
      // ...
      if (this.$ga) {
        this.$ga.event('feedback_form_submit', {
          form_name: 'contact_us',
          user_status: this.isLoggedIn ? 'logged_in' : 'guest'
        });
      }
      console.log('Geri bildirim formu gönderildi.');
    }
  }
};

GA4’te, olaylarla birlikte gönderdiğiniz parametreleri raporlarınızda görmek için Google Analytics arayüzünde “Özel Tanımlar” (Custom Definitions) altında “Özel Boyutlar” (Custom Dimensions) veya “Özel Metrikler” (Custom Metrics) olarak kaydetmeniz gerekebilir. Bu, özellikle özel olaylarınızla birlikte gönderdiğiniz benzersiz parametreler için geçerlidir.

Parametreler (Parameters) ve Kullanıcı Özellikleri (User Properties)

• Parametreler: Bir olayla birlikte gönderilen, o olayın bağlamını açıklayan anahtar-değer çiftleridir. Örneğin, bir add_to_cart olayının item_id veya price parametreleri.
• Kullanıcı Özellikleri: Kullanıcının kendisiyle ilgili, oturumlar ve cihazlar arasında kalıcı olan özelliklerdir. Örneğin, user_id, membership_level, user_segment. Kullanıcı özellikleri, kullanıcıların kim olduğunu veya ne tür kullanıcılar olduğunu anlamanıza yardımcı olur.

Kullanıcı özellikleri, gtag('set', 'user_properties', { ... }) veya gtag('config', 'YOUR_MEASUREMENT_ID', { user_properties: { ... } }) ile ayarlanabilir. Bir kez ayarlandığında, sonraki tüm olaylarla birlikte gönderilirler.

// Kullanıcı giriş yaptığında kullanıcı özelliklerini ayarla
function setUserProperties(userId, userRole) {
  if (window.gtag) {
    window.gtag('set', 'user_properties', {
      user_id: userId,
      user_role: userRole,
      membership_level: 'premium'
    });
    console.log(GA User Properties ayarlandı: ${userId}, ${userRole});
  }
}

// Örneğin, login sonrası çağırılabilir
// setUserProperties('user123', 'admin');

Gelişmiş İzleme Senaryoları

Kullanıcı Kimliği (User ID) İzleme

Giriş yapan kullanıcıları cihazlar ve oturumlar arasında tutarlı bir şekilde izlemek için Kullanıcı Kimliği (User ID) kullanmak çok önemlidir. Bu, tek bir kullanıcının farklı cihazlardan yaptığı etkileşimleri bir araya getirerek daha bütünsel bir kullanıcı yolculuğu görünümü sağlar.

Kullanıcı giriş yaptığında veya kullanıcı kimliği mevcut olduğunda, gtag('config') komutunu kullanarak User ID’yi ayarlayabilirsiniz:

// Kullanıcı giriş yaptıktan sonra veya uygulama başlatıldığında
function setUserId(userId) {
  if (window.gtag) {
    window.gtag('config', 'YOUR_MEASUREMENT_ID', {
      'user_id': userId
    });
    console.log(GA User ID ayarlandı: ${userId});
  }
}

// Örneğin, Vuex store'da user_id güncellendiğinde
// watch(() => store.state.auth.userId, (newUserId) => {
//   if (newUserId) {
//     setUserId(newUserId);
//   }
// });

Unutmayın, User ID olarak kişisel olarak tanımlanabilir bilgiler (PII) göndermemelisiniz (örn. e-posta adresleri, TC kimlik numaraları). Bunun yerine, uygulamanızın dahili sisteminde benzersiz ve anonim bir kimlik kullanın.

E-ticaret İzleme (Enhanced E-commerce)

Online mağazalar için Google Analytics 4, e-ticaret işlemleri için özel olaylar ve parametreler sunar. Bu, ürün görüntülemeleri, sepete eklemeler, ödeme adımları ve satın almalar gibi önemli e-ticaret metriklerini izlemenizi sağlar.

Örnek bir sepete ürün ekleme olayı:

function trackAddToCart(product) {
  if (window.gtag) {
    window.gtag('event', 'add_to_cart', {
      currency: 'TRY',
      value: product.price, // Sepete eklenen toplam değer
      items: [{
        item_id: product.id,
        item_name: product.name,
        item_category: product.category,
        price: product.price,
        quantity: 1
      }]
    });
    console.log(E-ticaret olayı: add_to_cart, ürün: ${product.name});
  }
}

Diğer e-ticaret olayları (view_item, view_item_list, begin_checkout, purchase vb.) için de benzer yapılar kullanılır. Her bir olayın beklediği parametreler GA4 dokümantasyonunda detaylı olarak belirtilmiştir.

Hata İzleme (Error Tracking)

Uygulamanızdaki istemci tarafı hatalarını Google Analytics’e özel olaylar olarak göndermek, kullanıcı deneyimini etkileyen sorunları proaktif olarak tespit etmenize yardımcı olabilir.

Vue.js uygulamanızda global bir hata yakalayıcı (error handler) kullanarak hataları izleyebilirsiniz:

// src/main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

// Global Vue hata yakalayıcı
app.config.errorHandler = (err, vm, info) => {
  console.error('Vue Hata:', err, vm, info);
  if (window.gtag) {
    window.gtag('event', 'app_error', {
      error_message: err.message,
      error_stack: err.stack,
      component_info: info,
      page_path: router.currentRoute.value.fullPath
    });
    console.log('GA App Error olayı gönderildi.');
  }
};

app.use(router);
// ... diğer pluginler ve app.mount
app.mount('#app');

Bu şekilde, Vue bileşenlerinizde oluşan hatalar otomatik olarak GA4’e gönderilir ve hata raporlarınızı zenginleştirebilirsiniz.

Yerel Geliştirme Ortamında İzlemeyi Devre Dışı Bırakma

Geliştirme veya test ortamlarında Google Analytics verileri göndermek, gerçek kullanıcı verilerinizi kirletebilir ve raporlarınızı yanıltıcı hale getirebilir. Bu nedenle, genellikle GA izlemesini yalnızca üretim (production) ortamında etkinleştirmek istenir.

Bunu, Vue CLI veya Vite gibi araçların sağladığı ortam değişkenlerini kullanarak yapabiliriz. Genellikle process.env.NODE_ENV değişkeni kullanılır:

// src/main.js veya google-analytics.js plugin dosyanızda
const IS_PRODUCTION = process.env.NODE_ENV === 'production';
const MEASUREMENT_ID = 'YOUR_MEASUREMENT_ID'; // .env dosyasından da çekilebilir

if (IS_PRODUCTION && window.gtag) {
  // Production ortamında gtag.js'yi yapılandır ve olayları gönder
  // ...
  // Örneğin, plugin içindeki $ga nesnesi
  app.config.globalProperties.$ga = {
    pageview(path, title = document.title) {
      window.gtag('event', 'page_view', { page_path: path, page_title: title, page_location: window.location.origin + path });
    },
    event(eventName, eventParams = {}) {
      window.gtag('event', eventName, eventParams);
    },
    config(configParams = {}) {
      window.gtag('config', MEASUREMENT_ID, configParams);
    }
  };

  // Vue Router entegrasyonu
  router.afterEach((to) => {
    app.config.globalProperties.$ga.pageview(to.fullPath);
  });

} else {
  // Geliştirme ortamında izlemeyi devre dışı bırak veya konsola logla
  console.warn('Google Analytics izleme geliştirme ortamında devre dışı.');
  app.config.globalProperties.$ga = {
    pageview: (path) => console.log(GA DEV: Pageview ${path}),
    event: (name, params) => console.log(GA DEV: Event ${name}, params),
    config: (params) => console.log(GA DEV: Config, params)
  };
}

Ayrıca, public/index.html dosyasındaki gtag.js betiğini de yalnızca üretimde yüklemek için bir sunucu tarafı render (SSR) çözümü veya Vue CLI’ın HTML eklentisi gibi araçlarla koşullu olarak ekleyebilirsiniz. Ancak, genellikle JavaScript içinde koşullu olay gönderme yeterlidir.

Test ve Doğrulama

Entegrasyonu tamamladıktan sonra, verilerin Google Analytics’e doğru bir şekilde ulaştığından emin olmak çok önemlidir.

• Gerçek Zamanlı Raporlar (Realtime Reports): GA4 arayüzündeki “Gerçek Zamanlı” rapor, uygulamanızda aktif olan kullanıcıları ve son 30 dakika içinde gönderilen olayları anında gösterir. Bu, olayların gönderilip gönderilmediğini hızlıca kontrol etmek için harika bir araçtır.
• DebugView: GA4’ün en güçlü hata ayıklama araçlarından biridir. Uygulamanızdan gelen tüm olayları, parametreleri ve kullanıcı özelliklerini detaylı bir akış halinde görmenizi sağlar. DebugView’ı kullanmak için, Chrome için “Google Analytics Debugger” uzantısını yükleyebilir veya uygulamanızda gtag('set', 'debug_mode', true) komutunu çalıştırabilirsiniz (yalnızca geliştirme ortamında!).
• Tarayıcı Geliştirici Araçları: Tarayıcınızın geliştirici araçlarındaki “Network” (Ağ) sekmesini kullanarak Google Analytics’e gönderilen istekleri görebilirsiniz. collect?v=2 ile başlayan istekleri arayın. Bu isteklerin parametrelerini inceleyerek olaylarınızın ve verilerinizin doğru formatta gönderilip gönderilmediğini kontrol edebilirsiniz.

Performans ve Gizlilik Hususları

Performans

Google Analytics betiğinin uygulamanızın performansını olumsuz etkilememesi önemlidir. gtag.js betiği varsayılan olarak async özniteliği ile yüklendiği için ana render sürecini engellemez. Ancak, çok sayıda karmaşık olay göndermek veya büyük veri yükleriyle çalışmak, özellikle eski cihazlarda veya zayıf ağ koşullarında performansı etkileyebilir. Mümkün olduğunca verimli kod yazmaya ve gereksiz olayları göndermekten kaçınmaya özen gösterin.

Gizlilik

Kullanıcı gizliliği, günümüz dijital dünyasında en önemli konulardan biridir. GDPR (Avrupa), CCPA (Kaliforniya) ve KVKK (Türkiye) gibi düzenlemelere uyum sağlamak zorunludur.

• Çerez Onayı (Cookie Consent): Google Analytics çerezleri kullandığı için, kullanıcılarınızdan çerez kullanımına ilişkin açık onay almanız gerekmektedir. Bir çerez onay banner’ı veya aracı kullanarak kullanıcıların izleme tercihlerini yönetmelerine izin verin.
• IP Anonimleştirme: GA4’te IP anonimleştirme varsayılan olarak etkindir, yani IP adreslerinin tamamı kaydedilmeden önce anonimleştirilir. Bu, gizlilik için iyi bir uygulamadır.
• Veri Saklama: Google Analytics’te veri saklama sürelerini ayarlayabilirsiniz. Kullanıcı ve olay verilerinin ne kadar süreyle saklanacağını belirleyerek gizlilik gereksinimlerinize uygun hale getirin.
• Kişisel Tanımlanabilir Bilgiler (PII): Asla PII (örn. ad, e-posta, telefon numarası) gibi hassas bilgileri Google Analytics’e göndermeyin. User ID olarak kullanılan kimliklerin anonim olduğundan emin olun.
• Opt-out Mekanizmaları: Kullanıcılara Google Analytics izlemesinden vazgeçme (opt-out) seçeneği sunmak, gizlilik politikalarınızın bir parçası olmalıdır. Google, tarayıcı eklentileri gibi araçlar sunar.

Sık Karşılaşılan Sorunlar ve Çözümleri

• Olaylar GA’da görünmüyor:
  • Ölçüm Kimliğinizin (Measurement ID) doğru olduğundan emin olun.
  • gtag.js betiğinin public/index.html içinde doğru yüklendiğinden emin olun.
  • Geliştirme ortamında olup olmadığınızı kontrol edin (process.env.NODE_ENV).
  • Tarayıcı önbelleğini temizleyin veya gizli modda deneyin.
  • DebugView veya gerçek zamanlı raporları kontrol edin.
  • Ağ sekmesinde collect isteklerinin gönderilip gönderilmediğini kontrol edin.
• Yinelenen sayfa görüntülemeleri:
  • Hem gtag('config') hem de router.afterEach içinde aynı anda sayfa görüntülemesi gönderip göndermediğinizi kontrol edin. gtag('config') varsayılan olarak ilk sayfa görüntülemesini gönderir.
  • Vue Router’ın afterEach kancasının birden fazla kez tetiklenip tetiklenmediğini kontrol edin (pek olası değil ama kontrol etmekte fayda var).
• Yanlış olay verileri:
  • Gönderdiğiniz parametre adlarının ve değerlerinin GA4 beklentileriyle (özellikle e-ticaret olayları için) eşleştiğinden emin olun.
  • Özel parametreleri GA4 arayüzünde “Özel Tanımlar” altında tanımladığınızdan emin olun.
• CORS (Cross-Origin Resource Sharing) sorunları:
  • Google Analytics izleme genellikle CORS sorunlarına neden olmaz, ancak eğer özel bir sunucu tarafı izleme (Measurement Protocol) kullanıyorsanız bu sorunlarla karşılaşabilirsiniz.

Sonuç

Vue.js SPA uygulamalarınıza Google Analytics entegrasyonu, kullanıcı davranışlarını anlamak ve uygulamanızın performansını optimize etmek için vazgeçilmez bir adımdır. Geleneksel web sitelerinden farklı olarak, SPA’ların dinamik yapısı nedeniyle sayfa görüntülemelerini ve olayları manuel olarak veya özel kütüphaneler aracılığıyla izlemek gereklidir. Bu makalede ele aldığımız adımları ve yöntemleri uygulayarak, uygulamanızdan değerli veriler toplayabilir, kullanıcı deneyimini iyileştirebilir ve iş hedeflerinize ulaşmak için bilinçli kararlar alabilirsiniz.

Unutmayın, entegrasyonun yalnızca başlangıç olduğunu. Topladığınız verileri düzenli olarak analiz etmek, raporları okumak ve bu içgörüleri uygulamanızda değişiklikler yapmak için kullanmak, Google Analytics’in gerçek gücünü ortaya çıkaracaktır. Ayrıca, kullanıcı gizliliğine her zaman öncelik verin ve ilgili tüm yasal düzenlemelere uyduğunuzdan emin olun. İyi analizler!