47

3 تقنيات لتتبع النماذج من خلال (Google Tag Manager)

وسيعطيك مربعًا آخرًا هنا حيث عليك استخدام متغير "مسار الصفحة" أو متغير عنوان URL للصفحة

في هذا الفيديو، سأريكم ثلاث تقنيات حول كيفية تتبع النماذج

بمساعدة Google Tag Manager، و Google Analytics

لإعلام Google Tag Manager متى يُطيع نماذج التقديم هذه

وقد لا تريد إطاعة كل الصفحات

إذن يمكنك تضمين هذا وكتابة " حسنًا، أريد هذا فقط على صفحة اتصل بنا هنا"

كل هذا وأكثر قادم

ثم يتم تشغيل ميزة عملية التحقق على هذا النموذج

أهلًا ومرحبًا بكم في فيديو آخر من MeasueSchool.com

مما يعني أنه إذا قام المستخدم بإدخال شيء خاطئ

حيث تعلمك طريقة التسويق الرقمي المبنية على البيانات

مثلًا، عنوان بريد إلكتروني غير صالح

اسمي جوليان

عادة ما تحصل على خطأ

وسأريكم اليوم ثلاث تقنيات حول كيفية تتبع النماذج

ومن ثم لا تريد إطلاق العلامات الخاصة بك

بمساعدة Google Tag Manager، و Google Analytics

لذلك يمكنك منع هذا من خلال هذه الخاصية

لماذا ثلاث تقنيات مختلفة؟

لكن هذا لا يعمل دائمًا مع كل النماذج

حسنًا، هناك دائما تقنيات متعددة للوصول إلى البيانات التي تريدها.

ويعتمد هذا على كيفية إنشاء النموذج

لا تشعر بالإحباط عندما لا تنجح معك تقنية أو أخرى

وبالتالي، سأقوم باختبار هذا قبل أن يتم تشغيل هذا تلقائيًا.

ويجب عليك أيضًا أن تكون مرنًا وتعرف إمكانيات الأداة

إذا كان هذا يحل مشكلتك، فتحقق من ذلك.

وتكون قادرًا على تنفيذ واختبار تقنيات التتبع المختلفة

إذا قامت بتعطيل المشغل الخاص بك

حتى تحصل على البيانات التي تحتاجها في نظامك

وفجأة لم تحصل على نموذج التقديم الخاص بك مجددًا

وينطبق هذا بشكل خاص على النماذج

فسأقوم بإيقاف هذا

لأن هناك أشكال وأحجام كثيرة للنماذج

ونفس الشيء مع خيار العلامات وانتظار العلامات هو خيار للتأكد من أن

وتقنيات مختلفة

تم إطلاق الحدث الخاص بنا وكل العلامات قبل إعادة توجيه المستخدم

وأحيانًا لا يعمل المشغل أو التقنيات التي قدمتها لكم في هذه المقاطع

إلى الصفحة التالية

لذا عليك أن تكون مرنًا وتعرف تقنيات التتبع المختلفة هذه

وعادة هذا خيار جيد لاختياره

اليوم، سأريكم ثلاث تقنيات تتبع مختلفة

ولكن سأقوم باختبار هذا مجددًا قبل نشره

التي استخدمها غالبًا عندما يتعلق الأمر بالنماذج

حسنًا، اطَّلعنا على مشغل نموذج التقديم

عندما لا تعمل واحدة أو الآخرى فهذا يتوقف على الحالة

ووصلنا إلى الحالة الثانية، وهي نموذج الاتصال الثالث

ولدينا الكثير لتغطيته، فلنبدأ.

وعندما أقوم بملء هذا النموذج بدلًا من إعادة توجيهنا

حسنًا، وبالعودة إلى DemoShop الخاص بنا هنا

فستعطيك فقط رسالة نجاح هنا

لدينا نماذج الاتصال

الآن، يمكننا استخدام نماذج GTM المقَدَمَة

وأول شيء عليك القيام به لكي تعرف أي تقنية تتبع

وهذا ممكنًا أيضًا لأنه تم إعداد مشغل الهاتف هذا بالفعل

تريد استخدامها هو الانتقال إلى النموذج ومعرفة النجاح الذي تريد تحقيقه

ولكن أريد أن أريكم طريقة أخرى حول كيفية تتبع هذا

الآن في النموذج، إنها عادة تقديم النموذج.

ومجددًا، لا يمكننا الخروج من عنوان URL

لذلك ينتقل المستخدم إلى النموذج، تمامًا مثل هذا، ويُدخل الرسالة.

وأيضًا لا نريد استخدام مشغل نموذج التقديم

إذن دعونا ننقر على هذا الزر ونرى ما سيحدث

قد يكون فيه بعض المشاكل أو أنك لا ترى هذا الحدث في Google Tag Manager

في هذه الحالة، تم إعادة توجيهي إلى صفحة النجاح

ثم تريد استخدام الطريقة الثالثة الي أستخدمها غالبًا

وتريد تتبع التفاعلات

التي هي عنصر "مشغل الرؤية"

إذا كان هناك صفحة نجاح واضحة

فلنلقي نظرة على هذا في Google Tag Manager

وتغير عنوان ال URL هنا فعليًا

يمكننا الانتقال إلى المشغلات هنا وننقر على جديد

يمكننا استخدام ذلك بدلًا من Google Analytics لتتبع ذلك بالفعل

وتحت تكوينات المشغل

لأنه في Google Analytics، إذا قمتَ بالنشر

ونريد هذه المرة أن نختار عنصر "مشغل الرؤية"

ولدي بالفعل هذا على صفحتي

ما الذي يدور حوله عنصر " مشغل الرؤية"؟

فستحصل على هذه البيانات حول مشاهدات الصفحة في حساب Google Analytics الخاص بك

حسنًا، كما يوحي الاسم

ويمكنك تصنيف هذا على أنه هدف تحويل

سيتم إطلاق هذا المشغل إذا كان هناك شيء مرئي للمستخدم على الشاشة

إذن في كل مرة يذهب فيها شخص ما إلى هذه الصفحة

والطريقة التي يتم بها ذلك هي معاينة وفحص نموذج كائن المستند

سيكون هذا بالفعل تحويلًا في Google Analytics

ورؤية ما إذا كان هناك أي تغييرات

كل ما عليك فعله هو الذهاب إلى "قسم المسؤول" هنا في "الأهداف"

فمثلًا، إذا قمتُ بالنقر على رسالة النجاح هذه هنا

واختر "هدف جديد"

فيمكنني الانتقال إلى أدوات المطور لدي من خلال النقر على معاينة

ولدينا قوالب مختلفة هنا

وهذه أدوات مطوري Chrome

وعادة ما اختار "القالب المخصص"

وهنا يمكننا رؤية تقديم نموذج كائن المستند

ونحن بحاجة إلى تسميته

يمكننا الآن اختيار واحد من هذه العناصر التي تعتقد أنها تتغير أثناء تحميل الصفحة

وهو "تقديم نموذج الاتصال بنا" "Contact Us Submit"

وبصراحة، يجب عليك رؤية رسالة النجاح أولًا

واختر "معرّف الهدف"، ونوع الهدف الذي تريد إدخاله.

ومعاينتها قبل أن تتمكن بالفعل من إنشاء ذلك

وبالنسبة لنا، هذه مشاهدة للصفحة نريد تصنيفها

وها نحن ذا، يمكنك أن ترى أن هناك

وهذا ما سنفعله في "مكان الهدف" هنا

<div class=wpcf7-mail-sent-ok"

فلننقر على هذا و "متابعة"

وهي إحدى نقاط الاتصال التي يتم إدراجها عندما يتم تقديمك بنجاح

ثم يجب علينا إدخال عنوان URL مباشرة

مجددًا، نسختُ هذا فحسب

إذن، سنختار"يساوي"

إذا قمتُ بإعادة تحميل الصفحة

بالنسبة لنا، سيكون هذا عنوان URL هنا

ونظرنا إلى نقطة الاتصال نفسها هنا

وعليك أن تعلم بأنك لا تريد إدخال عنوان URL كاملًا

فنلاحظ أن فئة النجاح تبدو مختلفة لأنها بالفعل تتغير بمجرد ملء هذا النموذج

ولكن مسار الصفحة الذي يلي النطاق الخاص بك

إذن سأنقر على رز "إرسال"

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

وأنتبه إلى "div class" هذه

الآن، أنا عادة أختار أنواع مختلفة من خيار المطابقة هنا.

ونرى في هذه الرسوم الصغيرة هنا أن هناك نمط مختلف مرفق

وأختار عادة "المصطلحات العادية"

وهناك أيضًا فئة جديدة مرفقة بهذا وهي "mail-sent-ok"

إنها قوية جدًا

الآن ما الذي يمكننا فعله مع عنصر مشغلات الرؤية؟

ولقد قدمنا فيديو عن هذا أيضًا

انظر إلى هذا العنصر وتأكد من أنه تم إطلاق العلامة الخاصة بنا بمجرد تغيير هذا العنصر

إذا أردتَ أن تكون أكثر تقدمًا في التتبع الخاص بك

والذي سنحتاجه لهذا هو معرفة قليلة عن CSS

وتغطية حالات مختلفة، وخيارات المطابقة

لأنه علينا إخبار Google Tag Manager بالعنصر الذي يجب مراقبته

فأنا أنصحك بمراجعة "المصطلحات العادية"

وفي هذه الحالة، لدينا القدرة على استخدام "المعرّف" أو " محدد CSS"

ولكن بالنسبة لنا، "يساوي" ستفي بالغرض الآن.

ونظرًا لأن نقطة الاتصال هنا

فلنتحقق من هذا الهدف أولًا

ونقطة اتصال "div" ليس لها معرًف

من خلال النقر عليه

فسنضطر إلى اختيار محدد CSS

ويشير إلى أن معدل التحويل هو 0%، وهذه ليست علامة جيدة عادة

ما الذي تقوم بإدخاله في حقل محدد CSS؟

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

هذا شيء يمكننا تجربته بالفعل داخل لوحة تحكم JavaScript الخاصة بنا

وهناك طريقة أخرى لاختبار هذا، وهي في الواقع حفظ هذا الآن.

لدينا هنا لوحة التحكم الخاصة بنا

ومن ثم نعود إلى "التقارير الوقت الفعلي" هنا

ويمكننا في التعليق كتابة

وننتقل إلى التحويلات بالأسفل

( "")document.querySelector

وبعد أن وصلنا الآن إلى علامة التبويب هذه، يمكنك العودة مجددًا إلى النموذج الخاص بنا

ويمكننا إدخال محدد CSS وتجربة كل ذلك

وننتقل إلى تحويل آخر هنا

الآن بالنسبة لنا، لدينا "div" هنا

ومعرفة ما إذا كنا حصلنا على أي نوع من تقديم النماذج في قسم التحويلات هنا

لذا لنجرب "div"

وها نحن ذا!

نضغط إدخال

لدينا "تقديم الاتصال بنا" "Contant Us Submit" جديد

إذن، هدفنا يعمل.

وحصلنا على أول "div" الذي هو بالفعل على الصفحة

وسنتمكن من عرض هذا وكل التقارير لدينا لاحقًا كهدف تحويل

ولكن هذا ليس "div" الذي نريد اختياره

لذلك لا يجب أن يكون الأمر معقدًا دائمًا عندما يتعلق بالنماذج وتتبع نجاح النموذج

فنحن نريد اختيار فئة معينة

إذا كان لديك صفحة النجاح بعد تقديم النموذج مباشرة

وبالنسبة لنا، كان هذا "class=wpcf7-mail-sent-ok"

فسأعتبر دائمًا أن هذا علامة واضحة على أن المستخدم اتخذ الإجراء

ويمكننا تحديد هذه الفئات بنقطة

الذي أريد أن يتخذوه، وتحويله

إذن سأضع (".div") ووضع هذه الفئة في الخلف هنا

وبالتالي، سأطلق العلامة الخاصة بي أو إعداد مثل هدف التحويل هذا داخل الأداة

واضغط إدخال

وبالمناسبة، يمكنك أيضًأ القيام بذلك في فيس بوك من خلال اختيار "تحويلات مخصصة"

وسننظر إليها وسنرى أنها العنصر الذي أريد مراقبته

وأيضًا اختيار المسار فحسب

إذن هذا هو محدد CSS الصحيح للدخول إلى حساب Google Tag Manager هنا

لكنه يصبح أكثر صعوبة

ولدينا هنا خيارات أخرى

لذا في نموذج الاتصال الثاني الذي لدينا هنا

لدينا متى يتم تشغيلها بالفعل؟ مرة واحدة فقط لكل صفحة

فلنمر مجددًا بهذا النموذج ونرسله

والذي يبدو منطقيًا

ونرى أنه تم توجيهنا إلى صفحة النجاح ولكن لم يتغير بالفعل عنوان URL هنا

ولكن بالنسبة لنا، يمكننا بالفعل إدخال هذا عدة مرات

ولدينا هنا رسالة توضح أنه تم تقديم ذلك بنجاح

لذا، فلنختار خيار "كل مرة يظهر فيها العنصر على الشاشة"

إذن لا يمكننا فعليًا استخدام نفس الطريقة التي نستخدمها في Google Analytics

ما المقدار الذي يجب أن يكون مرئيًا من هذا؟

وتتبع مشاهدة الصفحة

50% جيد

نحتاج في الواقع إلى إنشاء شيء ما في Google Tag Manager للقيام بهذا العمل

لذلك إذا كان على حافة الشاشة مثلًا، فلن يكون مرئيًا للمستخدم.

وإحدى هذه الطرق هي استخدام إنشاء تقديم نموذج التشغيل

وبالتالي، ما زلنا نريد تشغيل العلامة الخاصة بنا

لجمع تفاعل إرسال النموذج

وعلينا اختيار خيار فحص تغيرات DOM

كيف يعمل هذا؟

ولدينا تحذير صغير هنا

حسنًا، في Google Tag Manager نفسه

ولكن لا يؤثر كثيرًا على وقت تحميل الصفحة

يمكنك الذهاب إلى المشغلات هنا

لكن عليك أن تعلم أنه يمكن أن يؤثر على أداء الموقع

وتقوم بإنشاء مشغل جديد

وسنختار كل العناصر التي تم تحديدها بواسطة هذا العنصر المحدِد

وهذا المشغل الجديد هو نموذج المشغل الخاص بنا

فلنمضي قدمًا ونقوم بتسمية كل هذا

كالتكوينات، وتنقر هنا

يمكننا اختيار تفاعلات مختلفة التي نريد أن نطلق عليها علامتنا

"رسالة نجاح نموذج مشغل الرؤية""visibility - form success message"

ويجب أن نذهب إلى مشغل تقديم النموذج

فلنحفظ ذلك

والآن، سنترك هذا بدون ضوابط

تحديث صفحتنا

ثم كإعداد تلقائي

ولنربط هذا بالفعل مع العلامة المحددة مسبقًا التي لدينا هنا

وكما هي الآن

"GA - Event- Contact-Us-Submit"

فلنجربه فحسب

سنقوم بإيقاف تشغيل المشغل

وسننتقل إلى رز "حفظ"

يمكننا القيام بذلك هنا بالأسفل

وخطوة أخيرة قبل أن نجرب هذا

ودعونا نتخلص من المشغل القديم وتوصيله بالمشغل الجديد

هي الانتقال إلى المتغيرات لدينا وتفعيل متغيرات النموذج

فلنقوم بحفظ ذلك والتحديث

التي يمكنك القيام بها تحت إنشاء المتغيرات هنا

وتحديث صفحتنا وإغلاق هذا

وفي الأسفل، لدينا متغيرات النموذج الخاص بنا التي سأقوم بتفعيلها

وسنقوم الآن بتقديم هذا مجددًا

والآن، ما عليك إلا أن تفعل ذلك مرة واحدة.

وسأقوم بإرسال هذا

ومن ثم تم تفعيلهم، ويمكننا الانتقال إلى وضع المعاينة وتصحيح الأخطاء

ونرى الآن أن لدينا GTM كعنصر للرؤية هنا

والعودة إلى صفحتنا

في وضع المعاينة وتصحيح الأخطاء

ولنقوم بتقديم هذا النموذج

ونرى أنه تم إطلاق حدث Google Analytics الخاص بنا

ومجددًا علينا أن نرى وضع المعاينة وتصحيح الأخطاء هنا

منذ أن قمنا بإعداده كهدف

ولننتبه إلى ما يحدث في هذا المربع الصغير هنا

وسنرى أيضًا تحويلًا جديدًا بدلًا من Google Analytics

عندما أضغط على زر " الإرسال"

إذن هذه هي الطريقة الثالثة لتثبيت نموذج التتبع

والآن، ترى هناك "تقديم" داخل هذا المربع

بمساعدة Google Tag Manager

وللأسف، تم إعادة توجيهي إلى الصفحة الثانية مباشرة

واستخدام عنصر مشغل الرؤية

فلن أتمكن من معاينتها أكثر من ذلك

حسنًا، ها قد رأيتم هذه هي الطريقة التي يمكنك من خلالها تتبع النماذج

هناك العديد من الحيل التي يمكنك استخدامها

بمساعدة Google Tag Manager، و Google Analytics

والتي أشير إليها كثيرًا هي فقط فتح هذا في علامة تبويب جديدة

هؤلاء فقط ثلاث تقنيات للتتبع قدمتُها لكم

من خلال الضغط على مفتاح أمر أو تحكم

وهناك العديد من التقنيات الأخرى مثل AJAX Listener

وثم النقر على زر " إرسال"

أو History Change Listener

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

أو إنشاء طبقة بيانات مباشرة في النموذج

وسنغادر علامة التبويب الأخرى من دون تغيير

هؤلاء الذين استخدمهم غالبًا

وهذا مفيد حقًا للبحث في نموذج التقديم هنا

ويقومون بتغطية معظم الحالات

فلننقر على نموذج التقديم هذا

لكنني أحب أن أسمع منك أي تقنية تتبع تستخدمها غالبًا

ومن ثم الانتقال إلى المتغيرات

من فضلك اترك لي تعليقًا بالأسفل

وتوجد هنا المتغيرات التي قمنا بتفعيلها للتو

وأيضًا إذا لم تشترك بعد، فاشترك هناك.

ويمكننا فحصهم ومعرفة كيفية ملئهم

لأننا نقدم مقاطع فيديو جديدة تمامًا مثل هذا الفيديو كل أسبوع

وما الذي يجمعه Google Tag Manager من النموذج

والآن، اسمي جوليان.

وما هي المعلومات التي يمكننا استخدامها لإنشاء متغيرًا لذلك وإطلاق العلامة الخاصة بنا

نلتقي في المرة القادمة

الآن، من المهم أن نتذكر أنه يجب أن يكون هذا فريدًا في النموذج الخاص بك

لذلك لا يتم تشغيل تقديم نموذج GTM الخاص بك

عندما يتم ملئ نموذجًا آخرًا مثل نموذج البحث

ولأريكم هذا فحسب

يمكن أن يكون لدينا بالفعل حقل آخر هنا وهذه هي مجموعة حقول جديدة

وسأقوم بإدخال بريد إلكتروني

وهذا نموذج آخر على نفس الصفحة

وسأضغط على زر التسجيل هنا مع الضغط على الأوامر مرة أخرى

وستفتح هذا في علامة تبويب جديدة

إذن لدينا هنا نموذجان تقديم ويمكننا مقارنتهما مع بعضهما البعض

ويمكننا البحث عن كيف يمكننا تكوين المشغل الخاص بنا بشكل صحيح لإطلاقها

على نموذج التقديم الرئيسي لدينا أو نموذج الاتصال أيضًا

وإذا انتقلتَ إلى الرابع والخامس ذهابًا وإيابًا

نرى أنه تغير شيء واحد هنا، وهو معرّف النموذج.

لذا إذا كان هناك معرّف نموذج خاص بك

فسيحاول Google Tag Manager إلتقاطه وإدخاله في نموذج المتغيرات لديك

ويمكننا استخدام هذه المتغيرات لتحديد المشغل الخاص بنا بشكل أضيق كثيرًا

وتصفيته في هذا الحدث

إذن، إنه رائع حقًا أن يكون لدينا هذا في معرّف النموذج

فلنستمر

وفي Google Tag Manager، سنقوم بتحويل مشغل النموذج إلى مشغل محدَد

الذي يتم إطلاقه فقط على "نموذج اتصل بنا"

إذن هذا مشغل نموذج لنموذج اتصل بنا

والآن، سنقوم بتثبيت فلتر في هذه التكوينات

وهذه هي الطريقة التي يمكنك القيام بذلك

انقر على "بعض النماذج" هنا

ثم اختر المتغير الذي تريد تصفيته

وبالنسبة لنا، سيكون معرّف النموذج

ومن ثم هناك خيارات مطابقة مختلفة

ويمكنني الذهاب مع خيار "Contains" مثلًا أو خيار "Equals" الذي لدينا هنا أيضًأ

وسأقوم بإدخال كل ما تم إدخاله في هذا المتغير

وهو " Ninja_forms_form_1"

ولنعود إلى هنا

ونقوم بإدخال هذا هنا

وسيتحول هذا المشغل الآن إلى صحيح في نموذج تقديم "ninja_forms_form_1"

وليس في الثاني هنا والذي هو "ninga_forms_form_13"

لذلك يجب عليك تضييق ذلك هنا

ومن ثم يمكننا حفظه وإرفاقه في علامة

الآن، إذا أردتَ إرسالنا إلى Google Analytics مثلًا

فسنقوم بذلك مع حدث لأن هذا تفاعل وليست مشاهدة للصفحة بالضبط

إذن سأقوم بإنشاء علامة حدث هنا الخاصة ب "contact us submit"

فلنمضي قدمًا ونستخدم علامة Google Analytics الخاصة بنا هنا

وسيكون هذا "حدثًا"

وهذا "نموذج التقديم"

ونموذج "اتصل بنا"

وهذه هي تسمية الإجراء التي يجب عليك ملئها إذا أردتَ ذلك

ويمكنك ترك حقل التسمية والقيمة فارغين

ومن ثم سأختار متغير إعدادات Google Analytics الخاصة بي

وهذا يحدد مكان إرسال البيانات

وسأحدد المشغل الخاص بي التي قمنا بتكوينها مسبقًا

فلنحفظ هذا، ونقوم بتحديث وضع المعاينة وتصحيح الأخطاء.

ونقوم بتحديث صفحتنا

ونقوم بملء هذا مجددًا الآن

ونضغط على مفتاح الأمر وننقر على إرسال

ونرى هنا نموذج التقديم الخاص بنا

وأنه تم إطلاق حدث Google Analytics إلى Google Analytics

ويجب أن نتمكن من رؤية هذا في تقارير الوقت الفعلي تحت الأحداث

ها نحن ذا

تم تحويل "نموذج التقديم" "واتصل بنا" إلى Google Analytics

الآن، إذا أردتَ مجددًا إنشاء هدف من هذا داخل قسم المسؤول

يمكنك الذهاب إلى نموذج "Contact Us Submit"

والهدف الذي كان لدينا

وتغيير المكان حولنا إلى حدث

وهنا يمكنك إدخال الفئة

ليس عليك فعلًا ملء هذا كله

يمكنك ملء أول واحدة فحسب

لكنني أحتاج إلى وضع نماذج لكل البيانات التي تُرسل إلى Google Analytics

لذلك بالنسبة لنا، عندما أنقر على هذا

فلنطَّلع على القيم مجددًا، لقد كان "نموذج التقديم" "وإجراء اتصل بنا"

فمثلًا، يمكنني إتخاذ هذا الإجراء

فقط الإجراء

وإدخاله هنا

وليس عليك ملء البقية إذا أردتَ أن تكون نشطًا عندما يتم إطلاق الهدف

الآن عندما أحفظ هذا

لقد تغيرت الآن التكوينات الخاصة بنا

ولكن عندما أعود وأقوم بتقديم هذا النموذج مرة أخرى

والنقر على إرسال

وفي تقرير الوقت الفعلي تحت التحويلات

يجب أن نرى حدوث هدف تحويل جديد

إذن هذه هي الطريقة الثانية لتتبع النماذج من خلال Google Tag Manager

باستخدام مشغل نموذج التقديم

الآن، قد تكون رأيتَ هذه الخيارات التي تخطيتُها في قسم المشغل

والتي هي " انتظار العلامات" "وعملية التحقق"

الآن، يمكن قراءة ما يدورون حوله

وخبرتي مع مربعات الاختيار هذه هي أنه عليك تجربتهم وليس وضع علامة تلقائيًا

لذلك إذا كان النموذج الخاص بك يعمل الآن

ويتم تتبع التحويل الخاص بك الآن

أنني أنصحك إذا أردتَ اختبار هذا، فانقر على زر " عملية التحقق"

وسيعطيك مربعًا آخرًا هنا حيث عليك استخدام متغير "مسار الصفحة" أو متغير عنوان URL للصفحة

لإعلام Google Tag Manager متى يُطيع نماذج التقديم هذه

وقد لا تريد إطاعة كل الصفحات

إذن يمكنك تضمين هذا وكتابة " حسنًا، أريد هذا فقط على صفحة اتصل بنا هنا"

ثم يتم تشغيل ميزة عملية التحقق على هذا النموذج

مما يعني أنه إذا قام المستخدم بإدخال شيء خاطئ

مثلًا، عنوان بريد إلكتروني غير صالح

عادة ما تحصل على خطأ

ومن ثم لا تريد إطلاق العلامات الخاصة بك

لذلك يمكنك منع هذا من خلال هذه الخاصية

لكن هذا لا يعمل دائمًا مع كل النماذج

ويعتمد هذا على كيفية إنشاء النموذج

وبالتالي، سأقوم باختبار هذا قبل أن يتم تشغيل هذا تلقائيًا.

إذا كان هذا يحل مشكلتك، فتحقق من ذلك.

إذا قامت بتعطيل المشغل الخاص بك

وفجأة لم تحصل على نموذج التقديم الخاص بك مجددًا

فسأقوم بإيقاف هذا

ونفس الشيء مع خيار العلامات وانتظار العلامات هو خيار للتأكد من أن

تم إطلاق الحدث الخاص بنا وكل العلامات قبل إعادة توجيه المستخدم

إلى الصفحة التالية

وعادة هذا خيار جيد لاختياره

ولكن سأقوم باختبار هذا مجددًا قبل نشره

حسنًا، اطَّلعنا على مشغل نموذج التقديم

ووصلنا إلى الحالة الثانية، وهي نموذج الاتصال الثالث

وعندما أقوم بملء هذا النموذج بدلًا من إعادة توجيهنا

فستعطيك فقط رسالة نجاح هنا

الآن، يمكننا استخدام نماذج GTM المقَدَمَة

وهذا ممكنًا أيضًا لأنه تم إعداد مشغل الهاتف هذا بالفعل

ولكن أريد أن أريكم طريقة أخرى حول كيفية تتبع هذا

ومجددًا، لا يمكننا الخروج من عنوان URL

وأيضًا لا نريد استخدام مشغل نموذج التقديم

قد يكون فيه بعض المشاكل أو أنك لا ترى هذا الحدث في Google Tag Manager

ثم تريد استخدام الطريقة الثالثة الي أستخدمها غالبًا

التي هي عنصر "مشغل الرؤية"

فلنلقي نظرة على هذا في Google Tag Manager

يمكننا الانتقال إلى المشغلات هنا وننقر على جديد

وتحت تكوينات المشغل

ونريد هذه المرة أن نختار عنصر "مشغل الرؤية"

ما الذي يدور حوله عنصر " مشغل الرؤية"؟

حسنًا، كما يوحي الاسم

سيتم إطلاق هذا المشغل إذا كان هناك شيء مرئي للمستخدم على الشاشة

والطريقة التي يتم بها ذلك هي معاينة وفحص نموذج كائن المستند

ورؤية ما إذا كان هناك أي تغييرات

فمثلًا، إذا قمتُ بالنقر على رسالة النجاح هذه هنا

فيمكنني الانتقال إلى أدوات المطور لدي من خلال النقر على معاينة

وهذه أدوات مطوري Chrome

وهنا يمكننا رؤية تقديم نموذج كائن المستند

يمكننا الآن اختيار واحد من هذه العناصر التي تعتقد أنها تتغير أثناء تحميل الصفحة

وبصراحة، يجب عليك رؤية رسالة النجاح أولًا

ومعاينتها قبل أن تتمكن بالفعل من إنشاء ذلك

وها نحن ذا، يمكنك أن ترى أن هناك

<div class=wpcf7-mail-sent-ok"

وهي إحدى نقاط الاتصال التي يتم إدراجها عندما يتم تقديمك بنجاح

مجددًا، نسختُ هذا فحسب

إذا قمتُ بإعادة تحميل الصفحة

ونظرنا إلى نقطة الاتصال نفسها هنا

فنلاحظ أن فئة النجاح تبدو مختلفة لأنها بالفعل تتغير بمجرد ملء هذا النموذج

إذن سأنقر على رز "إرسال"

وأنتبه إلى "div class" هذه

ونرى في هذه الرسوم الصغيرة هنا أن هناك نمط مختلف مرفق

وهناك أيضًا فئة جديدة مرفقة بهذا وهي "mail-sent-ok"

الآن ما الذي يمكننا فعله مع عنصر مشغلات الرؤية؟

انظر إلى هذا العنصر وتأكد من أنه تم إطلاق العلامة الخاصة بنا بمجرد تغيير هذا العنصر

والذي سنحتاجه لهذا هو معرفة قليلة عن CSS

لأنه علينا إخبار Google Tag Manager بالعنصر الذي يجب مراقبته

وفي هذه الحالة، لدينا القدرة على استخدام "المعرّف" أو " محدد CSS"

ونظرًا لأن نقطة الاتصال هنا

ونقطة اتصال "div" ليس لها معرًف

فسنضطر إلى اختيار محدد CSS

ما الذي تقوم بإدخاله في حقل محدد CSS؟

هذا شيء يمكننا تجربته بالفعل داخل لوحة تحكم JavaScript الخاصة بنا

لدينا هنا لوحة التحكم الخاصة بنا

ويمكننا في التعليق كتابة

( "")document.querySelector

ويمكننا إدخال محدد CSS وتجربة كل ذلك

الآن بالنسبة لنا، لدينا "div" هنا

لذا لنجرب "div"

نضغط إدخال

وحصلنا على أول "div" الذي هو بالفعل على الصفحة

ولكن هذا ليس "div" الذي نريد اختياره

فنحن نريد اختيار فئة معينة

وبالنسبة لنا، كان هذا "class=wpcf7-mail-sent-ok"

ويمكننا تحديد هذه الفئات بنقطة

إذن سأضع (".div") ووضع هذه الفئة في الخلف هنا

واضغط إدخال

وسننظر إليها وسنرى أنها العنصر الذي أريد مراقبته

إذن هذا هو محدد CSS الصحيح للدخول إلى حساب Google Tag Manager هنا

ولدينا هنا خيارات أخرى

لدينا متى يتم تشغيلها بالفعل؟ مرة واحدة فقط لكل صفحة

والذي يبدو منطقيًا

ولكن بالنسبة لنا، يمكننا بالفعل إدخال هذا عدة مرات

لذا، فلنختار خيار "كل مرة يظهر فيها العنصر على الشاشة"

ما المقدار الذي يجب أن يكون مرئيًا من هذا؟

50% جيد

لذلك إذا كان على حافة الشاشة مثلًا، فلن يكون مرئيًا للمستخدم.

وبالتالي، ما زلنا نريد تشغيل العلامة الخاصة بنا

وعلينا اختيار خيار فحص تغيرات DOM

ولدينا تحذير صغير هنا

ولكن لا يؤثر كثيرًا على وقت تحميل الصفحة

لكن عليك أن تعلم أنه يمكن أن يؤثر على أداء الموقع

وسنختار كل العناصر التي تم تحديدها بواسطة هذا العنصر المحدِد

فلنمضي قدمًا ونقوم بتسمية كل هذا

"رسالة نجاح نموذج مشغل الرؤية""visibility - form success message"

فلنحفظ ذلك

تحديث صفحتنا

ولنربط هذا بالفعل مع العلامة المحددة مسبقًا التي لدينا هنا

"GA - Event- Contact-Us-Submit"

سنقوم بإيقاف تشغيل المشغل

يمكننا القيام بذلك هنا بالأسفل

ودعونا نتخلص من المشغل القديم وتوصيله بالمشغل الجديد

فلنقوم بحفظ ذلك والتحديث

وتحديث صفحتنا وإغلاق هذا

وسنقوم الآن بتقديم هذا مجددًا

وسأقوم بإرسال هذا

ونرى الآن أن لدينا GTM كعنصر للرؤية هنا

في وضع المعاينة وتصحيح الأخطاء

ونرى أنه تم إطلاق حدث Google Analytics الخاص بنا

منذ أن قمنا بإعداده كهدف

وسنرى أيضًا تحويلًا جديدًا بدلًا من Google Analytics

إذن هذه هي الطريقة الثالثة لتثبيت نموذج التتبع

بمساعدة Google Tag Manager

واستخدام عنصر مشغل الرؤية

حسنًا، ها قد رأيتم هذه هي الطريقة التي يمكنك من خلالها تتبع النماذج

بمساعدة Google Tag Manager، و Google Analytics

هؤلاء فقط ثلاث تقنيات للتتبع قدمتُها لكم

وهناك العديد من التقنيات الأخرى مثل AJAX Listener

أو History Change Listener

أو إنشاء طبقة بيانات مباشرة في النموذج

هؤلاء الذين استخدمهم غالبًا

ويقومون بتغطية معظم الحالات

لكنني أحب أن أسمع منك أي تقنية تتبع تستخدمها غالبًا

من فضلك اترك لي تعليقًا بالأسفل

وأيضًا إذا لم تشترك بعد، فاشترك هناك.

لأننا نقدم مقاطع فيديو جديدة تمامًا مثل هذا الفيديو كل أسبوع

والآن، اسمي جوليان.

نلتقي في المرة القادمة