UTM & ClickID Takibi: Parametreleri Tarayıcıda Saklama Rehberi

#marketing#analytics#javascript#tracking#web development

Dijital pazarlama ve performans analizinde, UTM parametreleri ve tıklama id'leri (Click ID) gibi izleme parametreleri web sitesi ziyaretçilerini daha iyi anlamak için kritik bir rol oynuyor. Bu yazıda ziyaretçilerin ilk ziyaretinde adres çubuğunda görünen parametreleri nasıl saklayabileceğimize ve sonrasında kullanabileceğimize değineceğim. Script'in tamamını makale sonunda paylaşacağım fakat önerim, yapay zekadan da destek alıp kendi kodunuzu yazdırmanız. Ufak tefek detaylar gözden kaçabilir fakat bu şekilde mantığını kavramanız da kolaylaşır.

Kodun Amacı Nedir?

Bu script’in ana amacı, ziyaretçilerin ilk ziyaret sırasında URL ile getirdiği izleme parametrelerini (örneğin: utm_source, utm_medium, gclid, fbclid gibi) yakalamak ve bunları yerel depolama (localStorage) ile oturum depolama (sessionStorage) içerisinde saklamaktır. Böylece, kullanıcı sitenizde gezinirken bu veriler kaybolmaz ve gerektiğinde kullanabilirsiniz. Aksi taktirde ilk sayfa ziyaretinde adres çubuğunda beliren takip parametreleri bir sonraki sayfa ziyaretinde kırılacaktır.

Script Nasıl Çalışır?

1. Hangi parametreleri takip etmek istediğimizi tanımlıyoruz.

Kodun başında bir dizi parametre tanımlıyorsunuz:

1const TRACKED_PARAMS = [
2  'utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'gclid', 'fbclid'
3];

Biz burada birincil önemdeki utm parametrelerini ve en sık kullanılan iki platforma ait reklam tıklama id'lerini tercih ettik. Siz istediğiniz kadar parametre dahil edebilirsiniz. URL içerisindeki sorguların hangilerini toplamak istediğiniz sizin elinizde. Reklam kampanyanıza adgroup=generic diye bir parametre eklediğiniz varsayalım. Yukarıdaki alana 'adgroup' eklediğinizde bu sorguya karşılık gelen değeri de depolamış olursunuz.

gclid = Google Click ID fbclid = Facebook Click ID

2. Parametreleri Yakala

Kullanıcı siteye bir linkten geldiğinde, script URL’de bu parametreleri arar ve bulduklarını bir nesnede topluyor. Daha sonrasında iki farklı şekilde depolayabilir, ayrı kaynakları takip edebiliriz.

3. Local Storage ile 30 Gün Boyunca Sakla

İlk ziyaret sırasında, bu parametreler localStorage’da 30 gün boyunca saklanır. Yani, kullanıcı siteye bir kampanya linkiyle girdiğinde, bu bilgi kaybolmaz. 30 gün sonra ise otomatik olarak temizlenir. Burada 30 gün sınırını kaldırmamız durumunda kullanıcı tarayıcı verilerini temizleyene kadar bu parametreler tarayıcıda tutulur, fakat çoğu reklam platformunun ilişkilendirme aralığı 28-30 gün olduğu için bu sürede tutmak faydalı.

Paylaşmış olduğum script'te aşağıdaki satır üzerinde güncelleme yaparak yerel depolamada saklanacağı süreyi belirleyebilirsiniz.

1const EXPIRY_DAYS = 30; // Saklama süresini gün cinsinden buraya giriyorsunuz.
2const LS_EXPIRY_MS = EXPIRY_DAYS * 24 * 60 * 60 * 1000;
3// Totalde salise cinsinden hesaplanır. 2. satırda bir işlem yapmayın.

4. Session Storage ile Oturum Boyunca Sakla

Ayrıca, parametreler sessionStorage’a da yazılır. Bu sayede kullanıcı sekmeyi kapatana kadar parametreler kolayca erişilebilir olur. Her yeni oturumda ilk bulunan parametreler tekrar saklanır. Burada özel bir takım takip sistemi kurarak ilk oturum ve son oturum kıyası yapabilirsiniz.

5. JavaScript ile Kolayca Erişim

İsterseniz, window.trackingParams ile yakalanan parametrelere başka scriptlerden de erişebilirsiniz.

1console.log(window.trackingParams);

Bu Script’i Nerelerde Kullanabilirsiniz?

Formlarda ön doldurma: Kayıt veya iletişim formlarında, kullanıcıya ait kampanya bilgisini otomatik olarak doldurabilirsiniz. Yakında buna dair bir makale paylaşacağım.
Analytics entegrasyonu: Google Analytics, Facebook Pixel gibi araçlara kendi izleme parametrelerinizi göndermek için kullanabilirsiniz.
Kişiselleştirilmiş içerik: Kullanıcının geldiği trafik kaynağı veya kampanya parametrelerine göre web sitenizde kişiselleştirilmiş içerikler gösterebilirsiniz. A/B testing, kişiselleştirme ve CRO (Conversion Rate Optimization) araçları sayesinde, her ziyaretçiye özel mesajlar ve kampanya teklifleri sunmak mümkündür. Bu sayede kullanıcı deneyimini geliştirip dönüşüm oranlarınızı artırabilirsiniz.

<body>...</body> içerisine ekleyeceğiniz kodun tamamı:

1<script>
2(function trackUrlParams() {
3    const TRACKED_PARAMS = [
4        'utm_source',
5        'utm_medium',
6        'utm_campaign',
7        'utm_term',
8        'utm_content',
9        'gclid',
10        'fbclid'
11    ];
12    const searchParams = new URLSearchParams(window.location.search);
13    let foundParams = {};
14    for (const key of TRACKED_PARAMS) {
15        if (searchParams.has(key)) {
16            foundParams[key] = searchParams.get(key);
17        }
18    }
19    const LS_KEY = 'trackingParams';
20    const LS_EXP_KEY = 'trackingParams_expiry';
21    const now = Date.now();
22    const EXPIRY_DAYS = 30; // Saklama süresi (gün)
23    const LS_EXPIRY_MS = EXPIRY_DAYS * 24 * 60 * 60 * 1000;
24    if (Object.keys(foundParams).length > 0) {
25        if (!localStorage.getItem(LS_KEY) || Number(localStorage.getItem(LS_EXP_KEY)) < now) {
26            localStorage.setItem(LS_KEY, JSON.stringify(foundParams));
27            localStorage.setItem(LS_EXP_KEY, now + LS_EXPIRY_MS);
28        }
29    } else {
30        const exp = Number(localStorage.getItem(LS_EXP_KEY));
31        if (exp && exp < now) {
32            localStorage.removeItem(LS_KEY);
33            localStorage.removeItem(LS_EXP_KEY);
34        }
35    }
36    if (Object.keys(foundParams).length > 0) {
37        sessionStorage.setItem(LS_KEY, JSON.stringify(foundParams));
38    } else {
39        sessionStorage.removeItem(LS_KEY);
40    }
41    window.trackingParams = foundParams;
42})();
43</script>

Google Tag Manager'da kullanabileceğiniz Custom HTML kodu:

1<script>
2(function trackUrlParams() {
3    var TRACKED_PARAMS = [
4        'utm_source',
5        'utm_medium',
6        'utm_campaign',
7        'utm_term',
8        'utm_content',
9        'gclid',
10        'fbclid'
11    ];
12    // URLSearchParams yerine klasik yöntem:
13    function getQueryParams() {
14        var params = {};
15        var query = window.location.search.substring(1);
16        var pairs = query.split('&');
17        for (var i = 0; i < pairs.length; i++) {
18            var pair = pairs[i].split('=');
19            if (pair[0]) {
20                params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
21            }
22        }
23        return params;
24    }
25    var searchParams = getQueryParams();
26    var foundParams = {};
27    for (var i = 0; i < TRACKED_PARAMS.length; i++) {
28        var key = TRACKED_PARAMS[i];
29        if (searchParams.hasOwnProperty(key)) {
30            foundParams[key] = searchParams[key];
31        }
32    }
33    var LS_KEY = 'trackingParams';
34    var LS_EXP_KEY = 'trackingParams_expiry';
35    var now = (new Date()).getTime();
36    var EXPIRY_DAYS = 30; // Saklama süresi (gün)
37    var LS_EXP_KEY = 'trackingParams_expiry';
38    var now = (new Date()).getTime();
39    var EXPIRY_DAYS = 30; // Saklama süresi (gün)
40    var LS_EXPIRY_MS = EXPIRY_DAYS * 24 * 60 * 60 * 1000;
41    if (Object.keys(foundParams).length > 0) {
42        if (!localStorage.getItem(LS_KEY) || Number(localStorage.getItem(LS_EXP_KEY)) < now) {
43            localStorage.setItem(LS_KEY, JSON.stringify(foundParams));
44            localStorage.setItem(LS_EXP_KEY, now + LS_EXPIRY_MS);
45        }
46    } else {
47        var exp = Number(localStorage.getItem(LS_EXP_KEY));
48        if (exp && exp < now) {
49            localStorage.removeItem(LS_KEY);
50            localStorage.removeItem(LS_EXP_KEY);
51        }
52    }
53    if (Object.keys(foundParams).length > 0) {
54        sessionStorage.setItem(LS_KEY, JSON.stringify(foundParams));
55    } else {
56        sessionStorage.removeItem(LS_KEY);
57    }
58    window.trackingParams = foundParams;
59})();
60</script>

Bir sonraki makalede görüşmek üzere.