كيفية تتبع contact Form 7 عبر جوجل تاغ مانجر

تتيح أدوات التحليل الرقمي لأصحاب المواقع فهم تفاعلات الزوار وتقييم أداء صفحاتهم. وفي هذا السياق، تظل متابعة نماذج التواصل أمراً أساسياً لمعرفة مدى فعاليتها. لذلك سوف نستعرض هنا كيفية تتبع contact form 7 عبر جوجل تاغ مانجر، لتحصل على نظرة عميقة حول تفاعلات المستخدمين مع نماذجك.

ما هو Contact Form 7؟ 

يُعتبر Contact Form 7 من أبرز الإضافات المستخدمة في نظام ووردبريس لإنشاء نماذج الاتصال. إذ يسعى المسوقون الناجحون لتتبع إرسال هذه النماذج باستخدام “Google Analytics 4” لقياس الأداء العام. ولكن من أين تأتي هذه التحويلات؟ أي النماذج تتفوق؟

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

أما فيما يخص “Contact Form 7” بشكل خاص، فهو ليس استثناءً ويمكن تتبعه باستخدام “Google Tag Manager”. وللمزيد من التفاصيل حول كيفية تتبع الأحداث باستخدام “Contact Form 7” مع “Google Tag Manager” و”Google Analytics 4” تابع معنا قراءة هذا المقال.

الأحداث التي يطلقها Contact Form 7 DOM events 

يُفصِّل المطورون في مستندات تتبع Contact Form 7 عن الأحداث التي يطلقها الـ DOM بعد حدوث تفاعل معين مع النموذج، وتتمثل هذه الأحداث فيما يلي:

• wpcf7invalid: يُطلق عند اكتمال تقديم النموذج عبر AJAX بنجاح، ولكن لم يتم إرسال البريد الإلكتروني بسبب وجود حقول بها إدخالات غير صالحة.
• wpcf7spam: يُطلق عند اكتمال تقديم النموذج عبر AJAX بنجاح، ولكن لم يتم إرسال البريد الإلكتروني لأنه تم اكتشاف نشاط محتمل للبريد المزعج.
• wpcf7mailsent: يُطلق عند اكتمال تقديم النموذج عبر AJAX بنجاح وتم إرسال البريد الإلكتروني.
• wpcf7mailfailed: يُطلق عند اكتمال تقديم النموذج عبر AJAX بنجاح، ولكن فشل في إرسال البريد.
• wpcf7submit: يُطلق عند اكتمال تقديم النموذج عبر AJAX بنجاح، بغض النظر عن أي حوادث أخرى.

وقد تم التأكيد أن استماع لحدث wpcf7submit قد لا يكون دقيقًا دائمًا، حيث يمكن أن يتم إطلاقه حتى إذا كانت الحقول المطلوبة تحتوي على أخطاء، ولذلك تم التوجيه نحو استخدام الحدث wpcf7mailsent.

كيف يمكن تتبع  Contact Form 7 من خلال جوجل تاغ مانجر؟

يمكن تتبع Contact Form 7 باستخدام جوجل تاغ مانجر، يتعين اتباع الخطوات التالية:

إنشاء Auto-Event Listener Tag

لإعداد Auto-Event Listener Tag يجب إضافة جزء من الشيفرة لكي يقوم بالاستماع والانتظار لتقديم النموذج بنجاح، وهذا المستمع معروف باسم “Auto-Event Listener Tag”. إذ ينتظر هذا المستمع حدث wpcf7mailsent من DOM، وعند حدوثه، سيقوم بإرسال بيانات مفيدة إلى الطبقة البيانية مثل اسم الحدث، معرف النموذج، وقيم جميع حقول النموذج كما في المثال التالي:

<script>

document.addEventListener( ‘wpcf7mailsent’, function( event ) {

 window.dataLayer.push({

   “event” : “cf7submission”,

   “formId” : event.detail.contactFormId,

   “response” : event.detail.inputs

 })

});

</script>

“`

بالمقارنة مع الحلول الأخرى المتاحة عبر الإنترنت، هذه الشيفرة لا تقوم فقط بإنشاء حدث في الطبقة البيانية باسم “cf7submission”، بل تقدم أيضاً استجابة كاملة تضم مصفوفة تحتوي على كل حقل في النموذج وقيمته. لتنفيذ هذه الشفرة، قم بالدخول إلى حساب “جوجل تاغ مانجر” الخاص بك، ثم إلى الحاوية، وأنشئ وسم HTML مخصص يُطلق فقط على الصفحات التي تحتوي على نماذج.

إنشاء GTM Trigger

لإنشاء محفز “GTM Trigger”، قم أولاً بتكوين محفز للوسم الذي أنشأته مسبقًا وفي مثالنا، سيكون اسم المحفز “محفز Contact Form 7”.

• نوع المحفز: اختر النوع “Other – Custom Event” من القائمة الافتراضية. سنستخدم event الذي أنشأناه في الوسم رقم 1 كحدث للمحفز.
• اسم الحدث: wpcf7successfulsubmit.
• يُطلق هذا المحفز على: جميع الأحداث المخصصة.

إنشاء Google Analytics 4 Event Tag

بعد الإنتهاء من الخطوتين الأولى والثانية لتتبع الأحداث في Contact Form 7، دعونا نقم بإرسال حدث إرسال النموذج إلى Google Analytics 4 باستخدام الإعدادات التالية:

انتقل إلى الوسوم > new > Google Analytics > GA4 Event. أفترض أنك تعرف بالفعل بعض أساسيات Google Analytics 4 وأنك قد قمت بالفعل بإنشاء الوسم في حاوية GTM.

في هذا الوسم، قم بما يلي:

• أدخل معرف القياس لـ GA4 أو المتغير الثابت الذي يحتوي على المعرف.
• أدخل اسم الحدث (القيمة الموصى بها هي generate_lead، لكن يمكنك تسميته كما تشاء).
• قم بتوسيع معلمة الحدث وأدخل معلمتين:
  • form_id وقم بتعيين قيمتها لتكون المتغير الموجود في الطبقة البيانية: {{dlv – formId}}.
  •  form_subject وقم بتعيين قيمتها لتكون المتغير الموجود في الطبقة البيانية: {{dlv – Form Subject}} (لكن عليك الانتباه إلى أني استخدمت هذا فقط لأغراض العرض، في الواقع، قد لا يكون من المنطقي تتبع موضوعات النماذج في أدوات مثل GA، حيث ستكون البيانات متعددة للغاية).

• قم بتعيين tag ليتم تنشيطه على حدث cf7submission المخصص.

إنشاء Form ID Data Layer Variable

لتحسين تتبع الأحداث وجمع البيانات بفعالية، يتم دفع معرّف النموذج إلى طبقة البيانات. فعند إرسال النموذج، يتم دفع معرفات النموذج إلى طبقة البيانات، وهو ما نحتاج لالتقاطه وإدخاله في GTM وفي أحداث Google Analytics الخاصة بنا، ولإنشاء هذه الخطوة اتبع ما يلي:

• ابدأ بإضافة متغير جديد محدد من قبل المستخدم يُسمى CF7-formID. 
• قم بتعيين اسم متغير طبقة البيانات كـ CF7formID (مع مراعاة حساسية الحروف). 
• من خلال هذا الإجراء، يمكننا توفير جسر فعال بين البيانات الموجودة في طبقة البيانات والأدوات المستخدمة في تحليلات الويب.

إنشاء Custom Trigger ومتغير (اختياري) في جوجل تاغ مانجر

لتتبع الأحداث الخاصة والبيانات المخصصة داخل موقعك، يُعتبر إنشاء Custom Trigger ومتغير في جوجل تاغ مانجر Google Tag Manager خطوة أساسية. 

• أولاً، قم بتسجيل الدخول إلى حسابك في جوجل تاغ مانجر، ثم انتقل إلى قسم “variables” وانقر على “new” لإنشاء new variables . 
• حدد نوع المتغير الذي تريد، مثل متغير URL أو متغير طبقة البيانات.
• بعد ذلك، انتقل إلى قسم “Catalysts” وانقر على “new” لإنشاء محفز مخصص. 
• حدد نوع الحدث الذي تريد أن يحفز العلامة، مثل ” view page” أو “Click”. 
• بمجرد تكوين المحفز والمتغير، يمكنك ربطهما بالعلامات المخصصة لتحقيق التتبع المثالي للأحداث داخل موقعك.

إنشاء GA4 Event Tag في جوجل تاغ مانجر

إنشاء GA4 Event Tag في جوجل تاغ مانجر هو عملية مهمة لتتبع events الخاصة بموقعك وتحليل البيانات بكفاءة، ولإنشاء هذه العلامة، اتبع الخطوات التالية:

1. تسجيل الدخول: قم بتسجيل الدخول إلى حساب جوجل تاغ مانجر.
2. اختيار العلامات: اذهب إلى قسم العلامات وانقر على new.
3. اختيار نوع العلامة: من القائمة المنسدلة، اختر “Google Analytics: GA4 Event”.
4. إدخال ID القياس: قم بإدخال مُعرّف القياس الخاص بـ GA4 أو المتغير الثابت الذي يحتوي على هذا المُعرّف.
5. تسمية الحدث: أدخل اسم الحدث الذي ترغب في تتبعه، مثل “generate_lead”.
6. إعداد المعلمات: قم بتوسيع قسم “Event parameters” وأدخل المعلمات المطلوبة، مثل “form_id” و”form_subject”، وربطهم بالمتغيرات المناسبة.
7. تكوين المحفز: حدد Catalyst المناسب، مثل “cf7submission”، لتحديد الأوقات التي يجب أن تُطلق فيها العلامة.

في الختام، إن معرفة كيفية تتبع contact form 7زعبر جوجل تاغ مانجر يمكنك من قياس أداء نماذج الاتصال وتحسين التفاعل مع المستخدمين. إن استغلال هذه الأداة يضمن لك تحليلًا دقيقًا لبيانات الزوار وتحسين تجربة المستخدم. إن فهم تدفقات الزائرين وردود فعلهم يوجه استراتيجيتك الرقمية نحو النجاح.

المصادر: 

Contact Form 7 Event Tracking with Google Tag Manager

Track Contact Form 7 with Google Tag Manager and GA4