37

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 أو إنشاء طبقة بيانات مباشرة في النموذجهؤلاء الذين استخدمهم غالبًاويقومون بتغطية معظم الحالاتلكنني أحب أن أسمع منك أي تقنية تتبع تستخدمها غالبًامن فضلك اترك لي تعليقًا بالأسفلوأيضًا إذا لم تشترك بعد، فاشترك هناك.لأننا نقدم مقاطع فيديو جديدة تمامًا مثل هذا الفيديو كل أسبوعوالآن، اسمي جوليان.نلتقي في المرة القادمة