تختلف التقنيات والطرق المستعملة في انشاء الاستمارات “forms“عبر الانترنت , سواء كان النموذج خاص بجمع عناوين البريد الإلكتروني للاشتراكات في الرسائل الإخبارية “newsletter forms “، أو النماذج المتعددة الخطوات التي تستخدم لحجز المواعيد مع زوار الموقع
يمكن أن يساعنا برنامج إدارة العلامات من Google “جوجل تاج منجر” في تتبع عمليات تعبئة حقول النموذج وبعد ذلك ارسالها لمختلف ألادوات التسويقية من أجل فهم أكبر لسلوكيات عملائنا المحتمليين ,
يشكل تتبع نماذج الويب الخاص بنا أحد العوامل الحاسمة في تحديد مدى نجاعة استراتيجياتنا التسويقية
فمن خلال ارسال بيانات النماذج لأدوات تحليلية على الويب كجوجل انالتكس يمكننا معرفة العديد من المعلومات الديمغرافية ومعلومات حول محتلف القنوات التسويقية التي ياتي منها هؤلاء العملاء المحتملين الذين قامو بتعبئة هذه النماذج , وفهم السلوكيات التي تدفعهم لتعبئة و ارسال هذه الاستمارات , وبمعرفتنا بهذه المعلومات سيمكننا من تقديم محتوى دقيق ومخصص بشكل أكبر لهذه الفئة, ويتيح لنا تحسين منتجاتنا وخدماتنا وتحسين خدمة عملائنا
توجد اكثر من طريقه لتتبع ارسال الاستمارات في المواقع الالكترونيه وتختلف هذه الطرق حسب الطريقه المستعملة في انشائها ,
علينا طرح سؤال حول ما يحدث عند ارسالنا لهذا النموذج ؟ هل يتم اعاده توجيهنا الى صفحه اخرى “ما يعرف بصفحه الشكر” أو نبقى في نفس الصفحة وتظهرلنا رسالة مفادها أنه تمت تعبئة الاستماره بنجاح , فالعامل المحدد لطريقة تتبع ارسال النماذج هو فهم التقنية المستعملة في انشائها
طرق تتبع الننماذج في الموقع الالكترونية
الطريقة الأولى : استعمال التريغر الخاص بالفورم سبميشون في جوجل تاج منجرForm submission trigger •يمكننا استخدام هذه التقنية لتتبع النماذج اذا كانت طريقة تكوييد هذا النموذج بمعنى هل يتكون النموذج من عنصر HTML <form> مناسب يقوم بإنشاء حدث إرسال؟ . ولمعرفة الاجابة عن هذا االتساؤل نقوم بالضغط بالزر الايمن للفارة على النموذج الذي نرغب بتتبعه ونشاهد الكود المستعمل الخاص بالنموذج اذا كان هذ الكود يحتوي على عنصر <form> حينها يمكننا تتبع هذا النموذج باستخدام الترغر الخاص ب الفورم سبميشون ويسمى ب Form auto-event listener
حيث ان جوجل تاج منجر يقوم بشكل افتراضي بتسجيل حدث “ملأ النموذج ” عندما يقوم أحد زوار الموقع بملأ حقول النموذج بالبيانات ويتم تسجييل هذا الحدث في شريط الأحداث
لانشاء هذا الترغر نضغط على قائمة بجميع ال triggers (بالنقر فوق المشغلات في الشريط الجانبي الأيسر لواجهة GTM). ثم نقوم بإنشاء “مشغل” trigger جديد بالإعدادات التالية
بعد ذلك ستضهر الاعدادات التالية
أولا نقوم باعطاء اسم يصف هذا النموذج , يمكننا اختيار اي اسم , ثم في خانة check validation “التحقق من الصحة”. نقوم بتفعييل هذا الخيار حيث أن جوجل تاج منجر سيتأكد من ان الزائر قد أتم عملية ملأ النموذج بشكل كامل دون أن يترك ايا من الخانات فارغة أو قيم غير صحيحة قبل أن يقوم بتفعييل هذا الترغر , وبمعنى اخر اذا فشلت عملية الارسال واعادة التوجيه , عندما يتم تمكين مربع الاختيار هذا ، يظهر حقل إضافي “تمكين هذا المشغل عند …“enable this trigger when”. في حالتي ، أريد أن يكون هذا المشغل نشطًا في جميع الصفحات ، ولهذا السبب قمت بإدخال مسار الصفحة يحتوي على /. والسبب في ذلك لأن مسار الصفحة سيحتوي دائمًا على شرطة مائلة واحدة على الأقل في أي صفحة.الآن ، دعنا نستخدم وضع المعاينة وتصحيح الأخطاء في GTM لمعرفة ما إذا كان مستمع الحدث التلقائي للنموذج يعمل أم لا. في الزاوية العلوية اليمنى من حساب Google Tag Manager الخاص بك ،.يمكنك الرجوع لهذه المقالة لتفهم طريقة استخدام وضع المعاينة والتصحيح في جوجل تاج منجر
(عندما تنتهي من ملأ النموذج الذي ترغب بتتبعه وتنتقل لوضع المعاينة والتصحيح تأكد من ان حدث اضافي خاص بملأ النموذج يضهر في ال افنت ستريم , اذا ضهر هذا الحدث هذا يعني ان هذه الطريقة (استخدام الform submission ترغر ) تعمل ويمكننا من خلالها تتبع ملأ النماذج في الموقع , في حالة عدم عمل هذه الطريقة استخدم أحد الطرق الأخرى التي سنقوم بشرحها في هذا المقال)
بعد أن تتاكد من ان جوجل تاج منجر يقوم بتسجييل حدث ملأ الاستمارة ,
نحتاج بعدها كذلك لاعداد المتغيرات الخاصة بهذا الtrigger , افتح قائمة المتغيرات في حساب Google Tag Manager الخاص بك. بشكل افتراضي ، يتم تعطيل متغيرات النموذج ، لذلك تحتاج إلى تمكينها. ضمن المتغيرات المضمنة “built in variables”، انقر فوق تكوين configure”، وفي الشريط الجانبي الأيمن قم بتمكيين جميع متغيرات النموذج (للاشارة يتم حفظ جميع التغييرات تلقائيًا).
نقوم بانشاء trigger خاصً لهذا النموذج
سنقوم باختيار حدث “إرسال النموذج” (في وضع المعاينة والتصحيح) ، ثم نقوم بالنقر فوق المتغيرات “variables”
نبدأ في البحث عن أي متغير “variable”فريد لهذا النموذج. عادة ، سيكون متغير معرف النموذج “form Id”، في حالات أخرى فئات النموذج form class كما ترى في الصورة أدناه ، فقد قدمت نموذجًا (منه متغير معرف النموذج هو wpdevart-Forms-7).
هذا معرّف جيد لا يتم استخدامه في أي عناصر أخرى في موقع الويب ، لذلك سأستخدمه لمشغلي:انتقل إلى المشغلات وافتح مشغل إرسال النموذج الذي قمت بإنشائه مسبقًابدلاً من “جميع النماذج” ، حدد “بعض النماذج” وأدخل الشرط لاستهداف هذا النموذج بعينه فقط. في حالتي ، هذا هو ال “Form Id ” الذي تساوي قيمته wpdevarp-Forms-7. إذا كنت لا ترى متغير معرف النموذج “ال form id variable “- قم بتمكينه في قائمة المتغيرات المضمنة في برنامج إدارة العلامات من Google. , قد يكون معرف النموذج مختلفًا في حالتك (مقارنة بمثالي).
احفظ الtrigger ., إذا كان لديك أكثر من نموذج يمكن للزوار / المستخدمين إرسالها ، فقد يكون من المنطقي تضمين معلمة إضافية مايسمى في جوجل أنالتكس بال event parameter” في الوسم الخاص بالحدث “event tag” في جوجل أنالتكس 4 ,(دور هذا التاج “tag” ارسال البيانات الخاصة بالنموذج لأداة جوجل أنالتكس 4 وسنشرح طرق ارسال بيانات اضافية متعلقة بالنماذج مثل مكان تواجد النموذج في الصفحة ) سيساعدنا ارسال هذه المعلمات الاضافية في تمييز النموذج الذي تم إرساله).في GTM ، انتقل إلى العلامات وقم بتعديل تاج الحدث فيGA4 الذي قمت بإنشائه.لا توجد متطلبات صارمة حول كيفية تسمية هذه المعلمة ، لذلك سأقوم بتسميتها form_id. وستكون قيمته هي قيمة المتغير {{Form ID}}
نقوم الان باختبار + تسجيل أبعاد مخصصة “custom dimension” في GA4 عيّن هذا المشغل الجديد لعلامة حدث Google Analytics 4 التي أنشأتها في بداية منشور المدونة هذا.قم بتحديث وضع المعاينة والتصحيح (بالنقر فوق زرمعاينة في واجهة GTMمرة أخرى)ثم املأ الاستمارة وأرسلها. إذا تم تشغيل علامة Google Analytics، فهذه أخبار جيدة! أيضًا (إن أمكن) ، حاول إرسال نموذج مختلف على موقع الويب الخاص بك: في حالة الإرسال الناجح ، يجب عدم تنشيط علامة GA.يجب عليك أيضًا التحقق من الأحداث الواردة في Google Analytics 4 Debug View.إ ذا كنت تخطط لاستخدام form_id (أو بعض المعلمات المخصصة الأخرى في تقارير GA4) ، فيجب عليك تسجيلها كأبعاد مخصصة. اقرأ هذا الدليل لمعرفة المزيد.
الطريقة الثانية : تتبع ملأ النموذج بعد وصول الزائر لمايعرف بصفحة الشكر”الthank you page ” أو ال “confirmation page” باستخدام برنامج إدارة العلامات من Google والذي يعرف اختصارا ب” GTM ” إذا كان مستمع حدث “ملأ النموذج” في Google Tag Manager لا يعمل (الطريقة الأولى)، فيجب عليك التحقق مما إذا كان هذا النموذج يعيد توجيه المستخدم بعد إرسال ناجح إلى صفحة أخرى.إذا كانت الإجابة بنعم ، فما عنوان URL الويب الذي تتم إعادة التوجيه إليه؟
مثال لعنوان صفخة الشكر : https://www.example.com/form/thankyou.html
هل هذا العنوان فريد؟ إذا كانت الإجابة بنعم ، فهل يمكن للمستخدمين الوصول إلى هذه الصفحة دون ملأ النموذج؟ إذا كانت الإجابة على هذا السؤال ا بالنفي ، فيمكنكننا إنشاء trigger”مشغل” خاص ب “pageview”مشاهدة صفحة” يتم تنشيطه أو تفعيله فقط على صفحة الشكرهذه. هدفنا هنا هو تجنب الزيارات العرضية لهذه الصفحة قدر الإمكان.(لأن هنالك بعض الحالات قد يصل من خلالها زائر ما لصفحة الشكر دون ملأ النموذج)
نقوم الآن بإنشاء trigger يفعل فقط عند وصول زائر معين لصفحة الشكر .
ننتقل إلى المشغلات في Google Tag Managerنضغط على زر جديد , ثم نقوم باختيار نوع الtrigger – مشاهدة الصفحة “pageview ” وبعض مشاهدات الصفحة “some pageviews” إذا تمت إعادة توجيه الزائر إلى https://www.example.com/form/thankyou.html ، فيمكنك حينئذٍ تعيين إحدى القواعد التالية لهذا المشغل: مسار الصفحة يساوي /form/thankyou.html. أو عنوان URL للصفحة يحتوي على /form/thankyou.html. حاول أن تكون محددًا قدر الإمكان. قد لا يكون تعيين “ thankyou” فقط كقاعدة لهذا المشغل هو أفضل فكرة لأنه قد تكون هناك صفحات أخرى ، يمكن أن تحتوي عناوين URL منها على هذه الكلمة (ونحن لا نريد ذلك!).ولا تنس تسمية المشغل بشكل صحيح ، على سبيل المثال “مشاهدة صفحة الشكر – إرسال نموذج ناجح”. يجب أن يكون العنوان واضحًا ، وإلا فستحدث فوضى في حساب GTM الخاص بنا على المدى الطويل).
نقوم الان بعمل تيست لهذه الاعدادات التي قمنا بها وذلك باتباع نفس خطوات التيست في الطريقة الاولى الاختلاف الوحيد هو عند ملأ النموذج سنصل لصفحة الشكر وسنشاهد في وضع المعاينة والتصحيح هل تم تفعييل الtag الخاص بجوجل أنالتكس 4 وال trigger الخاص بتسجيل الوصول لصفحة الشكر , اذا كان كل شيئ يعمل بطريقة جيدة , يجب عليك أيضًا التحقق من وصول الحدث والقيم الخاصة به بشكل صحيح “مايعرف بال event parameters أو الcustom dimensions” وذلك من خلال أداة Google Analytics 4 Debug View.
من ناحية أخرى ، إذا كان لديك عدة نماذج وصفحة شكر واحدة ، فستحتاج إلى القيام بذلك:تحقق من كل هذه النصائح ومعرفة ما إذا كان يمكنك الحصول على متغير يحتوي على معرف نموذج خاص (مثل form id وform name وما إلى ذلك) واستخدمه في عنصر القائمة التالي.ثم قم بتضمين معلمة إضافية في علامة حدث GA4 create_lead. يمكن أن يكون شيئًا مثل form_id أو form_name أو أي شيء يناسبنا ، على سبيل المثال:
الطريقة الثالثة : تتبع عمليات إرسال النماذج باستخدام Trigger “رؤية العنصر” “element visibility trigger” يمكنك هذا الtrigger من تتبع وقت ظهورعنصر معين على الشاشة , يمكن تطبيق نفس الأسلوب على النماذج عند ظهور رسالة معينة (مثل “لقد تم ملأ الاستمارة بنجاح شكرًا لك”) بعد إرسال النموذج بنجاح .
أول شيء يتعين علينا القيام به هنا هو فحص رسالة نجاح النموذج. سنحتاج إلى إيجاد طريقة لكيفية إرشاد برنامج إدارة العلامات من Googleإلى عنصر موقع الويب المعين الذي نهتم به.بعد إرسال النموذج بنجاح ، انقر بزر الماوس الأيمن على رسالة النجاح واختر فحص العنصر“inspect element”
سترى بعد ذلك أدوات مطورالمتصفح “ال developer tools” التي تحتوي على معلومات متنوعة حول الرسالة: محتواها ، وفئة CSS ، وما إلى ذلك.في المثال أدناه ، أرى أن الرسالة بها فئة “thanks” والتي يمكن استخدامها كشرط في مشغل Element Visibility. كان من الأفضل أن تحتوي رسالة النجاح على معلمة تسمى ID ولكن نظرًا لعدم توفرها ، فسنستخدم فئة CSS.
لننتقل إلى حاوية “container “إدارة العلامات من Google”وتحديدا لتبويب الTriggers ونقوم بإنشاء مشغل جديد واختر Element Visibility كنوع. المكون الرئيسي هنا هو طريقة الاختيار التي ستساعد GTM على معرفة العنصر تحديدا الذي عند ضهوره في الصفحة يتم تفعييل الtrigger .
طريقة التحديد لها خياران : معرف العنصر“ID” ومحدد CSS “CSS selector” نظرًا لأن رسالة النجاح في المثال الخاص بي لا تحتوي على “معرف” ID (ولكن تحتوي فقط على Class “فئة”) ، فسنستخدم CSS Selector. في حقل محدد العناصر ، نحتاج إلى لصق هذه الفئة “شكرًا”. ، نقطة مهمة تجدر الانتباه لها أنه يتم تحديد كل Class بنقطة أمامها (تنويه : هذه الطريقة قد لاتعمل في أمثلة أخرى , لكنها تعمل في مثالنا هذا)، تأكد من تحديد “ملاحظة تغييرات DOM”. “observe dom changes”يعني هذا الإعداد أنه إذا ظهر عنصر على الشاشة ليس بسبب قيام الزائر بالسكرول ولكن في ظل بعض الظروف الأخرى (على سبيل المثال ، “انبثاق فقط للداخل popup”) ، فإن GTM سيلتقطه (على الأرجح).ألق نظرة على لقطة الشاشة أدناه. إذا كنت تريد ، يمكنك إجراء بعض التعديلات الأخرى ولكن ما فعلته كان الحد الأدنى.
للتوضيح موضوع ال css selector قد يكون موضوع متقدم نوعا ما بالنسبة لمستخدمي جوجل تاج منجرالمبتدئيين , لكن النقطة المهمة التي يجب معرفتها انه اذا توفر معرف ID للعنصر الذي نرغب في تتبعه فيمكننا ادخال القيمة ال“value” الخاص بهذا الID مباشرة ك CSS selector فقط نقوم بادخال رمزهاشتاج قبل قيمة هذا ال ID
في حالة اذا لم يكن للعنصر الذي نرغب في تتبعه ID , سنضطرلاختيارCss selector (هذه الطريقة متقدمة مقارنة بالطريقة الأولى حيث سنتحدث عنها في مقال اخر)
بعد انتهائنا من كل هذه الاعدادات سنقوم بحفض هذا ال trigger
ثم سنقوم بنفس مراحل التيست التي قمنا بها سابقا دعونا نختبرعيّن هذا المشغل الجديد لعلامة Google Analytics التي أنشأتها في بداية منشور المدونة هذا.افتح (أو حدّث) وضع المعاينة والتصحيحثم ,املأ الاستمارة وأرسلها. بعد الإرسال الناجح ، في وحدة التحكم من خلال وضع المعاينة سترى حدث Element Visibility. انقر فوقه وسترى أن علامة GA4 قد تم إطلاقها. إذا كنت لا ترى حدث Element Visibility، فمن المحتمل أنك ارتكبت بعض الأخطاء في طريقة التحديد أو حقل محدد CSS. أو نسيت تمكين مربع الاختيار “لاحظ تغييرات الدوم” “observe dom changes ” أو أن هذا النموذج موجود في iFrame
في بعض الحالات الاخرى مثلا اذا قام مطور بانشاء النموذج في موقعك عن طريق كود مخصص ,فسنلجأ لاحدى الطريقتين التاليتين والتي ستعتمد على مدى رغبتك في الاستعانة بمطور ويب من عدمه
الطريقة الأولى : عن طريق الاستعانة بمطور, (ويمكن كذلك أن تقوم بهذه الطريقة عن طريق اضافة “plugin” حسب نضام ادارة المحتوى الذي تستعمله) , حيث ستقوم بمطالبة المطور بتنفيذ مايعرف ب dataLayer.push () في مايعرف بال callback function” التي يتم تنشيطها عند إرسال النموذج بنجاح . (هنالك طريقتين يتم استعمالهما لسحب وارسال البيانات من المواقع الالكترونية للأدوات التسويقية “طريقة سحب البيانات من خلال انشاء صفحة أو طبقة بيانات بمعزل عن كود سورس الخاص بصفحات الموقع ما يعرف بالداتا لاير والطريقة التثانية التي تسمى ب dom scraping أو سحب البيانات مباشرة من خلال ” الدوم” الكود الخاص بالموقع ” لفهم الطريقتين بشكل أكبر أنصحك بقراءة هذا المقال )
وتوضح الصورة أسفله نموذج لمايعرف ب dataLayer.push () (سيقوم المطور أو plugin باستبدال البيانات في هذا المثال مثلا ك “footer” بالبيانات الفعلية لنموذجك)
ستحتاج إلى إعداد مهمة قصيرة ولكنها مكتوبة جيدًا وواضحة للمطور:أولاً ، اختر اسمًا للحدث. في المثال أعلاه اخترت نموذج التقديم.ثم فكر في أي بيانات إضافية قد تحتاجها. اكتب نقاط البيانات هذه وحاول تصنيفها.لنفترض أن لدي عدة أنواع من النماذج – “اتصل بنا” و “اشتراك الرسائل الإخبارية”. لذلك قررت أن يكون لدي شكل متغير dataLayer. معلمة أخرى مفيدة (في رأيي) هي موضع النموذج ، لأن بعض النماذج موجودة في التذييل ، وبعضها الآخر في الشريط الجانبي لموقع الويب. لماذا لا تجعله متغير آخر لطبقة البيانات؟إذا كان المطور جديدًا في أحداث dataLayer و Google Tag Manager بشكل عام ، فامنحه رابطًا إلى دليل dataLayer.push هذا مع أمثلة واضحة. اشرح لهم أنك بحاجة إلى حدث به معلمات إضافية يتم دفعها إلى dataLayer بعد إرسال النموذج بنجاح. إذا كان لا يزال لدى المطورين أسئلة ، فيجب أن تنيرهم هذه المدونة.لكن تذكر التأكيد على أن قيم المعلمات مثل formType و formPosition يجب استبدالها ديناميكيًا بالمطور. إذا تم تقديم نموذج X ، فيجب دفع بيانات هذا النموذج X إلى طبقة البيانات. إن مهمة المطور لديك هي معرفة الحل الذي يُدرج القيم الفعلية وترميزه.
انتهينا! بعد أن يقوم المطور بتنفيذ dataLayer.push بجميع الأشكال ، يجب عليك اختباره (بنفس طريقة اختبار الطرق السابقة)
الآن سنقوم بانشاء trigger الذي يمثل ال condition التي يجب حدوثها “ملأ نموذج في الموقع” من أجل أن يتم ارسال البيانات التي يتضمنها لأداة كجوجل أنالتكس 4 ,أو أي أداة تسويقية أخرى, ننتقل إلى المشغلات “triggers” وننقر فوق جديد. ثم ندخل الإعدادات التالية: نوع الtrigger: حدث مخصص “custom event” اسم الحدث: formSubmission ( ,قد يختلف الاسم بالنسبة للنموذج الذي ترغب في تتبعه. فقط تأكد من استخدامك لنفس الاسم الذي استخدمه المطور,يعمل هذا المشغل على : “This trigger fires on” نقوم باختيار جميع الأحداث المخصصة “All custom events”. هذا يعني أنه سيتم تتبع جميع أحداث ملأ النماذج
بعد أن انتهينا من انشاء هذا الtrigger يمكننا ربطه “ارسال البيانات المتعلقة بحدث ملأ النموذج الى الأدوات التسويقية المختلفة ” مثل جوجل أنالتكس 4 , في هذه الفقرة سنقوم بشرح طريقة ارسال بعض البيانات الاضافية المهمة التي نرغب في مشاهدتها في التقارير الخاصة بجوجل أنالتكس والتي سنتعرف من خلالها على سلوكيات الزوارو ماهي الدوافع التي تدفعهم لملأ النماذج المهمة المتعلقة بالزنس الخاص بنا
في مثال dataLayer.push الخاص بي ، هناك نقطتا بيانات نرغب في استخدامها كمتغيرات – formType و formPosition ( , سأدرجهما في ال tag الخاص بتتبع الأحداث في GA4 ، لذلك أحتاج إلى تضمينهما في Google Tag Manager عن طريق إنشاء متغيرات خاصة بطبقة البيانات
ثم نقوم بتسجيل هذه المتغيرات الخاصة بطبقة البيانات ك custom dimensions في جوجل أنالتكس 4 ,ونقوم بفس الاختبارالذي قمنا به في الطرق الأخرى
بالنسبة للطريقة الخاصة ب الdom scraping
عطفا على الأسئلة التي تردني حول أي من هذه الطرق نستخدمها لتتبع النماذج الخاصة بالاضافة الشهيرة للنماذج الخاصة بالووردبرس Contact form 7 , ارتأيت أن أكتب مقال خاص يشرح هذه الطريقة (اضغط هنا لمشاهدة هذا المقال )
الطريقة الأخيرة عن طريق مايعرف ب ” Dom scraping ” , وتعتمد هذه الطريقة على استخراج البيانات مباشرة من مايعرف بالدوم “كود سورس الموقع “وارسالها لجوجل تاج منجر , ويتم ارسالها عن طريق بعض المتغيرات التي تقوم باختزال القيم (المتواجدة في كود سورس الموقع ) التي نريد ارسالها لمختلف الأدوات التسويقية , لكن لهذه الطريقة بعض النقائص التي حيث أن أي تغيير ختى لو كان بسيط نقوم به أو يقوم به المطور في الكود سورس الخاص بالموقع فعلى الأغلب سيؤدي الى تعطل هذه الطريقة بشكل كامل , من أجل استعمال هذه الطريقة بشكل فعال يلزمنا التأكد من استمرار عملها عند قيامنا بأي تغيير في كود الموقع .
تجدر الاشارة الى أنه يمكننا من خلال هذه الطريقة تتبع جميع تفاعلات زوار موقع الكتروني بما في ذلك ارسال النماذج في أداة جوجل تاج منجر, وبعد ذلك يمكنا ارسال هذه البيانات للأدوات التسويقية التي نرغب بتتبع هذه التفاعلات بها , لتعرف أكثر عن طريقة عمل هذه الطريقة شاهد هذا المقال
.
