- Konu sahibi
- #1
GA4’te form gönderimini gerçek başarıyla eşleştirmenin doğru yolu, kullanıcı düğmeye bastığında değil, sunucu form verisini başarıyla işleyip uygulamanın bunu doğruladığında olay göndermektir. Böylece boş alan, doğrulama hatası, ağ kesintisi veya sunucu hatasıyla sonuçlanan denemeler dönüşüm olarak sayılmaz.
Form gönderimi iki farklı durumu temsil edebilir:
En güvenilir akış şöyledir: form tarayıcıdan sunucuya gönderilir, sunucu başarılı ya da başarısız bir yanıt döner, istemci yalnızca başarılı yanıtta
Aşağıdaki örnekte sunucunun başarılı işlemden sonra
Sunucu başarıyı doğruladığında kullanıcıya başarı mesajı gösterilir. Ölçüm izni ve etiket de uygunsa GA4 olayı ayrıca gönderilir; GA4 engellendiğinde veya çağrı hata verdiğinde başarılı başvuru “başarısız” diye gösterilmez.
Doğrudan
GTM’de bu özel olay adına göre tetikleyici oluşturun ve GA4 etkinlik etiketinde etkinlik adını
Aşağıdaki ayrım hangi sinyalin kullanılacağını netleştirir:
Ağ yanıtı kaybolduğunda sunucu kaydı gerçekten oluşturmuş olabilir. Otomatik yeniden denemeyi gerçek yeni işlemle karıştırmayın; tekrar güvenliğini sunucuda bir işlem/idempotency anahtarıyla çözün. Örnekteki busy yalnız aynı sayfada eşzamanlı tıklamayı azaltır, yenileme veya başka sekmedeki yeniden gönderimi tekilleştirmez. E-posta ve mesaj gibi form içeriğini GA4 olay parametrelerine göndermeyin.
Gönderme düğmesine tıklanınca olay göndermek en yaygın hatadır; kullanıcı sunucu hatası alsa bile başarılı gönderim görünür. Teşekkürler sayfası her yenilendiğinde olay göndermek de aynı gönderimin birden fazla sayılmasına yol açabilir. Bu yöntemi kullanıyorsanız yönlendirmeyi yalnızca sunucu başarısından sonra yapın ve yenileme davranışını ayrıca test edin.
Başka bir hata, istemciye dönen her
Temel mantık
Form gönderimi iki farklı durumu temsil edebilir:
- Kullanıcı gönderme düğmesine bastı.
- Sunucu formu kabul etti ve beklenen işlemi tamamladı.
En güvenilir akış şöyledir: form tarayıcıdan sunucuya gönderilir, sunucu başarılı ya da başarısız bir yanıt döner, istemci yalnızca başarılı yanıtta
form_submit_success olayını oluşturur ve GA4 bu olayı alır.Çalışan en küçük örnek
Aşağıdaki örnekte sunucunun başarılı işlemden sonra
{"success":true} döndürdüğü varsayılmıştır. /api/contact yerine kendi form uç noktanızı kullanın. Bu yalnız istemci tarafı örneğidir; sunucu uç noktasını, girdi/yetki ve gerekiyorsa CSRF doğrulamasını kendi uygulamanızda tamamlamalısınız. GA4 olayı için Google etiketi ayrıca kurulmuş olmalıdır; analiz engellense bile formun gerçek başarısı korunmalıdır.
HTML:
<form id="contact-form">
<label for="contact-email">E-posta</label>
<input id="contact-email" name="email" type="email" required>
<label for="contact-message">Mesaj</label>
<textarea id="contact-message" name="message" required></textarea>
<button type="submit">Gönder</button>
<p id="form-result" aria-live="polite"></p>
</form>
<script>
const form = document.querySelector('#contact-form');
const result = document.querySelector('#form-result');
const button = form.querySelector('button[type="submit"]');
let busy = false;
form.addEventListener('submit', async (event) => {
event.preventDefault();
if (busy) return;
busy = true;
button.disabled = true;
let accepted = false;
result.textContent = 'Gönderiliyor...';
try {
const response = await fetch('/api/contact', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(Object.fromEntries(new FormData(form)))
});
const data = await response.json();
if (!response.ok || data.success !== true) {
result.textContent = 'Başvuru kabul edilmedi. Alanları kontrol edin.';
return;
}
accepted = true;
result.textContent = 'Form başarıyla gönderildi.';
} catch (error) {
result.textContent = 'İşlem sonucu doğrulanamadı. Tekrar göndermeden önce kayıt durumunu kontrol edin.';
} finally {
busy = false;
button.disabled = false;
}
if (accepted) {
try {
if (typeof window.gtag === 'function') {
window.gtag('event', 'form_submit_success', {form_name: 'contact'});
}
} catch (error) {
console.warn('Ölçüm gönderilemedi; form işlemi başarılı kaldı.');
}
}
});
</script>Sunucu başarıyı doğruladığında kullanıcıya başarı mesajı gösterilir. Ölçüm izni ve etiket de uygunsa GA4 olayı ayrıca gönderilir; GA4 engellendiğinde veya çağrı hata verdiğinde başarılı başvuru “başarısız” diye gösterilmez.
response.ok başarısızsa veya sunucu success: true döndürmüyorsa olay gönderilmez. Bu ayrım, düğme tıklaması ile gerçek işlem sonucunu birbirinden ayırır.GA4 ve GTM kullanıyorsanız
Doğrudan
gtag çağırmak yerine Google Tag Manager kullanıyorsanız aynı başarı noktasında dataLayer’a özel olay gönderin:
Kod:
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
event: 'form_submit_success',
form_name: 'contact'
});GTM’de bu özel olay adına göre tetikleyici oluşturun ve GA4 etkinlik etiketinde etkinlik adını
form_submit_success olarak kullanın. Formun yalnızca başarı yanıtından sonra bu kodu çalıştırdığını kontrol edin.Aşağıdaki ayrım hangi sinyalin kullanılacağını netleştirir:
| Sinyal | Ne gösterir? | Başarı olayı için uygunluk |
|---|---|---|
| Gönderme düğmesi tıklaması | Kullanıcının denemeyi başlattığını | Uygun değil |
| İstemci doğrulaması | Alanların tarayıcıda geçerli göründüğünü | Tek başına uygun değil |
| Sunucu başarı yanıtı | İşlemin uygulama tarafından kabul edildiğini | Önerilen sinyal |
| Teşekkürler sayfası | Başarılı yönlendirmeye ulaşıldığını | Sunucu sonucu güvenilir biçimde bağlıysa uygun |
Ağ yanıtı kaybolduğunda sunucu kaydı gerçekten oluşturmuş olabilir. Otomatik yeniden denemeyi gerçek yeni işlemle karıştırmayın; tekrar güvenliğini sunucuda bir işlem/idempotency anahtarıyla çözün. Örnekteki busy yalnız aynı sayfada eşzamanlı tıklamayı azaltır, yenileme veya başka sekmedeki yeniden gönderimi tekilleştirmez. E-posta ve mesaj gibi form içeriğini GA4 olay parametrelerine göndermeyin.
Uygulama ve kontrol adımları
- Formun gerçek başarı ölçütünü belirleyin: kayıt oluşturma, talep numarası üretme veya sunucunun işlemi kabul etmesi gibi.
- Sunucunun başarılı ve başarısız durumları ayıran kararlı bir yanıt döndürmesini sağlayın. Başarı için örnekteki gibi açık bir alan kullanın; yalnızca HTTP yanıtının varlığına güvenmeyin.
- GA4 olayını yalnızca başarılı yanıtın işlendiği kod bloğuna yerleştirin. Tıklama, submit başlangıcı veya hata bloğuna koymayın.
- GA4 gerçek zamanlı raporunda test gönderimi sırasında olayın oluştuğunu kontrol edin. Başarısız bir form denemesinde olay oluşuyorsa tetikleyici yanlış yerdedir.
- Olayı iş hedefi olarak kullanacaksanız, GA4 yönetimindeki etkinlik yapılandırmasında ilgili olayı anahtar etkinlik olarak işaretleyin. Önce olay adının doğru ve tek biçimde geldiğini doğrulayın.
Sık yapılan hatalar
Gönderme düğmesine tıklanınca olay göndermek en yaygın hatadır; kullanıcı sunucu hatası alsa bile başarılı gönderim görünür. Teşekkürler sayfası her yenilendiğinde olay göndermek de aynı gönderimin birden fazla sayılmasına yol açabilir. Bu yöntemi kullanıyorsanız yönlendirmeyi yalnızca sunucu başarısından sonra yapın ve yenileme davranışını ayrıca test edin.
Başka bir hata, istemciye dönen her
200 yanıtını başarı kabul etmektir. Uygulama hatayı HTTP düzeyinde değil, yanıt gövdesindeki bir alanla belirtiyorsa success gibi açık sonucu kontrol edin. Ayrıca özel olay adını tıklama ve standart form olaylarıyla karıştırmayın; raporlarda hangi olayın gerçek başarıyı temsil ettiğini açıkça ayırın.