GA4 ile Google Etiket Yöneticisi Form İzleme: 7 yöntem

Pazarlamacılarla konuşurken aralarında en popüler konulardan birinin form takibi olduğunu fark ettim. Ne yazık ki, bazı durumlarda, form izleme gerçek bir baş belası olabilir (özellikle bir pazarlamacının CSS veya HTML’nin ne olduğu hakkında hiçbir fikri yoksa). Ancak korkmayın çünkü bu blog yazısında size 7 Google Etiket Yöneticisi form izleme tekniği göstereceğim.

Spoiler: Bazıları geliştiricinin girdisini gerektirecek, ancak her şeyi düz İngilizce olarak koymak için elimden gelenin en iyisini yapacağım.

Google Etiket Yöneticisi Form İzleme: Temel Bağlam

İNTERNET denen bu harika şeyde çeşitli biçimler var. Bazıları başarılı bir gönderimden sonra yenilenir, bazıları yenilemez, bazıları sizi bir “teşekkür ederim” sayfasına yönlendirebilir vb. Form izlemenin temel sorunu, formların nasıl olması gerektiğine dair küresel standartların olmamasıdır. gelişmiş. Bazı geliştiriciler bir teknolojiyi (örn. AJAX) diğerine tercih edebilir ve bunu yapmaya tam hakları vardır.

Form izleme ile ilgilendiğiniz için, Form Gönderme tetikleyicisini ve Google Etiket Yöneticisi’ndeki yerleşik Form değişkenlerini muhtemelen fark etmişsinizdir. Bir sayfada (tüm form gönderimlerini dinleyen) en az bir Form Gönderimi tetikleyicisi etkin olduğunda, Google Etiket Yöneticisi Form otomatik olay dinleyicisini açarsınız.

Form otomatik olay dinleyicisi, standart bir tarayıcı gönderme olayını dinler . Ancak, formların büyük bir çoğunluğu verilerini göndermek için başka yollar kullanır (örn. jQuery’s $.ajax), bu nedenle, gönderme olayının çalışması engellenir. Bu durumda, Google Etiket Yöneticisi hiçbir zaman form gönderimini kaydetmez . Ve bu oldukça yaygın bir sorundur (aslında, çalıştığım vakaların %99’unda farklı bir izleme yöntemi kullandığımı söyleyebilirim).

GTM’nin form dinleyicisi sizin durumunuzda çalışmıyorsa, hedefe nasıl ulaşabileceğinize dair başka alternatifler de var. Bu blog gönderisinde, Google Etiket Yöneticisi form takibi için hem standart seçenekleri hem de geçici çözümleri açıklayacağım.

Etiket + Tetik

Muhtemelen ana Google Etiket Yöneticisi konseptine zaten aşinasınızdır: izlemek istediğiniz her etkileşimin bir etikete ve bir tetikleyiciye ihtiyacı vardır. Tüm form gönderimlerini Google Analytics 4 ile izlemek istiyorsanız, bir etiketin tetiklenmesi gerektiğinde bir Google Analytics Etiketi ve bir Tetikleyici (kural) oluşturmanız gerekir.

Bir etiket oluşturmak, bu sürecin kolay kısmıdır. Hadi bir tane yapalım – bu blog yazısının gelecek bölümlerinde ihtiyacınız olacak.

Bu makalede, Google Analytics 4’ü zaten yüklediğinizi ve GA4 yapılandırma etiketine sahip olduğunuzu varsayıyorum. Değilse, önce bu blog gönderisini okuyun .

GTM kapsayıcınızda bir GA4 yapılandırma etiketine sahip olduktan sonra, bu makaledeki tüm örneklerde kullanılacak bir GA4 etkinlik etiketi oluşturmanın zamanı geldi.

Etiketlere git
Yeni düğmesine basın
Etiket Yapılandırmasında Google Analytics’i seçin: GA4 Etkinliği
Yapılandırma Etiketi alanında , geçerli GA4 yapılandırma etiketinizi seçin. Oluşturmakta olduğumuz etkinlik etiketi, yapılandırma etiketindeki bazı ayarları (örn. Ölçüm Kimliği) yeniden kullanacaktır.
Etkinlik Adı alanına, create_lead giriyorum
Tetikleme kısmını (şimdilik) boş bırakın ve Kaydet’e tıklayın . Daha sonra geri döneceğiz. Bu blog gönderisinin %80’i, yararlanabileceğiniz çeşitli tetikleyici türlerine ayrılmıştır. Tetikleme türü seçimi, bir formun geliştirilme biçimine bağlıdır.

Bazı seçenekleri hızlıca açıklayayım. Etkinlik adı olarak create_lead kullanmamın nedeni, GA4 Önerilen etkinlikler listesinde yer almasıdır . Ama istersen başka bir isim verebilirsin.

Ayrıca, bu blog gönderisinin sonraki bölümlerinde, bu etikete bazı ek parametreler eklemenizi önerebilirim, bu yüzden gözünüz üzerinde olsun.

======

Ele alacağım her form izleme yöntemi, form gönderildikten sonra bir web sitesinde meydana gelen farklı öğelere/olaylara bağlıdır:

Otomatik olay dinleyicisi oluştur
teşekkür sayfası
AJAX form takibi
Öğe Görünürlüğü tetikleyicisiyle izleme
Kendi form otomatik olay dinleyicinizi yazma
Geliştiricinin yardımı (dataLayer.push’u istemek için)
DOM kazıma
Yanlış yapılandırılmış bir tetikleyici, yanlış veri ve raporlara neden olur (yanlış içgörülere ve eylemlere yol açar). Bu yüzden her şeyi dikkatlice okuyun.

Herhangi bir sorunuz varsa veya bu blog gönderisinin bazı bölümleri yanıltıcıysa, aşağıdaki yorum bölümünde, Twitter veya LinkedIn’de bana bildirin. Yardımcı olmaktan memnuniyet duyarım.

Devam Etmeden Önce: Hazır Kılavuzlar
Şimdi, bu kılavuzu derinlemesine incelemeden önce bilmeniz gereken bir şey var. Bu kılavuzun tamamı evrenseldir ve uğraştığım/uğraşmak zorunda kaldığım form izleme vakalarının muhtemelen yaklaşık %95’ini kapsar.

Ancak, size biraz zaman kazandırmak için şunu sormak istiyorum: Contact Form 7, Caldera Forms veya Gravity Forms eklentilerini kullanıyor musunuz?

Cevabınız evet ise, o zaman size iyi haberlerim var. İşte bu popüler form eklentilerine göre uyarlanmış üç kılavuz (bazıları Universal Analytics (GA3) kullanıyor, dolayısıyla uyarlamanız gerekebilir):

Google Etiket Yöneticisi ile İletişim Formu 7 nasıl izlenir?
Google Etiket Yöneticisi ile Yerçekimi Formları nasıl izlenir?
Formunuz özelse veya başka bir teknoloji kullanılarak oluşturulmuşsa endişelenmeyin. Sonraki bölümlerde tüm ipuçlarını ele aldım.

Hangi Form Takip Yöntemini Seçmelisiniz?
Tetikleyiciler ve izleme teknikleri havuzuna dalmadan önce, bir formu incelememiz ve ihtiyaçlarımıza en uygun tekniğin hangisi olduğuna karar vermemiz gerekecek. Doğru Google Etiket Yöneticisi form izleme yöntemini seçmenize yardımcı olacak bir akış şeması hazırladım.

Bu planın bazı bölümlerinin belirsiz görünebileceğinden eminim. Okumaya devam edin, her şey çok daha netleşecek.

Yöntem 1. Google Etiket Yöneticisi Form Gönderimi Tetikleyici
Öncelikle, GTM’nin yerleşik form dinleyicisini deneyelim . Google Etiket Yöneticisi hesabınızda bir Değişkenler listesi açın. Form değişkenleri varsayılan olarak devre dışıdır, bu nedenle bunları etkinleştirmeniz gerekir. Yerleşik değişkenler altında , Yapılandır’ı tıklayın ve sağ kenar çubuğunda tüm Form değişkenlerini etkinleştirin (tüm değişiklikler otomatik olarak kaydedilir.

Ardından, tüm tetikleyicilerinizin bir listesini açın ( GTM arayüzünün sol kenar çubuğundaki Tetikleyiciler’e tıklayarak). Aşağıdaki ayarlarla yeni bir tetikleyici oluşturun:

Doğrulamayı kontrol et onay kutusu hakkında biraz . Bu işaretlendikten sonra, formun varsayılan eylemi (gönderme ve yeniden yönlendirme) engellenirse Google Etiket Yöneticisi Tetikleyiciyi etkinleştirmez.

İşaretlenmezse, bir gönderme olayı kaydedildiğinde Tetikleyici söner (bir form hatalı olarak gönderildiğinde bile (örneğin, birkaç gerekli alan boş bırakılmışsa)).

Bu onay kutusu etkinleştirildiğinde, “Bu tetikleyiciyi etkinleştir…” ek alanı görünür. Benim durumumda, bu tetikleyicinin tüm sayfalarda aktif olmasını istiyorum, bu yüzden Sayfa Yolu içeren / girdim . Neden? Çünkü Sayfa Yolu, herhangi bir sayfada her zaman en az bir eğik çizgi içerecektir.

Şimdi, varsayılan form otomatik olay dinleyicisinin bizim için çalışıp çalışmadığını öğrenmek için GTM’nin Önizleme ve Hata Ayıklama modunu kullanalım . Google Etiket Yöneticisi hesabınızın sağ üst köşesinde Önizleme ‘yi tıklayın .

Ardından, formun bulunduğu sayfanın URL’sini girmenizi isteyen yeni bir tarayıcı sekmesi açılır. Girin ve Başlat’a tıklayın.

Ardından web sitenizle birlikte yeni bir sekme (veya pencere) açılacaktır. Ekranın altında buna benzer bir rozet görmelisiniz (bağlandı yazıyor):

Önizleme modunun sekmesi veya rozet bağlanmadıysa, Google Etiket Yöneticisi Önizleme ve Hata Ayıklama modunu nasıl düzelteceğinizle ilgili bu kılavuzu okuyun .

Önizleme ve Hata Ayıklama modu etkinleştirildikten sonra formun bulunduğu siteye gidin. Formu doldurun (hiçbir alanı boş bırakmamaya çalışın):

Gönder düğmesine basın. Önizleme ve Hata Ayıklama konsolunda bir Form Gönderme olayı göründü mü? Değilse, GTM’nin Form otomatik olay dinleyicisi bu formla çalışmaz ve bu blog gönderisinde açıklanan bir sonraki form izleme seçeneğine atlamanız gerekir.

Ardından aşağı kaydırın ve o form için benzersiz olan herhangi bir Form değişkenini aramaya başlayın . Genellikle, diğer durumlarda Form Kimliği değişkeni olacaktır – Form Sınıfları (ancak Form Kimliği daha iyi bir seçenektir). Aşağıdaki resimde görebileceğiniz gibi, bir form gönderdim (Form ID değişkeni wpdevart-forms-7 ).

Bu, web sitesindeki diğer öğelerde kullanılmayan iyi bir tanımlayıcıdır, bu yüzden onu tetikleyicim için kullanacağım:

Tetikleyicilere gidin ve daha önce oluşturduğunuz Form Gönderimi tetikleyicisini açın
“Tüm Formlar” yerine “Bazı Formlar”ı seçin ve yalnızca söz konusu formu hedeflemek için koşulu girin. Benim durumumda bu, Form Kimliği eşittir wpdevarp-forms-7 .
Form Kimliği değişkenini görmüyorsanız – Google Etiket Yöneticisi’nin Yerleşik değişkenleri listesinde etkinleştirin.
Sizin durumunuzda Form Kimliği farklı olabilir (ve muhtemelen olacaktır) (benim örneğime kıyasla).

Tetikleyiciyi kaydedin.

Ziyaretçilerin/kullanıcıların gönderebileceği birden fazla formunuz varsa, GA4 etkinlik etiketinize ek bir parametre eklemek mantıklı olabilir (bu, hangi formun gönderildiğini ayırt etmenize yardımcı olur).

GTM’de Etiketler’e gidin ve oluşturduğunuz GA4 etkinlik etiketini düzenleyin.

Bu parametrenin nasıl adlandırılması gerektiğine dair kesin bir gereklilik yoktur, bu yüzden onu form_id olarak adlandıracağım. Ve değeri, {{Form Kimliği}} değişkeninin değeri olacaktır.

Etiketi kaydedin.

Haydi Test Edelim + Özel Boyutu GA4’te Kaydetelim
Bu yeni tetikleyiciyi, bu blog gönderisinin başında oluşturduğunuz Google Analytics 4 Etkinlik Etiketine atayın.
Bir Önizleme ve Hata Ayıklama modunu yenileyin (GTM arayüzündeki Önizleme düğmesine bir kez daha tıklayarak)
Ardından formu doldurun ve gönderin. Google Analytics Etiketi tetiklendiyse bu iyi bir haber! Ayrıca (mümkünse), web sitenizde farklı bir form göndermeyi deneyin: Başarılı bir gönderim durumunda GA etiketi tetiklenmemelidir.
Google Analytics 4 Debug View’da gelen olayları da kontrol etmelisiniz .
Form_id’yi (veya GA4 raporlarında başka bir özel parametreyi) kullanmayı planlıyorsanız , bunları özel boyutlar olarak kaydetmeniz gerekir. Daha fazla bilgi edinmek için bu kılavuzu okuyun .

Yöntem #2. Google Etiket Yöneticisi ile “Teşekkürler” Sayfa Takibi
Google Etiket Yöneticisi’ndeki standart form dinleyicisi çalışmıyorsa, bu formun kullanıcıyı başarılı bir şekilde gönderdikten sonra başka bir sayfaya yönlendirip yönlendirmediğini kontrol etmelisiniz.

Evet ise, hangi URL’ye (web adresine) yönlendiriyor?
başarı URL’si oluştur
Bu adres benzersiz mi?
Evet ise, kullanıcılar gerçekten bir form göndermeden o sayfaya gidebilir mi? Son sorunun yanıtı hayır ise , yalnızca o başarılı sayfada tetiklenen bir sayfa görüntüleme tetikleyicisi oluşturabilirsiniz . Buradaki amacınız, başarıya (“Teşekkürler” sayfası olarak da bilinir) yanlışlıkla yapılan ziyaretlerden mümkün olduğunca kaçınmaktır.
Şimdi sadece “Teşekkürler” sayfasında tetiklenen bir tetikleyici oluşturalım .

Google Etiket Yöneticisi’nde Tetikleyicilere gidin
Yeni düğmesine basın
Tetikleyici türünü seçin – Sayfa Görüntüleme ve Bazı sayfa görünümleri
Ziyaretçi https://www.example.com/form/thankyou.html adresine yönlendirilirse, bu tetikleyici için aşağıdaki kurallardan birini ayarlayabilirsiniz:
Sayfa Yolu eşittir /form/thankyou.html .
veya Sayfa URL’si /form/thankyou.html içeriyor . Mümkün olduğunca spesifik olmaya çalışın. Bu tetikleyici için bir kural olarak yalnızca ” teşekkür ederim ” ayarlamak en iyi fikir olmayabilir çünkü URL’lerinin bu kelimeyi içerebileceği başka sayfalar olabilir (ve biz bunu istemiyoruz!).
Tetikleyiciyi uygun şekilde adlandırmayı da unutmayın, örneğin “Sayfa Görüntüleme – Başarılı Form Gönderimi”. Bir başlık net olmalıdır. Aksi takdirde, Google Etiket Yöneticisi hesabınızda (uzun vadede) bir karmaşa yaşarsınız. Adlandırma ipuçları (aka Adlandırma Kuralları) hakkında daha fazla bilgiyi buradan edinebilirsiniz.

GA4’te + Boyutları Test Edelim
Bu yeni tetikleyiciyi, bu blog gönderisinin başında oluşturduğunuz Google Analytics 4 Etiketine atayın.
Bir Önizleme ve Hata Ayıklama modunu açın (veya yenileyin) ve izlemek istediğiniz bir formla bir web sayfasını yenileyin.
Ardından formu doldurun ve gönderin. Başarılı gönderimden sonra, bir “Teşekkür ederiz” sayfasına yönlendirileceksiniz – Google Analytics Etiketi tetiklendiyse, aferin! Ayrıca (mümkünse), web sitenizde farklı bir form göndermeyi deneyin (etiketin yanlışlıkla tetiklenip tetiklenmediğini görmek için).
Ayrıca Google Analytics 4 Hata Ayıklama Görünümü ‘nü de kontrol etmelisiniz .
Birden çok formunuz varsa ve hepsinin farklı teşekkür sayfaları varsa, GA4 etkinlik etiketine herhangi bir özel parametre ayarlamanız gerekmez. GA4 zaten page_location’ı otomatik olarak izler ve form gönderimlerini Sayfa Yolu gibi bir boyutla ayırt edebilirsiniz .
Öte yandan, birden çok formunuz ve bir “Teşekkürler” sayfanız varsa, bunu yapmanız gerekir:
Tüm bu ipuçlarını kontrol edin ve bazı form tanımlayıcıları (örneğin, form kimliği, form adı vb.) içeren bir değişken alıp alamayacağınıza bakın ve onu bir sonraki liste öğesinde kullanın.
Ardından, GA4 create_lead etkinlik etiketine ek bir parametre ekleyin. form_id, form_name veya işinize yarayan herhangi bir şey olabilir , örneğin:

Yöntem #3. AJAX Form Gönderimlerini Google Etiket Yöneticisi ile Takip Edin
Bu bölümü okuyorsanız, formunuz muhtemelen geçerli form gönderme etkinlikleri göndermiyor ve kullanıcıları bir “teşekkür ederim” sayfasına yönlendirmiyor . Muhtemelen kendini yeniler ve ardından gerçek sayfa yenilemesi olmadan “Formu başarıyla doldurdunuz” mesajını görüntüler.

Bu formun AJAX kullanıyor olma ihtimali büyük. Buradaki tüm teknik detayları atlamanızı öneririm. Burada bilmeniz gereken tek şey AJAX dinleyicisidir.

Bounteous , herkesin ücretsiz olarak kullanabileceği harika bir GTM AJAX dinleyicisi paylaştı . Burada, form gönderimlerini izlemek için kodlarını ödünç alacağız. Aşağıdaki kodu kopyalayın ve Google Etiket Yöneticisi’ndeki Özel HTML etiketine yapıştırın:

Bu Özel HTML etiketini tüm sayfalarda tetiklenecek şekilde ayarlayın.

Şimdi bir formun AJAX üzerinde yapılıp yapılmadığını kontrol edelim:

Önizleme ve Hata Ayıklama modunu etkinleştirin (veya yenileyin) .
Formu web sitenizde göndermeyi deneyin (hatasız).
ajaxComplete olayı Önizleme ve hata ayıklama konsolunda göründü mü ?
Evet ise, form AJAX kullanır.
Değilse, bu blog yazısının bir sonraki bölümüne atlayın.
Önceki sorulara cevabınız Evet ise o AJAX formu ile neler yapabileceğimize bir göz atalım. Önizleme ve Hata Ayıklama modunda ajaxComplete olayını tıklayın , ardından API çağrısını genişletin:

Geliştirici olmayan biri için zor görünüyor, değil mi? Ama düşündüğünden daha kolay.

Bu veriler, formun başarıyla gönderilmesinden sonra veri katmanına geçirildi. Her satır, GTM'de dataLayer değişkeni olarak kullanılabilen ayrı bir dataLayer veri noktasıdır.

Şimdi, başarılı form gönderimlerini belirlemenize yardımcı olacak bir şey aramalısınız. Aşağı kaydırın ve "yanıt" arayın.