تعتبر الاضافة الخاصة ببناء النماذج “contact form 7” من أكثر الإضافات استخدامًا من قبل أصحاب مواقع الووردبريس WordPress، حيث تتيح امكانية إنشاء نماذج الاتصال لاستلام مختلف البيانات المتعلقة بمستخدمي المواقع الالكترونية, وهي طريقة تُمكّن الزوار من التواصل مع أصحاب المواقع. والاستفسار عن المنتجات و الخدمات المقدمة في المواقع.
وكذلك لتقديم الطلبات والمراسلة بخصوص الدعم الفني , واستقبال الاقتراحات والآراء من العملاء المحتمليين وأغراض أخرى,,
وبالنسبة لأصحاب المواقع فتتيح هذه الاضافة تخصيص حقول نماذج الاتصال والمتمثلة في إمكانية إضافة حقول للبيانات أو المعلومات التي نرغب بها كأصحاب مواقع الكترونية من المستخدمين , والتي تشمل البريد الإلكتروني , رقم الهاتف , الاسم وكلمة المرور وموضوع الرسالة وغيرها من البيانات التي نحتاجها من عملائنا المحتملين .
وقد تطرقنا في منشور سابق ل 6 طرق لتتبع النماذج عبر الانترنت , وارتأيت أن أقوم بشرح طريقة تتبع اضافة contact form 7 في منشور منفرد ,كونها أداة بناء النماذج الأكثر استخداما على الأنترنت وتحدبدا في الووردبرس مع أزيد من 5 ملايين عملية تثبيت ،
تنويه : تعمل هذه الطريقة مع جميع النماذج المستندة على تقنية ال”AJAX ” كاضافة contact form 7 مما يعني أن هذه الطريقة تعمل فقط عند ضهور رسالة للشكر تفيد بأنه تم ارسال النموذج بنجاح في نفس الصفحة التي تم ملأ النموذج بها , ففي حالة تحويل الزائر لصفحة أخرى عند ارسال النموذج والتي تسمى صفحة الشكر سيتعين عليك استخدام أحد الطرق الأخرى التي قمت بشرحها في هذه المقالة
الخطوات التي سنحتاجها لتتبع ارسال نماذج الcontact form 7 في جوجل تاج منجر :
1 انشاء tag من نوع Custom Html في جوجل تاج منجر ,يسمى بمستمع الحدث التلقائي : auto event listener وهو عبارة عن كود برمجي سيستمع وينتظر تفاعل زوار الموقع مع النموذج وسيسجل هذا listener “المستمع” جميع الأحداث المتعلقة بتفاعلات الزوار مع النموذج ويقوم بدفعها الى طبقة البيانات , ويعتبر حدث ” wpcf7mailsent” أهم هذه الأحداث (وهو الحدث الذي يتم تسجيله ودفعه الى طبقة البيانات عند ارسال النموذج بنجاح ) ( ويتم كذلك دفع أحد هذه الأحداث التالية الى طبقة البيانات عند تفاعل الزائر مع حقول النموذج مثل حدث wpcf7invalid – الذي يتم دفعه الى طبقة البيانات عند اكتمال إرسال نموذج AJAX بنجاح لكن لم يتم إرسال الايميل نظرًا لوجود أخطاء عند ادخال أحد الحقول . أحد الأحداث الأخرى التي يتم دفعها الى طبقة البيانات ” wpcf7spam” ويتم دفعه الى طبقة البيانات عند اكتمال إرسال نموذج AJAX بنجاح لكن لم يتم إرسال الايميل نظرًا لوجود اشتباه في ارسال رسالة spam (لتعرف أكثر عن هذه الأحداث يمكنك مراجعة هذا التوثيق من الموقع الرسمي للاضافة )
.من أجل تفعييل هذا الكود البرمجي “للاستماع وتسجيل الأحداث المتعلقة بملأ الاستمارة “دفع الاحداث لطبقة البيانات” في الخطوة الأولى نحتاج لانشاء tag وهو عبارة عن كود بلغة ال HTML و الجافاسكربت تحديدا عبارة عن “Function”
لاضافة هذا الكود البرمجي في جوجل تاج منجر (نضغط على زر tags في واجهة البرنامج) ثم نحتار نوع التاج “custom html”” ،
يتم تفعيل “firing للتاج” فقط على الصفحات التي تحتوي على نماذج . لنفترض أن موقعنا يحتوي على نموذج في تذييل “footer“ في كل صفحة من صفحات الموقع، في هذه الحالة سنحتاج لتفعيل مستمع الأحداث في جميع صفحات الموقع .
ثم نقوم باختبار مدى نجاح تفعييل هذا الtag “مستمع الأحداث” وهل قام بتسجل حدث خاص بإرسال نموذج ناجح في طبقة البيانات،. في جوجل تاج منجر “GTM” نقوم بتمكين وضع المعاينة والتصحيح بالنقر فوق الزر معاينة في الزاوية العلوية اليمنى .
ثم سينقوم بإدخال عنوان URL للصفحة التي يوجد بها نموذج الاتصال 7 الخاص بنا. ستتم إعادة توجيهنا إلى موقع الويب هذا وسنلاحظ ظهور عنصر واجهة مستخدم في الركن الأيمن السفلي. يجب أن يكون في وضع متصل.
حان الوقت الآن لإرسال النموذج. أدخل جميع الحقول المطلوبة في الموقع وانقر فوق إرسال (أو أيًا كان نص زر النموذج). بمجرد رؤية رسالة نجاح ارسال النموذج ، انتقل لعلامة تبويب المتصفح (أو النافذة) في وضع معاينة GTM. يحتوي عنوان URL الخاص به على tagassistant.google.com. إذا كان كل شيء يعمل بشكل جيد ، يجب أن ترى حدث باسم “cf7submission” على الجانب الأيسر في مايعرف بال event stream بعد دفعه الى طبقة البيانات (تمامًا كما في لقطة الشاشة أدناه)
انقر على حدث “cf7submission” وانتقل إلى تبويب طبقة البيانات “data layer”. ما سنشاهده عبارة عن مصفوفة “Array” من جميع حقول النماذج وأسماء الحقول وقيمها (التي أدخلها الزائر). حيث سنكون قادرين على تتبع جميع إرساليات النموذج بنجاح ، وكذلك ستتاح لنا أيضًا فرصة لالتقاط قيم حقول النموذج . ملاحظة. ضع في اعتبارك أن Google Analytics لا يسمح لك بتخزين وارسال معلومات تحدد الهوية الشخصية للزوار مثل الايميل (ولكن قد يتم إرسالها إلى أدوات تسويقية أخرى ).قد ترغب مثلا في معرفة النموذج تحديدا الذي أرسل منه النموذج اذا كان لدينا اكثر من نموذج في صفحة واحدة , أو اذا كان النموذج يحتوي على حقل به قائمة منسدلة نرغب من خلاله معرفة سبب مراسلتنا من طرف عملائنا المحتملين يمكننا ارسال جميع البيانات المهمة الخاصة بحقول النموذج للأدوات التسويقية بما فيها جوجل أنالتكس 4 وذلك عن طريق انشاء متغيرات خاصة بطبقة البيانات ” data layer variables” حيث ستختزل هذه المتغيرات قيم الحقول
على سبيل المثال اذا كنا نرغب بارسال قيم “الحقل الذي يحتوي على القائمة المنسدلة (سبب مراسلتنا) سنحتاج لانشاء هذا المتغير ,
في هذا المثال سيتوجب علي أن أحول “المفتاح “key ” ,ويسمى كذلك ب”Name ” الى متغير “variable” خاص بطبقة البيانات , حيث سيختزل هذا المفتاح قيمة متغير طبقة البيانات “datalayer variable” في مثالنا نرغب بقيمتين
القيمة الأولى : قيمة المفتاح المسمى “formId” وهي 390 , حيث ستحدد هذه القيمة النموذج الذي تمت تعبئته من طرف الزائر (في حال اذا كان لدينا أكثر من نموذج في الموقع أو في الصفحة ,حيث ستغير هذه القيمة بتغير النموذج الذي تمت تعبئته )
القيمة الثانية : قيمة المفتاح المسمى “response.4.value” وهي في هذه الحالة “استفسار عن أحد منتجاتنا” , ستتغير هذه القيم حسب ماسيقوم الزائر بتعبئته في حقول النموذج (أتمم قراءة المقال لتعرف سبب تسمية هذا المفتاح )
لتسجيل هذه القيم كمتغيرات في جوجل تاج منجر سنذهب لواجهة أداة جوجل تاج منجر ثم نقوم باختيار user defined variable ثم نضغط على new ثم نضغط على variable configuration
ونقوم باختيار نوع المتغير “datalayer variable”
ثم ندخل Data Layer Variable Name المفتاح أو ال “Name” في مثالنا سندخل “ formId ” هام : يجب ان نتأكد من ادخال اسم المفتاح “ key” بشكل صحيح دون تغيير أو زيادة أو نقصان في أي من حروفه والا فلن يشتغل المتغير) تنويه : طريقة تسمية المفتاح أو الname قد تختلف حسب نوع البيانات المراد سحبها من طبقة البيانات ( تحدثت عن طريقة سحب قيم البيانات من مختلف المفاتيح في طبقة البيانات في هذه المقالة) , ثم نعطي اسم لهذا المتغير مثلا dlv –formId, يجب علينا اعطاء هذا المتغير اسم يصفه بشكل دقيق ,لأنه بعد انشائنا للعديد من المتغيرات سيكون من الصعب التفرقة بينهم ) ,ثم نقوم بحفضه , و نقوم بتحديث وضع المعاينة والتصحيح “preview mode” وتحديث صفحة نموذج الاتصال في موقعنا. يجب أن نرى بعد ذلك المتغير الذي قمنا بإنشاؤه في تبويب المتغيرات في واجهة أداة المعاينة والتصحيح في جوجل تاج منجر
بنفس الطريقة وباتباع نفس الخطوات سنقوم بانشاء متغير طبقة بيانات خاص بالقائمة المنسدلة في النموذج أو أي حقل اخر نريد (في الصورة أعلاه قمنا بانشاء أربع متغيرات خاصة ببيانات أربع حقول )
لنفهم أكثر سنعطي مثال اخر حيث سنقوم بانشاء “متغير طبقة بيانات” خاص بالقائمة المنسدلة
سنقوم بنفس الخطوات التي قمنا بها عند انشاء المتغير formId , التغيير الوحيد أنه من أجل استعمال المفاتيح والقيم “key , values“ المخزنة في طبقة البيانات كمتغيرات طبقة بيانات “datalayer varibles “
في هذا المثال قيمة هذا المفتاح مخزنة في مايعرف بالمصفوفة “Array”(شاهد الفرق عندما يكون المفتاح مخزن في مصفوفة , تضم هذه المصفوفة المسماة “response” خمسة مفاتيح , المفتاح الذي نرغب في تحويل قيمته الى متغير هو , {“استفسار عن أحد خدماتنا” :name: “menu-49” , value}
في لغة الجافاسكربت من أجل الوصول لهذا المفتاح المخزن في مصفوفة “array”سنستخدم طريقة تعرف ب “dot notation” نبدأ بكتابة اسم المصفوفة في هذا المثال response , ثم نكتب نقطة (تعني أننا نرغب في قيمة داخل هذه المصفوفة ) ثم نضيف مايسمى بال “index” (يحدد هذا الindex الرقم التسلسلي لهذا المفتاح داخل المصفوفة)
تنويه : ترقيم ال index الخاص بعناصر المصفوفة يبدأ ب 0 وليس 1 , في مثالنا من أجل الوصول لقيمة المفتاح {“استفسار عن أحد خدماتنا” :name: “menu-49” , value} الاسم الذي سنتحصل عليه بطريقة الdot notation هو التالي :response.4.value
انشاء مشغل trigger في جوجل تاج منجر :
سنقوم الان بانشاء المشغل “trigger” الذي سيقوم بتحويل الحدث الذي تم دفعه لطبقة البيانات”cf7submission” (بعد ملأ حقول النموذج ) الى شرط لتفعيل tag جوجل أنالتكس أو أي أداة تسويقية أخرى , يحدد “trigger” الشرط (الحدث أو التفاعل الذي يجب حدوثه “دفعه لطبقة البيانات” لتفعييل الtag ) “في مثالنا هذا الحدث الخاص يضهر بطبقة البيانات باسم “cf7submission” سنقوم بتحويل هذا الحدث الذي يضهر في طبقة البيانات الى trigger .
سننشأ حدث مخصص Custom event في قائمة المشغلات “Triggers” نضغط على triggers ثم custom triggers ثم ندخل اسم الحدث “event name ” تماما كما يضهر في طبقة اليانات “cf7submission” ثم نختار All Custom Events في خيار This trigger fires on, ونعطي اسم يصف هذا الtrigger مثلا “cf7submission form”ونقوم بالضغط على زر حفض
اختبار عمل الاعدادات التي قمنا بها حتى الان
دعونا نختبر الاعدادات التي قمنا بها لحد الان, احفظ جميع التغييرات وقم بتحديث وضع المعاينة والتصحيح (بالنقر فوق الزر PREVIEW في الزاوية العلوية اليمنى من واجهة GTM ثم ستتم إعادة توجيهك إلى الصفحة التي يتم فيها ارسال نموذج الاتصال . املأ بيانات النموذج وأرسله وألق نظرة على ما يحدث في في وضع المعاينة .
النتيجة المتوقعة: يجب تفعييل tag الخاص بالحدث Google Analytics 4 فقط عند إرسال النموذج بنجاح (بمعنى آخر ، عندما يكون حدث cf7submission موجودًا على الجانب الأيسر من وضع المعاينة). وتأكد كذلك من تفعيل (firing) للتاج المخصص “Custom Html” ( الكود البرمجي الذي يستمع وينتظر إرسال النموذج ) على أي صفحة (بغض النظر عما إذا كان النموذج قد تم إرساله أم لا).
ارسال قيم نموذج الاتصال لجوجل أنالتكس 4 على شكل حدث “google analytics : GA4 Event”
بعد أن انتهينا من انشاء هذا الtrigger يمكننا الان ربطه بتاج جوجل أنالتكس 4 “ارسال البيانات المتعلقة بحدث ملأ نموذج الاتصال الى جوجل أنالتكس 4 أو أحد الأدوات التسويقية الأخرى المختلفة كجوجل أدس وفيسبوك أدس وغيرهم , في هذه الفقرة سنقوم بشرح طريقة ارسال هذه البيانات لجوجل أنالتكس 4 , و التي ستضهر لاحقا في التقارير في واجهة الأداة و سنتعرف من خلالها على سلوكيات الزوار و ماهي دوافعهم لملأ النماذج المهمة المتعلقة بالزنس الخاص بنا وغيرها
عندما يتم ازسال النموذج سيتم ارسال حدث “event” لجوجل أنالتكس 4 , سنقوم باعطاء اسم لهذا الحدث (يوصي جوجل باعطاء اسماء للأحداث حسب نوع الحدث , حيث يحاول جوجل من خلال اسم الحدث امدادك بمعلومات اضافية عنه , لمعرفة المزيد حول تسميات الأحداث الموصى بها من جوجل شاهد هذا التوثيق )
سنقوم بادراج المتغيرات التي قمنا سابقا بانشائها الخاصة بطبقة البيانات التي تختزل قيم النموذج الذي يتم تعبئته وهي : dlv-subject value و dlv-letter value و dlv-dropdown form و dlv- formId في ال tag الخاص بتتبع الأحداث في جوجل انالتكس”google analytics : GA4 Event” ،حيث ستعمل هذه المتغيرات كقيم لما يعرف في جوجل انالتكس 4 ب “event parameters”
(تنويه :من أجل ان تضهر هذه القيم في تقارير جوجل أنالتكس 4 سنحتاج لتسجيل الevent parameters ك custom dimensions) ,على الرغم من أننا سنرى ال”parameters” في تقارير الوقت الفعلي و DebugView في جوجل أنالتكس 4 ، فلن نتمكن من رؤيتها في التقارير الأخرى للأداة مثل تقارير استكشاف مسار التحويل ، والنموذج المجاني free form ، و كذلك عند الاطلاع على بطاقات التقارير الخاصة بهم والتي تضهر في واجهة المستخدم في الأداة , ما لم نقم بتسجيلها كأبعاد أو تعريفات مخصصة “custom dimensions”في Google Analytics 4
طريقة تسجيل ال parameters كأبعاد مخصصة “Custom dimensions” في Google Analytics 4
انتقل إلى تكوين configure> ثم تعريفات مخصصة Custom Definitions > وبعد ذلك قم بادخال البراميترز في الأداة
انقر فوق الزر إنشاء أبعاد مخصصة “Create custom dimensions” ثم أدخل:اسم الباراميتر. يمكنك إدخال اي اسم تريد حيث سيتم عرضها في التقارير بهذه التسميات. يمكننا تسميته dlv- formId” على سبيل المثال .ثم بعدها سنقوم باختيار ال scope وسنختار event . ثم سنقوم بادخال البراميتر الخاص بالحدث ,هذا هو المكان الذي يجب علينا إدخال الاسم بالضبط كما أدخلناه عند اعدادنا الtag في جوجل تاج منجر, إذا كان اسم الباراميتر”المتغير في جوجل تاج منجر” الخاص بك هو dlv- formId ، فيجب عليك إدخاله هنا دون أي زيادة أو نقصان في أي من حروف الاسم .
ثم نقوم بعدها بتسجيل الباراميتر الثاني “dropdown_menu” ونضغط على حفض “save”. ثم في غضون الـ 24 ساعة القادمة ، ستبدأ الأبعاد المخصصة “Custom dimensions”في الظهور في تقارير Google Analytics 4.
بعد ان انتهينا من كل الاعدادات حان الوقت لنقوم باختبارها ,ويعتبر تقرير ال “debugview ” في جوجل أنالتكس 4 الميزة والتقرير الاساسي المصمم لاختبار وتصحيح أخطاء الاعدادات في أداه جوجل اناليتيكس اربعة, ويمكننا العثور عليه بالانتقال الى تقرير”تكوين configure “> ثم في الجانب الايسر من واجهه الأداة نضغط على debugview
بمجرد ارسال نموذج الاتصال سيتم تفعييل tag جوجل أنالتكس 4, وتبدأ البيانات القادمة لجوجل أنالتكس 4 بالضهور في تقرير debugview من ضمنها حدث ملأ النموذج والبارامترز الخاصة به
بمجرد ظهور العلامة في قسم العلامات التي تم تنشيطها ، توجه لتقرير DebugView في Google Analytics 4 , يجب أن تبدأ في رؤية الأحداث القادمة لحسابك (بما في ذلك الحدث الرئيسي المسمى (generate_lead). .انقر على هذا الحدث وسترى “الباراميترز التي تم إرسالها معه. انقر فوق أي من هذه الباراميترز للتحقق من القيم الخاصة بكل منها
