Cara Menjejak Penghantaran Borang Elementor dalam Acara Analitis Google menggunakan JQuery

Saya telah mengusahakan laman WordPress pelanggan selama beberapa minggu terakhir yang mempunyai beberapa kerumitan. Mereka menggunakan WordPress dengan penyatuan ke ActiveCampaign untuk memupuk petunjuk dan a Zapier penyatuan ke Jual Zendesk melalui Bentuk Elemen. Ini adalah sistem yang hebat ... melancarkan kempen menetes kepada orang yang meminta maklumat dan mendorong wakil penjualan yang sesuai apabila diminta. Saya sangat kagum dengan kelenturan dan penampilan dan penampilan Elementor.

Langkah terakhir adalah menyediakan dashboard analitik untuk pelanggan melalui Google Analytics yang memberikan mereka prestasi bulan ke bulan pada pengiriman borang. Mereka telah memasang Google Tag Manager, jadi kami sudah menangkap transaksi e-dagang dan aktiviti melihat YouTube di laman web ini.

Saya melakukan beberapa percubaan untuk menggunakan DOM, pencetus, dan peristiwa dalam Google Tag Manager untuk menangkap penyerahan borang yang berjaya untuk Elementor tetapi sama sekali tidak beruntung. Saya menguji banyak cara untuk memantau halaman, melihat mesej kejayaan yang muncul melalui AJAX dan ia tidak berfungsi. Oleh itu ... saya membuat carian dan menemui penyelesaian hebat dari Tracking Chef, yang dipanggil Penjejakan bentuk Elementor Peluru dengan GTM.

Skrip menggunakan jQuery dan Google Tag Manager untuk menekan Acara Analitis Google semasa borang berjaya dihantar. Dengan beberapa pengeditan kecil dan satu peningkatan sintaks, saya mempunyai semua yang saya perlukan. Inilah kodnya:

<script>
jQuery(document).ready(function($) {
    $(document).on('submit_success', function(evt) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
            'event': 'ga_event',
            'eventCategory': 'Form ',
            'eventAction': evt.target.name,
            'eventLabel': 'Submission'
        });
    });
});
</script>

Cukup bijak, memerhatikan penyerahan yang berjaya, lalu lulus Borang sebagai kategori, yang nama destinasi sebagai Tindakan, dan Penyerahan sebagai label. Dengan membuat sasaran terprogram, Anda hanya dapat memasukkan kod ini di footer setiap halaman untuk melihat pengiriman formulir. Oleh itu ... semasa anda menambah atau mengubah bentuk, anda tidak perlu risau untuk mengemas kini skrip atau menambahkannya ke halaman lain.

Pasang Skrip Melalui Elementor Custom Code

Sekiranya anda agensi, saya sangat mengesyorkan peningkatan tanpa had dan menggunakan Elementor untuk semua pelanggan anda. Ini adalah platform yang kukuh dan bilangan integrasi rakan kongsi terus melambung tinggi. Pasangkan dengan Plugin seperti Borang Hubungan DB dan anda juga dapat mengumpulkan semua penghantaran borang anda.

Elementor Pro mempunyai pilihan pengurusan skrip yang hebat. Inilah caranya anda memasukkan kod anda:

• Navigasi ke Elementor> Kod Tersuai
• Namakan kod anda
• Tetapkan lokasi, dalam kes ini akhirnya tanda badan.
• Tetapkan keutamaan jika anda mempunyai lebih daripada satu skrip yang ingin anda masukkan dan tetapkan urutannya.

• Klik kemas kini
• Anda akan diminta untuk menetapkan syarat dan menetapkannya ke lalai semua halaman.
• Segarkan cache anda dan skrip anda disiarkan secara langsung!

Pratonton Integrasi Pengurus Teg Google Anda

Pengurus Tag Google mempunyai mekanisme hebat untuk menyambung ke contoh penyemak imbas dan benar-benar menguji kod anda untuk melihat sama ada pemboleh ubah dihantar dengan betul atau tidak. Ini penting kerana Analitis Google tidak dalam masa nyata. Anda boleh menguji dan menguji dan benar-benar kecewa kerana data tidak muncul di Google Analitis jika anda tidak menyedari ini.

Saya tidak akan memberikan tutorial di sini mengenai bagaimana caranya pratonton dan nyahpepijat Pengurus Teg Google... Saya akan menganggap anda tahu. Saya boleh menghantar borang saya di halaman ujian yang disambungkan dan melihat data yang dimasukkan ke data GTM sebagaimana mestinya:

Dalam kes ini, kategori tersebut dikodekan dengan ketat sebagai Form, sasarannya adalah form Contact Us, dan labelnya adalah Submission.

Di Google Tag Manager Sediakan Pemboleh ubah Data, Peristiwa, Pencetus, dan Tag

Langkah terakhir mengenai hal ini adalah menyiapkan Google Tag Manager untuk menangkap pemboleh ubah tersebut dan mengirimnya ke Google Analytics Tag yang disiapkan untuk suatu acara. Elad Levy memperincikan langkah-langkah ini dalam catatannya yang lain - Penjejakan Peristiwa Umum Di Google Tag Manager.

Setelah semuanya disiapkan, anda akan dapat melihat Acara di Analitis Google!

Dapatkan Elementor Pro

Pendedahan: Saya menggunakan pautan afiliasi saya sepanjang artikel ini.