G\u00fcn\u00fcm\u00fcz\u00fcn modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve etkile\u015fimli bir yap\u0131 sunan Tek Sayfa Uygulamalar\u0131 (Single Page Application – SPA) mimarisiyle s\u0131kl\u0131kla geli\u015ftirilmektedir. Vue.js, bu t\u00fcr SPA’lar olu\u015fturmak i\u00e7in pop\u00fcler ve g\u00fc\u00e7l\u00fc bir JavaScript framework’\u00fcd\u00fcr. Ancak SPA’lar\u0131n dinamik yap\u0131s\u0131, geleneksel web sitelerinden farkl\u0131 olarak sayfa y\u00fcklemelerini i\u00e7ermedi\u011fi i\u00e7in, kullan\u0131c\u0131 davran\u0131\u015flar\u0131n\u0131 anlamak ve analiz etmek ad\u0131na \u00f6zel yakla\u015f\u0131mlar gerektirir. \u0130\u015fte bu noktada Google Analytics devreye girer. Google Analytics, web sitenizin ve mobil uygulamalar\u0131n\u0131z\u0131n performans\u0131n\u0131 \u00f6l\u00e7menize, kullan\u0131c\u0131 etkile\u015fimlerini takip etmenize ve de\u011ferli i\u00e7g\u00f6r\u00fcler elde etmenize olanak tan\u0131yan g\u00fc\u00e7l\u00fc bir web analiz hizmetidir. Bu makalede, Vue.js tabanl\u0131 SPA uygulamalar\u0131n\u0131za Google Analytics (\u00f6zellikle GA4) entegrasyonunu ad\u0131m ad\u0131m, kapsaml\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n
Geleneksel web sitelerinde, kullan\u0131c\u0131 bir sayfadan di\u011ferine ge\u00e7ti\u011finde taray\u0131c\u0131 tam bir sayfa y\u00fcklemesi yapar ve bu y\u00fckleme, Google Analytics taraf\u0131ndan otomatik olarak bir “sayfa g\u00f6r\u00fcnt\u00fcleme” (page view) olarak kaydedilir. Ancak SPA’larda, y\u00f6nlendirmeler (routing) genellikle taray\u0131c\u0131da JavaScript arac\u0131l\u0131\u011f\u0131yla ger\u00e7ekle\u015fir ve sayfan\u0131n tamam\u0131 yeniden y\u00fcklenmez; yaln\u0131zca i\u00e7eri\u011fin bir k\u0131sm\u0131 dinamik olarak g\u00fcncellenir. Bu durum, Google Analytics’in varsay\u0131lan izleme mekanizmas\u0131n\u0131 yan\u0131ltabilir ve sayfa g\u00f6r\u00fcnt\u00fclemelerinin veya kullan\u0131c\u0131 ak\u0131\u015f\u0131n\u0131n do\u011fru bir \u015fekilde raporlanmas\u0131n\u0131 engelleyebilir. Bu makale, bu zorluklar\u0131n \u00fcstesinden gelmek i\u00e7in gerekli teknik ad\u0131mlar\u0131, en iyi uygulamalar\u0131 ve farkl\u0131 entegrasyon y\u00f6ntemlerini ele alacakt\u0131r.<\/p>\n
Google Analytics, web sitelerinizin veya uygulamalar\u0131n\u0131z\u0131n trafik kaynaklar\u0131n\u0131, kullan\u0131c\u0131 davran\u0131\u015flar\u0131n\u0131 ve d\u00f6n\u00fc\u015f\u00fcmlerini anlaman\u0131za yard\u0131mc\u0131 olan bir dizi ara\u00e7 sunar. Son y\u0131llarda Google, Universal Analytics’in (UA) yerini alan ve daha olay tabanl\u0131 (event-driven) bir model benimseyen Google Analytics 4’\u00fc (GA4) piyasaya s\u00fcrd\u00fc. GA4, geleneksel sayfa g\u00f6r\u00fcnt\u00fclemelerinin yan\u0131 s\u0131ra, kullan\u0131c\u0131lar\u0131n uygulaman\u0131zla nas\u0131l etkile\u015fim kurdu\u011funu daha derinlemesine anlaman\u0131z\u0131 sa\u011flayan olaylara ve kullan\u0131c\u0131lara odaklan\u0131r. Bu makalede, modern yakla\u015f\u0131m ve gelece\u011fin standard\u0131 oldu\u011fu i\u00e7in GA4 entegrasyonuna a\u011f\u0131rl\u0131k verece\u011fiz.<\/p>\n
GA4’\u00fcn temel kavramlar\u0131 \u015funlard\u0131r:<\/p>\n
first_visit<\/code>, session_start<\/code>), geli\u015fmi\u015f \u00f6l\u00e7\u00fcm olaylar\u0131 (\u00f6rne\u011fin, scroll<\/code>, click<\/code>) ve \u00f6zel olaylar sunar.<\/li>\n- Parametreler (Parameters):<\/strong> Olaylarla birlikte g\u00f6nderilen ek bilgilerdir. \u00d6rne\u011fin, bir
add_to_cart<\/code> olay\u0131na item_id<\/code>, item_name<\/code>, price<\/code> gibi parametreler eklenebilir.<\/li>\n- Kullan\u0131c\u0131 \u00d6zellikleri (User Properties):<\/strong> Kullan\u0131c\u0131lar\u0131n demografik veya davran\u0131\u015fsal \u00f6zelliklerini tan\u0131mlayan niteliklerdir. \u00d6rne\u011fin,
user_id<\/code>, membership_level<\/code>.<\/li>\n<\/ul>\nGA4, verileri toplamak i\u00e7in genellikle gtag.js<\/code> k\u00fct\u00fcphanesini kullan\u0131r. Bu k\u00fct\u00fcphane, Google etiketlerini y\u00f6netmek i\u00e7in tek bir JavaScript kodu par\u00e7as\u0131 sunar ve Google Analytics, Google Ads gibi \u00e7e\u015fitli Google \u00fcr\u00fcnlerine veri g\u00f6ndermeyi kolayla\u015ft\u0131r\u0131r.<\/p>\nVue.js SPA’lar ve Google Analytics: \u00d6zel Durumlar<\/h3>\n
Vue.js SPA’lar\u0131nda Google Analytics entegrasyonu, \u00f6zellikle sayfa g\u00f6r\u00fcnt\u00fclemelerinin do\u011fru bir \u015fekilde izlenmesi konusunda baz\u0131 \u00f6zel dikkat gerektirir. Temel sorun, taray\u0131c\u0131n\u0131n tam bir sayfa y\u00fcklemesi yapmamas\u0131d\u0131r. Vue Router gibi istemci taraf\u0131 y\u00f6nlendirme k\u00fct\u00fcphaneleri, URL’yi de\u011fi\u015ftirir ancak taray\u0131c\u0131da yeni bir HTML belgesi talep etmez. Bu da Google Analytics’in varsay\u0131lan olarak yeni bir sayfa g\u00f6r\u00fcnt\u00fclemesi kaydetmesini engeller.<\/p>\n
Bu durumu a\u015fmak i\u00e7in, Vue Router’\u0131n y\u00f6nlendirme sonras\u0131 (afterEach<\/code>) kancalar\u0131n\u0131 kullanarak her URL de\u011fi\u015fikli\u011finde manuel olarak bir “sayfa g\u00f6r\u00fcnt\u00fcleme” olay\u0131 g\u00f6ndermemiz gerekir. Ayr\u0131ca, kullan\u0131c\u0131lar\u0131n buton t\u0131klamalar\u0131, form g\u00f6nderimleri, video oynatmalar\u0131 gibi etkile\u015fimlerini de \u00f6zel olaylar olarak izlemek, uygulaman\u0131z\u0131n ger\u00e7ek kullan\u0131m senaryolar\u0131n\u0131 anlamak i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n\u00d6n Haz\u0131rl\u0131k: Google Analytics Hesab\u0131 Olu\u015fturma ve Ayarlama<\/h3>\n
Entegrasyona ba\u015flamadan \u00f6nce bir Google Analytics 4 m\u00fclk\u00fcne ve bir web veri ak\u0131\u015f\u0131na ihtiyac\u0131n\u0131z var. \u0130\u015fte ad\u0131mlar:<\/p>\n