كيفية تتبع عمليات إرسال نموذج Elementor في أحداث Google Analytics باستخدام JQuery

لقد كنت أعمل على موقع WordPress للعميل خلال الأسابيع القليلة الماضية به بعض التعقيدات. هم يستعملون WordPress مع تكامل ActiveCampaign لرعاية العملاء المحتملين و أ Zapier التكامل ل بيع Zendesk بواسطة أشكال العنصر. إنه نظام رائع ... إطلاق حملات التنقيط للأشخاص الذين يطلبون معلومات ودفع زمام المبادرة إلى مندوب المبيعات المناسب عند الطلب. أنا معجب حقًا بمرونة وشكل وإحساس Elementor.

كانت الخطوة الأخيرة هي توفير لوحة معلومات تحليلية للعميل عبر Google Analytics والتي زودتهم بأداء شهر بعد شهر في عمليات إرسال النماذج. لقد تم تثبيت Google Tag Manager ، لذلك نحن بالفعل نلتقط معاملات التجارة الإلكترونية ونشاط عرض YouTube على الموقع.

لقد بذلت عدة محاولات لاستخدام DOM والمشغلات والأحداث داخل Google Tag Manager لالتقاط إرسال النموذج الناجح لـ Elementor ولكن لم يحالفني الحظ على الإطلاق. لقد اختبرت العديد من الطرق المختلفة لمراقبة الصفحة ، ومشاهدة رسالة النجاح التي ستظهر عبر AJAX ولم تكن تعمل. لذا ... قمت ببعض البحث ووجدت حلاً رائعًا من Tracking Chef ، يُدعى تتبع شكل العنصر المضاد للرصاص باستخدام GTM.

يستخدم البرنامج النصي مسج و Google Tag Manager لدفع حدث Google Analytics عندما يتم إرسال النموذج بنجاح. مع بعض التعديلات الطفيفة وتحسين بناء الجملة ، كان لدي كل ما أحتاجه. ها هو الكود:

<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>

إنه أمر عبقري للغاية ، أن تراقب التقديم الناجح ، ثم يمر شكل كفئة اسم الوجهة مثل الإجراء ، و تسجيل كتسمية. من خلال جعل الهدف برمجيًا ، يمكنك ببساطة وضع هذا الرمز في تذييل كل صفحة لمراقبة إرسال النموذج. لذلك ... عند إضافة النماذج أو تعديلها ، لا داعي للقلق بشأن تحديث البرنامج النصي أو إضافته إلى صفحة أخرى.

قم بتثبيت البرنامج النصي عن طريق Elementor Custom Code

إذا كنت تمثل وكالة ، فإنني أوصي بشدة بالترقية غير المحدودة واستخدام Elementor لجميع عملائك. إنها منصة صلبة ويستمر عدد عمليات تكامل الشركاء في الارتفاع. إقرانها مع البرنامج المساعد مثل نموذج الاتصال DB ويمكنك أيضًا جمع كل عمليات إرسال النماذج الخاصة بك.

إليمنتور برو لديه خيار رائع لإدارة البرنامج النصي مدمج فيه. وإليك كيفية إدخال الكود الخاص بك:

• انتقل إلى العنصر> كود مخصص
• قم بتسمية الرمز الخاص بك
• تعيين الموقع ، في هذه الحالة النهاية علامة الجسم.
• حدد أولوية إذا كان لديك أكثر من برنامج نصي تريد إدراجه وضبط ترتيبها.

• انقر فوق تحديث
• سيُطلب منك تعيين الشرط وتعيينه على الإعداد الافتراضي لجميع الصفحات.
• قم بتحديث ذاكرة التخزين المؤقت الخاصة بك وسيتم تشغيل البرنامج النصي الخاص بك!

معاينة تكامل Google Tag Manager الخاص بك

يحتوي Google Tag Manager على آلية رائعة للاتصال بمثيل متصفح واختبار شفرتك بالفعل لمراقبة ما إذا كان يتم إرسال المتغيرات بشكل صحيح أم لا. هذا ضروري لأن Google Analytics ليس في الوقت الفعلي. يمكنك الاختبار والاختبار والاختبار والإحباط حقًا لأن البيانات لا تظهر في Google Analytics إذا لم تكن تدرك ذلك.

لن أقدم برنامجًا تعليميًا هنا حول كيفية القيام بذلك معاينة Google Tag Manager وتصحيحه... سأفترض أنك تعرف. يمكنني إرسال النموذج الخاص بي على صفحة الاختبار المتصلة الخاصة بي والاطلاع على البيانات التي يتم دفعها إلى بيانات GTM كما يجب أن تكون:

في هذه الحالة ، تم ترميز الفئة على أنها نموذج ، وكان الهدف هو نموذج "اتصل بنا" ، والتسمية "إرسال".

في Google Tag Manager ، قم بإعداد متغيرات البيانات والحدث والمشغل والعلامة

تتمثل الخطوة الأخيرة في ذلك في إعداد Google Tag Manager لالتقاط تلك المتغيرات وإرسالها إلى علامة Google Analytics المعدة لحدث ما. يشرح إيلاد ليفي تفاصيل هذه الخطوات في منشوره الآخر - تتبع الأحداث العامة في إدارة العلامات من Google.

بمجرد إعدادها ، ستتمكن من رؤية الأحداث في Google Analytics!

احصل على Elementor Pro

الإفصاح: أستخدم الروابط التابعة الخاصة بي في جميع أنحاء هذه المقالة.