ترکینگ فرم Contact Form 7 به کمک GTM و GA4

اول از همه چطور بفهمیم توی یه پیج وبسایتی  با یه  فرم CF7 مواجهیم؟

برای اینکه بفهمی تو یه صفحه وب‌سایتی با فرم CF7 (Contact Form 7) مواجهی، این مراحل رو دنبال کن:
1. بررسی سورس کد صفحه: مرورگرت رو باز کن (مثلاً کروم)، راست‌کلیک کن و "View Page Source" رو انتخاب کن. تو کد HTML دنبال تگهایی مثل `<form>` بگرد که شامل کلاس‌هایی مثل `wpcf7-form` یا `wpcf7` باشن. این‌ها نشونه‌های فرم CF7 هستن.

2. بررسی با developer tools: F12 رو بزن و توی developer tools ، تب "Elements" رو چک کن. اگه ساختار HTML شامل کلاس‌هایی مثل `wpcf7-form-control`، `wpcf7-submit` یا `wpcf7-response-output` باشه، احتمالاً فرم CF7 داری.

3. رفتار فرم: بعد از ارسال فرم، اگه پیامی مثل "Your message was sent successfully" با کلاس `wpcf7-mail-sent-ok` یا خطای `wpcf7-validation-errors` ظاهر بشه، نشونه CF7 هست. همچنین، چک کن ببین جاوااسکریپت مرتبط با `wpcf7` تو صفحه لود شده یا نه.

4. بررسی آدرس یا ادمین سایت: اگه به پنل وردپرس سایت دسترسی داری، تو بخش افزونه‌ها (Plugins) ببین آیا Contact Form 7 فعاله. یا از مستندات سایت بپرس که از CF7 استفاده می‌کنه.

5. تست با GTM: از پریویو مود GTM استفاده کن و دیتالیر رو بررسی کن. اگه ایونت‌هایی با نام‌های مرتبط با CF7 (مثل `wpcf7mailsent`) ظاهر بشن، تأییدیه دیگه‌ای هست.
با این روش‌ها می‌تونی مطمئن شی فرم CF7 داری یا نه.

حالا CF7 چی هست اصلا؟

Contact Form 7 یا CF7 یکی دیگه از افزونه‌های خیلی محبوب برای ساخت فرم در وردپرسه.
مارکترهای خوب با فرم‌ها چی کار می‌کنن؟
با Google Analytics 4 ترکینگ سابمیت فرم‌ها رو انجام می‌دن و بعد عملکرد کلی رو بررسی می‌کنن:
مثلاً اینکه این کانورژن‌ها از کجا اومدن؟ کدوم فرم‌ها بهتر جواب می‌دن؟ و از این‌ جور تحلیل‌ها.

امروزه یکی از رایج‌ترین روش‌ها برای ترکینگ هر تعامل توی سایت اینه که با Google Tag Manager این کار رو بکنی.
اگه به هر دلیلی تا حالا امتحانش نکردی، واقعاً وقتشه که دست به کار شی (اینجا چندتا دلیل خوب آوردیم چرا باید ازش استفاده کنی).

حالا برگردیم به اصل مطلب. Contact Form 7 هم استثنا نیست، و با Google Tag Manager به‌راحتی می‌تونی اون رو ترکینگ کنی. می‌تونی:

نمپلیت آماده Google Tag Manager

یه تمپلیت  برای کانتینر GTM هم برات آماده کردم که کلی تو وقتت صرفه‌جویی می‌کنه.
می‌تونی از پایین دانلودش کنی.

cf7 json.txt

حتماً! در ادامه ترجمه کامل و خودمانی متن "INSTRUCTIONS" رو برات می‌نویسم:

مراحل

📥 دانلود فایل کانتینر

فایل JSON مربوط به کانتینر رو از بالا دانلود کن. برای این کار روی لینک کلیک راست کن و گزینه‌ی Save Link As یا Save Target As رو انتخاب کن تا فایل JSON روی کامپیوترت ذخیره بشه.

📤 ایمپورت فایل JSON داخل GTM

وارد اکانت خودت در Google Tag Manager شو و از منوی کناری برو به قسمت Admin.
توی بخش Container گزینه‌ی Import Container رو بزن.
توی تنظیمات گزینه merge رو انتخاب کن.

🧩 وارد کردن Measurement ID خودت

توی تگ ایونتی که به GTM اضافه میشه، یه فیلدی هست به اسم Measurement ID.
کافیه اونجا آیدی مربوط به پراپرتی GA4 خودت رو وارد کنی.

🧪 تست و پابلیش

از گزینه‌ی Preview استفاده کن تا این کانتینر رو روی سایت خودت تست کنی.
تمام ایونت‌ها رو امتحان کن تا مطمئن بشی درست کار می‌کنن.
اگه همه‌چیز اوکی بود، فقط کافیه دکمه‌ی Submit رو بزنی و کانتینرت رو منتشر کنی.

نکاتی که باید در نظر بگیری

این روش برای فرم‌هایی جواب می‌ده که مبتنی بر AJAX هستن (مثل فرم‌هایی که با Contact Form 7 ساخته شدن). یعنی چی؟ یعنی وقتی فرم با موفقیت سابمیت می‌شه، صفحه رفرش نمی‌شه. اگه فرم‌ت این ویژگی رفرش نشدن رو داره، ادامه بده و بخون.

همچنین این راهنما بیشتر برای فرم‌های یک‌صفحه‌ای طراحی شده. فرم‌های چندصفحه‌ای بعد از هر مرحله‌ای که کاربر کامل می‌کنه، یه ایونت سابمیت می‌فرستن. ترکینگ اون نوع فرم‌ها توی این راهنما پوشش داده نشده.

ایونت‌های DOM در Contact Form 7

دولوپرها توی داکیومنت های رسمی Contact Form 7 چندتا ایونت DOM تعریف کردن که بعد از یه تعامل خاص با فرم، اجرا می‌شن:

• wpcf7invalid: زمانی اجرا می‌شه که سابمیت فرم به‌صورت AJAX انجام شده، ولی ایمیل تایید ارسال نشده چون یکی از فیلدها مقدار نامعتبر داشته.
• wpcf7spam: زمانی اجرا می‌شه که سابمیت فرم انجام شده، ولی ارسال ایمیل رد شده چون سیستم تشخیص داده ممکنه فعالیت به صورت اسپم باشه.
• wpcf7mailsent: زمانی اجرا می‌شه که فرم با موفقیت سابمیت شده و ایمیل هم ارسال شده.
• wpcf7mailfailed: زمانی اجرا می‌شه که سابمیت موفق بوده، ولی ارسال ایمیل موفقیت آمیز نبوده.
• wpcf7submit: زمانی اجرا می‌شه که فرم با موفقیت سابمیت شده، فارغ از اینکه ایمیل ارسال شده یا نه.

برای اینکه بتونیم ایونت‌های فرم Contact Form 7 رو ترک کنیم، در ابتدا تصمیم گرفتم به ایونت wpcf7submit گوش بدم. اما متوجه شدم این ایونت حتی وقتی فیلدهای اجباری فرم هیچ مقداری داخلشون نداشتن هم اجرا می‌شه. نتیجه چی شد؟ رفتم سراغ ایونت wpcf7mailsent.

۱. ترکینگ فرم Contact Form 7 به کمک Auto-Event Listener 

اولین چیزی که برای ترکینگ فرم نیاز داریم، یه تیکه کده که بتونه گوش بده و منتظر بمونه تا فرم با موفقیت سابمیت بشه. به این کدها  auto-event listener میگن. این لیسنر منتظر ایونت wpcf7mailsent می‌مونه و وقتی رخ داد، یه سری اطلاعات کاربردی رو داخل Data Layer پوش می‌کنه (مثل نام ایونت، ID فرم، و مقادیر همه فیلدهای فرم).

cf7autoeventlistener.txt

در مقایسه با راه‌حل‌های دیگه‌ای که توی اینترنت هست، این یکی فقط یه ایونت به Data Layer اضافه نمی‌کنه (با نام cf7submission) بلکه کل مقدار بازگشتی فرم (response) رو هم می‌ده — یعنی آرایه‌ای از تمام فیلدهای فرم به‌همراه مقادیرشون. کمی جلوتر بیشتر درباره‌ش صحبت می‌کنیم.

برای اینکه این کد رو اجرا کنی، وارد Google Tag Manager شو، برو داخل کانتینرت، یه تگ Custom HTML بساز که فقط روی صفحاتی اجرا بشه که فرم دارن. فرض کنیم فرم توی فوتر همه صفحات هست، پس تگ رو روی «All Pages» فایر کن.

۱.۱ تست کردن ایونت لیسنر

قبل از اینکه ادامه بدیم، باید مطمئن بشیم که این ایونت لیسنر واقعاً می‌تونه سابمیت فرم رو تشخیص بده.

تو GTM روی دکمه Preview در گوشه بالا سمت راست کلیک کن تا وارد حالت پریویو بشی.

بعد از اون، آدرس صفحه‌ای که فرم Contact Form 7 توش هست رو وارد کن.

حالا به اون صفحه هدایت می‌شی و یه ویجت کوچیک پایین سمت راست صفحه ظاهر می‌شه. باید روی اون نوشته باشه «Connected».

اگه اینو نمی‌بینی، این راهنما رو بخون. حالا فرم رو پر کن و روی دکمه SUBMIT کلیک کن (یا هر نوشته‌ای که فرم داره). وقتی پیام موفقیت رو دیدی، برگرد به تب پریویوی GTM که آدرسش با tagassistant.google.com شروع می‌شه.

اگه همه‌چی درست پیش رفته باشه، یه ایونت به نام cf7submission باید توی لیست ایونت‌ها دیده بشه (در سایدبار سمت چپ).

روی ایونت cf7submission کلیک کن و برو به تب Data Layer. اینجا یه array می‌بینی که شامل تمام فیلدهای فرم، نام فیلدها و مقدارهایی هست که کاربر وارد کرده. یعنی نه تنها سابمیت شدن فرم ترک شده، بلکه مقادیر فیلدها هم در دسترسن.
یادآوری مهم: GA4 اجازه نمی‌ده اطلاعات فردی (PII) رو توی پلتفرمش ذخیره کنی. ولی این اطلاعات می‌تونه به ابزارهای دیگه فرستاده بشه.

۲. وریبل ها و تریگر

خب تا اینجای کار چی داریم؟ یه ایونت داریم به اسم cf7submission که داخل Data Layer فایر می‌شه. حالا باید از این اطلاعات استفاده کنیم:

• اول، ایونت cf7submission رو باید به یه تریگر تبدیل کنیم، چون بدون تریگر هیچ تگی فایر نمی‌شه.
• دوم، فقط برای نمونه، می‌خوایم مقدار فیلد «subject» فرم رو بگیریم و به GA4 بفرستیم. برای این کار باید Data Layer Variable بسازیم.

۲.۱ ساخت تریگر برای ایونت cf7submission

برای اینکه از ایونت cf7submission به‌عنوان شرط فایر شدن تگ استفاده کنیم، باید یه تریگر از نوع Custom Event بسازیم:

GTM > Triggers > New > Trigger Type: Custom Event

• Event Name: cf7submission
• این تریگر می‌تونه روی All Custom Events فایر بشه یا فقط روی صفحاتی خاص (اگه بخوای دقیق‌تر باشی)

۲.۲ ساخت وریبل ها

حالا نوبت ساخت متغیرهای Data Layer شده. یه نگاهی بندازیم به چیزی که توی Data Layer بعد از ایونت cf7submission داریم. علاوه‌بر event و formId، لیسنر ما یه کلید به اسم response هم پوش می‌کنه. این کلید یه آرایه هست که شامل ۵ object مختلفه. هر آبجکت نماینده‌ی یه فیلد فرم هست.

چون آرایه‌ها در جاوااسکریپت از ایندکس صفر شروع می‌شن (۰، ۱، ۲، ۳، ...)، پس اگه بخوایم مقدار فیلد your-subject که سومین فیلده رو بگیریم، باید index 2 رو انتخاب کنیم.

ساختار وریبل ما این‌جوری می‌شه:
response.2.value

اما چون ممکنه توی فرم تو ترتیب فیلدها فرق کنه، باید با دقت جای درستش رو پیدا کنی. فرض کنیم your-subject چهارمین فیلده، پس index می‌شه 3.

در نتیجه، متغیری که باید بسازی، به شکل زیر می‌شه:

• GTM > Variables > New > Variable Type: Data Layer Variable
• Data Layer Variable Name: response.3.value
• Variable Name in GTM: مثلاً dlv - form subject

🔸 برای فرم آیدی هم یه متغیر دیگه بساز:

• Variable Type: Data Layer Variable
• Data Layer Variable Name: formId
• Variable Name in GTM: dlv - formId

هر دو متغیر رو ذخیره کن.

۲.۳ تست وریبل ها

حالا وقتشه که مطمئن بشی وریبل هایی که ساختی واقعاً کار می‌کنن.

مراحل:

1. وارد GTM شو و روی Preview کلیک کن.
2. صفحه‌ای که فرم توش هست رو دوباره باز کن.
3. فرم رو پر کن و ارسالش کن.
4. وقتی پیغام موفقیت دیدی، برگرد به تب مربوط به Tag Assistant.
5. روی ایونت cf7submission کلیک کن.
6. برو به تب Variables.
7. حالا باید وریبل هایی که ساختی (مثل dlv - form subject و dlv - formId) رو ببینی با مقدارهایی که وارد فرم کردی.

اگه مقدار وریبل ها رو درست می‌بینی، یعنی همه‌چی تا اینجای کار درست پیش رفته.

اگه تأیید بدی، بخش بعدی یعنی ساخت تگ ایونت GA4 رو شروع می‌کنم. بگم بریم؟

۳. ساخت GA4 Event Tag

حالا که تریگر و وریبل ها رو داریم، وقتشه یه تگ ایونتی GA4 بسازیم که موقع سابمیت فرم فایر بشه و دیتا رو بفرسته به گوگل آنالیتیکس.

مراحل ساخت تگ:

1. برو به Tags > New
2. تگ رو اینطوری تنظیم کن:

• Tag Type: Google Analytics: GA4 Event
• Configuration Tag: تگ کانفیگ GA4 که قبلاً ساختی (یا اگه نساختی، اول باید یه GA4 Configuration Tag با Measurement ID بسازی)
• Event Name: مثلاً بنویس form_submission (البته می‌تونی اسمش رو هر چی دلت خواست بذاری؛ مثل cf7_submit یا contact_form_sent، فقط مطمئن باش با استانداردهای GA4 همخوانی داشته باشه)

حالا بخش Event Parameters:

 پارامتر                                      مقادیر

اختیاری: می‌تونی هر فیلدی از فرم رو که توی Data Layer هست هم اضافه کنی، البته تا وقتی اطلاعات شناسایی کاربر (PII) نباشه.

حالا تریگر رو به این تگ اضافه کن:

• Trigger: cf7submission (همون Custom Event تریگری که ساختیم)

تگ رو ذخیره کن.

۴. تست نهایی

وقتشه مطمئن بشیم همه‌چی کار می‌کنه:

1. دوباره وارد Preview Mode شو.
2. صفحه‌ای که فرم توش هست رو باز کن.
3. فرم رو پر کن و ارسال کن.
4. وقتی فرم با موفقیت ارسال شد، برگرد به تب Tag Assistant.
5. روی ایونت cf7submission کلیک کن.
6. حالا باید ببینی تگی که ساختی با موفقیت فایر شده.
7. روی اون تگ کلیک کن و برو به تب Values، اونجا می‌تونی ببینی چه دیتایی فرستاده شده.

وقتی تگ توی بخش Fired Tags ظاهر شد، برو به قسمت DebugView در GA4 و سعی کن دستگاه خودت رو از منوی بالا سمت چپ انتخاب کنی (اگه چند تا دستگاه اونجا لیست شده بودن).

بعد از اون باید شروع کنی به بررسی ایونت‌هایی که از طرف دستگاهت ارسال می‌شن.

روی ایونتی که ست کردی کلیک کن، تا پارامترهایی که همراهش ارسال شدن رو ببینی. روی هر کدوم از این پارامترها هم می‌تونی کلیک کنی تا مقدارش رو چک کنی.

اما کارمون هنوز تموم نشده!
حتی اگه پارامترهای کاستوم دلخواهت توی DebugView نشون داده بشن، توی گزارش‌های استاندارد GA4 (یا توی Analysis Hub) دیده نمی‌شن.
اگه می‌خوای ازشون استفاده کنی یا ببینیشون (که احتمالاً می‌خوای)، باید اون‌ها رو از طریق منوی Custom Definition ثبت (register) کنی.

۵. ثبت کاستوم دایمنشن (برای دیدن پارامترها در GA4)

اگه می‌خوای این پارامترهایی که به ایونت وصل کردی (مثل form_id یا form_subject) رو توی گزارش‌های GA4 ببینی، باید اونا رو به‌عنوان کاستوم دایمنشن ثبت کنی.

مراحل:

1. برو به Google Analytics > Admin
2. از ستون Property، روی Custom Definitions کلیک کن
3. روی Create Custom Dimension بزن

1. این‌طوری پر کن:

• Dimension name: مثلاً Form Subject
• Scope: Event
• Event parameter: form_subject (یا هر اسمی که توی GTM وارد کردی)

۶. ثبت ایونت بعنوان Key Event 

اگه بخوای این ایونت (مثلاً form_submission) به‌عنوان یه کانورژن توی GA4 ثبت بشه:

1. برو به Google Analytics > Admin > Events
2. ایونت form_submission رو پیدا کن (یا Add Event دستی بزن)

1. گزینه‌ی Mark as conversion رو فعال کن

7. گزارش‌گیری از فرم‌های سابمیت شده در GA4

حالا که ایونت‌ها رو از طریق Google Tag Manager به GA4 می‌فرستی، وقتشه ببینی چطوری می‌تونی گزارش‌شون رو توی رابط GA4 ببینی، تحلیل کنی، و حتی با صفحات مختلف وب‌سایتت مقایسه‌شون کنی.

🎯 نمایش ایونت‌ها در بخش استاندارد GA4

وقتی یه ایونت (مثلاً form_submission) به GA4 ارسال بشه، باید تا ۲۴ تا ۴۸ ساعت صبر کنی تا توی گزارش‌های استاندارد ظاهر بشه.

مسیری که باید بری:

Reports > Engagement > Events

اینجا لیست تمام ایونت‌هایی که فایر شدن رو می‌بینی. ایونت مربوط به فرم (مثلاً form_submission) رو انتخاب کن تا اطلاعات بیشتری ببینی.

📊 استفاده از Explore (Free Form Report)

برای تحلیل دقیق‌تر و دیدن پارامترهایی که با ایونت فرستادی، از ابزار Explore استفاده کن.

حالت اول: اگر از یک اسم ایونت ثابت مثل form_submission استفاده کردی

مراحل:

1. برو به Explore > + Blank > Free Form
2. از ستون Variables، روی دکمه ➕ کنار Dimensions بزن و موارد زیر رو اضافه کن:
   • form_id (اگه به‌عنوان Custom Dimension تعریفش کردی)
   • form_subject
   • page_path
   • event_name
3. حالا توی ستون Tab Settings:
   • بخش Rows: بذار form_id یا form_subject
   • بخش Columns: خالی بمونه یا مثلاً page_path بذار
   • بخش Values: Event count و Active users
4. توی Filters هم این‌ها رو وارد کن:
   • event_name exactly matches form_submission

📌 نتیجه: می‌تونی ببینی کدوم فرم، چند بار ارسال شده و چه موضوعی داشته.

حالت دوم: اگر برای هر فرم اسم ایونت متفاوت گذاشتی (مثلاً form_contact, form_footer, ...)

تو این حالت هم مراحل مشابهه، فقط توی فیلتر، بذار:

• event_name contains form_

و توی Rows، تو باید event_name رو بزاری تا بتونی ببینی کدوم فرم‌ها چقدر استفاده شدن.

🎯 تحلیل فرم‌ها در کنار صفحات سایت

اگه می‌خوای بدونی مثلاً فرم «تماس با ما» روی کدوم صفحات بیشتر ارسال شده:

1. توی بخش Dimensions باید page_path و form_id رو با هم استفاده کنی.
2. فیلتر event_name = form_submission
3. و توی بخش values متریک Event count بیاد.

جمع بندی:

 اگه توی این روند به مشگل خوردی حتما کامنت بزار.