الجزء 4 من البرنامج التعليمي لبرنامج إدارة العلامات من Google: تتبع عمليات إرسال النماذج - متقدم

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

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

لا يتتبع Google Analytics هذا النشاط تلقائيًا ولكن Google Tag Manager (GTM) يقدم حلاً آليًا لتتبع عمليات إرسال النماذج.

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

ما الذي يجعل تتبع النموذج صعبًا؟

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

• والموجهات شكل المستخدم إلى الصفحة شكرا لك: العظمى، وتعقب هذا تلقائيا عن طريق مشاهدة الصفحة.
• يظهر شكل وأشكر يو إخطار ش بعد شكل زر الإرسال تم النقر: العظمى، إذا كان يرسل النموذج يقدم إلى GTM. اقرأ المزيد حول هذا في البرنامج التعليمي لنشر المدونة .
• يتم تحديث النموذج ويعرض نص شكر : تحدي ولكنه قابل للتنفيذ باستخدام Element Visibility Trigger .
• تقوم نافذة منبثقة بإعلام المستخدم بالتقديم الناجح: تحدي ولكن ليس مستحيلًا باستخدام مشغل رؤية العنصر .

كيف تبدأ مع تتبع النموذج

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

إذا لم تسجل GTM إرسال نموذج في وضع المعاينة والتصحيح ، فلن يعمل نهج التتبع القياسي وسيتعين عليك استخدام طريقة بديلة بدلاً من ذلك. هذا شائع جدًا ، وهذا هو السبب في أننا سنعمل مع بديل رائع: The Element Visibility Trigger .

وأوضح مشغل رؤية العنصر

يتتبع مشغل رؤية العنصر (EVB) عندما يظهر عنصر معين على الشاشة (بسبب النقر أو التمرير أو التفاعلات الأخرى) ، وبالتالي ، لديه مجموعة متنوعة من حالات الاستخدام. يمكن تطبيق هذه التقنية على النماذج عندما تظهر رسالة شكر معينة بعد إرسال النموذج بنجاح. يمكن أن يكون هذا إشعار شكر على نفس صفحة النموذج ، أو لافتة شكر عند إعادة تحميل صفحة النموذج ، أو نافذة منبثقة. لمزيد من الأمثلة العملية ، انقر هنا .

باختصار ، يتم تنشيط Element Visibility Trigger عندما يظهر عنصر (عناصر) حددته في منفذ عرض المتصفح. منفذ العرض هو المنطقة المرئية من نافذة المتصفح. عندما يكون العنصر مرئيًا هناك ، يمكن للمستخدم مشاهدته.

بالنسبة إلى طريقة التحديد ، لتحديد العنصر الذي تريد استهدافه ، لديك خياران للاختيار من بينهما:

• معرف العنصر : هذا يطابق العنصر الأول في الصفحة بالمعرف المحدد. يعمل هذا بشكل جيد إذا كان لديك عنصر واحد فقط لتتبعه.
• محدد CSS : هذا يطابق العنصر أو مجموعة من العناصر في الصفحة التي تناسب المحدد الخاص بك ومناسبة لتتبع عناصر متعددة يمكن أن تظهر على الصفحة.

الخطوة 1: ابحث عن معرّف فريد

ابدأ بفحص رسالة نجاح النموذج التي يتم عرضها.

للقيام بذلك ، انقر بزر الماوس الأيمن للوصول إلى أدوات مطور المتصفح. في Chrome ، على سبيل المثال ، انقر بزر الماوس الأيمن على العنصر الذي تريد فحصه وحدد فحص العنصر . سيعرض لك هذا معلومات متنوعة مثل محتوى الرسالة وفئة CSS والمعرف والمزيد من العناصر. في المثال أدناه ، تحتوي الرسالة على معرّف مُرسل للرسالة وهو فريد ويمكن استخدامه كشرط في EVB Trigger .

الخطوة 2: إنشاء مشغل رؤية العنصر

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

لإعداد المشغل ، اتبع الخطوات التالية:

• انتقل إلى المشغلات في الشريط الجانبي الأيسر وأنشئ واحدًا جديدًا.
• استبدل مشغل بلا عنوان باسم وصفي مثل EVB - جهة اتصال - نموذج تم إرساله .
• اختر نوع المشغل: رؤية العنصر .

لتكوين المشغل ، ستقوم بتعيين:

• طريقة التحديد : اختر المعرف من القائمة المنسدلة.
• معرف العنصر : الرسالة المرسلة
  • يستخدم هذا المعرف الفريد الذي حددته في الخطوة 1 لتحديد رسالة الشكر التي تريد تتبعها بالضبط.
• وقت إطلاق هذا المشغل : مرة واحدة لكل صفحة
  • هذا يعني أنه سيتم إطلاقه مرة واحدة فقط على الصفحة الحالية عندما يكون العنصر المطابق للمعرف مرئيًا للمشاهد.
  • يمكن أن يكون الخياران الآخران مفيدًا عند تعقب أكثر من عنصر في صفحة باستخدام CSS Selector
• الحد الأدنى من النسبة المئوية المرئية : 50
  • هنا يمكنك تحديد قيمة بالنسب المئوية ، وهي مقدار العنصر الذي يجب أن يكون مرئيًا في منفذ العرض لإطلاق المشغل. لذلك إذا قمت بتعيين القيمة على "50" ، يجب أن يكون 50٪ على الأقل من العنصر المطابق مرئيًا.
  • بشكل افتراضي ، يجب أن تكون العناصر مرئية بنسبة 50٪ على الأقل على الشاشة لبدء الحدث. هذا كاف في حالتنا.
• لاحظ تغييرات DOM : حدد هذا المربع لتمكين المشغل من تتبع العناصر المتطابقة التي تظهر مع تغير DOM.
  • يتيح لك هذا الإعداد تتبع إمكانية رؤية العناصر التي قد لا تكون موجودة في DOM (نموذج كائن المستند) عند تحميل نموذج جهة الاتصال لأول مرة. بمعنى آخر ، سينتظر هذا ظهور عنصر HTML مع رسالة الشكر .
• مزيد من الشروط لإطلاق الزناد:
  • نظرًا لأننا نستخدم معرفًا ، والذي يجب أن يكون فريدًا لهذا النموذج ، لا نحتاج إلى تعيين المزيد من الشروط هنا.
  • إذا تم استخدام هذا المعرف لنماذج أخرى أيضًا ، فمن المستحسن تعيين مسار الصفحة لتضمين الصفحة التي يتم فيها تقديم النموذج المعني

انقر فوق " حفظ" لإنهاء إعداد المشغل.

الخطوة 3: قم بإنشاء علامة حدث إرسال النموذج

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

الخطوة 4: حفظ الإصدار والاختبار والنشر

لن تبدأ العلامة التي أنشأتها للتو في العمل حتى تنشرها ، ولكن ، أولاً ، يجب أن تختبر تمامًا أنها تعمل كما هو متوقع. بعد حفظ علامتك ، قم بتمكين وضع المعاينة (انقر فوق "معاينة" في الزاوية اليمنى العليا) ، وانتقل إلى موقع الويب الخاص بك ، وقم بتحديث الصفحة.

تأكد من تغطية سيناريوهات الاختبار هذه لتتبع النموذج الخاص بك:

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

يجب أن يعرض تقرير الأحداث في الوقت الفعلي لبرنامج Google Analytics نتائج الحدث إذا كان كل شيء يعمل بشكل صحيح. اقرأ منشور المدونة الخاص بنا حول مشكلات اختبار إدارة العلامات من Google وكيفية إصلاحها إذا واجهت أي مشكلات.

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

استنتاج

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

لقد غطى البرنامج التعليمي لبرنامج إدارة العلامات من Google الخاص بنا تتبع الروابط الخارجية (الصادرة) ، وتتبع روابط التنزيل ، وعمليات إرسال النماذج الأساسية . هل هناك أنواع أخرى من الأحداث ترغب في تتبعها؟ هل تحتاج إلى مساعدة في حالة أكثر تعقيدًا؟ لا تتردد في الاتصال بنا - يسعدنا تقديم المساعدة! وللحصول على تحديثات مثيرة ، اشترك في النشرة الإخبارية لدينا .