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

 لیسنر AJAX کار نمی‌کنه  
هر وقت بخوام فرمی رو ترکینگ کنم، اول می‌رم می‌بینم برای کاربر نهایی چطور کار می‌کنه. فرم رو پر میکنم و می‌فرستم و چک می‌کنم ببینم:  
- به صفحه "thanku" ریدایرکت می‌شه؟  
- یا فقط پیام "ارسال موفق" رو نشون می‌ده بدون اینکه کار دیگه ای انجام بده؟  
- یا شاید تو iFrame باشه و غیره.  

روش ترکینگ فرم بستگی به این موارد داره.
در مورد المنتور، دیدم که فرم صفحه رو رفرش نمی‌کنه یا کاربر رو به جای دیگه ای نمی‌بره. فقط پیام "مرسی" نشون می‌ده. **یادت باشه:** اگه فرمت ریدایرکت می‌شه، برو سراغ عنوان آخر این مقاله که راه‌حلشو گفتم.
معمولاً وقتی فقط پیام موفقیت نشون داده می‌شه، یعنی فرم از AJAX استفاده می‌کنه و می‌تونی با این روش ترکینگش کنی. ولی این بار، این تکنیک جواب نداد.
برای همین به گزینه دیگه‌ای رو آوردم.

 تریگر Element Visibility به کمکمون میاد!  
این تریگر لحظه‌ای که یه المان خاص تو صفحه ظاهر می‌شه رو ترکینگ می‌کنه. تو مورد من، فرم المنتور هر وقت با موفقیت ارسال بشه، این پیام رو نشون می‌ده:

باید یه تریگر بسازیم و چک کنیم کار می‌کنه. تو رابط GTM برو به: Triggers > New و  تریگر "Element Visibility" رو انتخاب کن که این‌جوری باشه:

باید به گوگل تگ منیجر بگیم دقیقاً کدوم المان برامون مهمه. دو تا روش انتخاب داریم: ID یا سلکتور CSS. هنوز نمی‌دونیم کدوم بهتره، پس المان پیام رو بررسی می‌کنیم.
برگرد به سایتی که فرم المنتور توشه، روش کلیک راست کن و Inspect بزن. متأسفانه تو مورد من، پیام موفقیت بدون آیدی بود. این یعنی ID به‌عنوان روش ترکینگ کار نمی‌کنه و تنها امیدمون سلکتور CSSهست.

پس باید از این دو کلاس CSS استفاده کنیم. اگه کلاس‌های دیگه دیدی، اونا رو امتحان کن.
اون دو کلاس رو کپی کن و تو تنظیمات تریگر ٍElement Visibility پیست کن. اول روش انتخاب رو به سلکتور CSS تغییر بده. جلوی هر کلاس یه نقطه بذار و مطمئن شو بین دو کلاس فاصله اضافی نباشه.
تو CSS، نقطه یعنی کلاس المان.

نتیجه نهایی (تو این مورد خاص) می‌شه .elementor-message.elementor-message-success.
بعد یه کم پایین برو و تیک Observe DOM Changes رو بزن. این باعث می‌شه ظاهر شدن المان رو حتی اگه داینامیک باشه (نه با اسکرول) ترکینگ کنه.

اگه تو صفحه فقط یه فرم داری، تریگر رو فقط روی "once per page" ست کن. حالا بیا تست کنیم ببینیم تریگر واقعاً کار می‌کنه یا نه. ذخیره‌ش کن، حالت پریویو و دیباگ رو رفرش کن، بعد صفحه‌ای که فرم المنتور توشه رو رفرش کن.
فرم رو پر کن و ارسال رو بزن. ایونت Element Visibility تو کنسول دیباگ GTM اومد؟

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

 تگ گوگل آنالیتیکس برای ترکینگ فرم المنتور  
مرحله بعدی، فرستادن ایونت به گوگل آنالیتیکسه البته هر وقت پیام "thanku" تو صفحه ظاهر بشه. فرضم اینه که گوگل آنالیتیکس 4 رو (از طریق گوگل تگ منیجر) نصب کردی و تگ کانفیگ گوگل رو ساختی.

تو رابط گوگل تگ منیجر برو به این مسیر: 

Tags > New > Google Analytics > Google Analytics: GA4 Event و بعد این تنظیمات رو وارد کن:


من از ایونت generate_lead استفاده کردم چون گوگل برای ارسال فرم میاد و یه اسم ایونت رو پیشنهاد می‌ده. ولی "پیشنهاد" به معنی "اجبار" نیست و می‌تونی اسم دیگه‌ای رو انتخاب کنی.
بعد بخش Triggering رو بزن و تریگری که تو فصل قبل ساختی (Element Visibility) رو انتخاب کن.

تست  
همه تغییرات تو کانتینر گوگل تگ منیجرت رو ذخیره کن، حالت پریویو و دیباگ رو رفرش کن و صفحه‌ای که فرم المنتور توشه رو رفرش کن. همه فیلدها رو پر کن و ارسال رو بزن.
این موارد باید اتفاق بیفته:  
- ایونت Element Visibility باید تو حالت پریویو و دیباگ ظاهر بشه  
- روی ایونت تو کنسول دیباگ کلیک کن، باید ببینی تگ GA4 Event اجرا شده  
- حالا برو به Debugview GA4 و چک کن ایونت اونجا پیداش می‌شه. از Admin > DebugView تو سمت چپ رابط GA4 برو. روش بزن.

بعد باید دستگاهت رو پیدا کنی:
چون حالت پریویو و دیباگ GTM رو فعال کردی، همه ایونت‌های GA4ت تو Debugview معلوم می‌شه. 


چک کن generate_lead (یا هر اسم ایونتی که انتخاب کردی) توی فید پیداش می‌شه.
دلیلش اینه که generate_lead با آیکون سبز می‌بینم چون این ایونت رو به‌عنوان ایونت کلیدی مشخص کردم.
اگه Debugview برات کار نمی‌کنه،یه پست در موردش نوشتم.
همینه! وقتی ایونت رو تو Debugview دیدی، ترکینگ فرمت کار می‌کنه. برو به گوگل تگ منیجر و تغییرات رو پابلیش کن. با زدن دکمه آبی SUBMIT تو گوشه بالا سمت راست این کارو بکن.
بعد از 24-48 ساعت، ایونت generate_lead تو گزارش‌ها (از مسیر Reports > Engagement > Events) می‌بینی.

چندتا فرم المنتور تو یه صفحه داری؟  
همه عناوین قبلی این پست برای وقتی مفیدن که تو صفحه فقط یه فرم داری. ولی اگه چندتا فرم داری (و هدفشون فرق داره) چی؟ می‌خوای یه جوری فرم ها رو از هم تشخیصشون بدی، نه؟ خب، این شدنیه.
ولی برای رسیدن به محکم‌ترین راه‌حل، باید به تنظیمات فرم‌ها تو داشبورد ادمین WP دسترسی داشته باشی.
برو به ادمین وردپرس > صفحه‌ای که چندتا فرم توشه رو انتخاب کن و ویرایشگر المنتور رو باز کن. با زدن این دکمه می‌تونی این کارو بکنی.

حالا روی اولین فرم کلیک کن، تنظیماتش تو سمت چپ ویرایشگر میاد. بعد Additional Options رو بزن. فیلد Form ID رو می‌بینی. از این فیلد برای شناسایی هر فرم استفاده می‌کنیم. اطلاعات معناداری توی این فیلد بذار. اگه فرم تماس اصلیه، main-contact-form خوبه. اگه فرم جذب لید باشه، id lead-gen-ebook می‌تونه مقدار این فیلد باشه و غیره.

صفحه رو ذخیره کن، بعد برو به فرانت‌اند سایت و صفحه رو رفرش کن. هرجا تو فرم المنتور کلیک راست کن و Inspect بزن. اگه تو تب Elements دولوپر تولز مرورگرت توی درخت DOM بالا بری، یه المان شبیه این می‌بینی (شاید با کلاس متفاوت):

اینجا آیدی فرم تو فرانت اند معلومه. ولی این فقط شروع کاره. حالا باید آیدی فرم رو وقتی پیام "مرسی" بعد از ارسال موفق ظاهر می‌شه بگیریم. برای این، از تکنیک خاصی برای گرفتن المان درست استفاده می‌کنیم.

برای پیاده‌سازیش، این مراحل رو دنبال کن:  
- تگ HTML کاستوم  بساز (که مرورگرای قدیمی رو پشتیبانی کنه)  
- وریبل جاوااسکریپت کاستوم بساز که المان درست رو انتخاب کنه (به‌عنوان وریبل یوتیلیتی استفاده می‌شه)  
- وریبل جاوااسکریپت کاستومی بساز که مقدار آیدی فرم المنتور رو برگردونه  
یادت باشه برای کار کردن این راه حل، باید آیدی فرم‌ها رو جداگانه تو تنظیمات هر فرم (تو بیلدر المنتور) بذاری، مثل چند پاراگراف قبل نشون دادم.

 #1. تگ HTML کاستوم
توی این راه‌حل کدهای کاستوم خاصی که تو صفحه لود می‌شن و مرورگرای قدیمی‌تر می‌تونن بهتر پشتیبانی بشن.
با زدن تگ HTML کاستوم کار رو شروع میکنیم:elementor.txt
تگ HTML کاستوم بساز، کد رو داخلش پیست کن و تنظیمش کن که تو همه صفحه‌ها اجرا بشه.

--
#2. وریبل   
مرحله بعدی، ساخت وریبل جاوااسکریپت کاستوم با این کد هست:cjs-ut.txt
اسمشو بذار cjs find closest. خیلی مهمه اسم وریبل دقیقاً همون باشه چون تو مرحله #3 (که حساس به حروف بزرگ و کوچیکه) استفاده می‌شه.

 #3. وریبلی که آیدی فرم المنتور رو برمی‌گردونه  
و مرحله آخر، ساخت وریبلی که بعد ظاهر شدن پیام "مرسی" آیدی فرم المنتور رو برگردونه.cjs-ft.txt
اسم این وریبل رو بذار cjs elementor form id.


برای کار کردن این ستاپ، باید 3 شرط داشته باشی:  
- وریبل  (از عنوان قبل) باید cjs find closest (حساس به حروف) باشه چون همون نام تو کد JS استفاده شده  
- وریبل داخلی Click Element باید تو کانتینرت فعال باشه  
- سلکتور CSS باید گره (node) درست یعنی المان <form> واقعی رو بگیره، . تو بیشتر موارد، این سلکتور form.element-form کار می‌کنه (چون هدفمون المان فرم با کلاس elementor-formهست).

#4. بیا تست کنیم  
یه جمع‌بندی سریع از کارایی که تا حالا کردی (اگه می‌خوای چندتا فرم المنتور تو یه صفحه ترکینگ کنی) داشته باشیم:  
- باید همه فرم‌های المنتورت رو ادیت کنی و آیدی بهشون اضافه کنی  
- تگ HTML کاستوم بساز (که متد Element.matchesرو تو مرورگرای قدیمی پشتیبانی کنه)  
- وریبل  (جاوااسکریپت کاستوم) بساز که تو درخت DOM بالا بره و المان رو انتخاب کنه  
- وریبل جاوااسکریپت کاستوم دوم بساز که از وریبل اول استفاده کنه و آیدی المان فرم رو برگردونه (سلکتور CSS: form.element-form)  
حالا تست واقعی شروع میشه. بعد از تغییرات بالا، تغییرات رو تو بیلدر المنتور منتشر کن، بعد حالت پیش‌نمایش و دیباگ GTM رو رفرش کن. آخر سر، صفحه فرانت‌اند سایتت (که فرم المنتور توشه) رو رفرش کن.
فرم رو ارسال کن. تو کنسول دیباگ GTM، ایونت Element Visibility باید ظاهر بشه. روش بزن و برو تو تب Variables کنسول دیباگ. وریبل جاوااسکریپت کاستوم cjs elementor form id رو پیدا کن و مقدارش رو چک کن. باید آیدی واقعی فرم رو داشته باشه (همین آیدی که تو بیلدر المنتور وقتی فرم رو ادیت کردی زدی).
اگه همونو دیدی، می‌تونی تگ ایونت GA رو ادیت کنی و یه پارامتر کاستوم به اسم form_id اضافه کنی (اگه می‌خوای اسم دیگه‌ای هم میتونی بذاری ولی {{cjs elementor form id}} رو به‌عنوان مقدارش استفاده کن):

 #5. ثبت دایمنشن کاستوم تو GA4  
تو تنظیمات تگ، پارامتر form_id رو اضافه کردیم. این پارامتر الان تو GA4 (به‌طور پیش‌فرض) پشتیبانی نمی‌شه، پس باید به‌عنوان دایمنشن کاستوم ثبتش کنیم (اگه می‌خوای تو گزارش‌ها ببینیش).
تو گوگل آنالیتیکس 4 برو به این مسیر: Admin > Custom definitions.
custom definitions in google analytics 4

دکمه Create custom dimensions رو بزن. بعد این موارد رو وارد کن:

مطمئن شو این بعد کاستوم از اسکوپ ایونت و پارامتر ایونت form_id (همون مقداری که تو تگ ایونت گوگل تگ منیجر داری) استفاده می‌کنه.
بعد از 24-48 ساعت که این بعد رو ذخیره کنی، دیتا پر می‌شه.

یکی از جاهایی که مقدار این دایمنشن رو می‌تونی ببینی این مسیر هست: 

Reports > Engagement > Events، بعد توی فیلد سرچ  generate_lead (یا هر اسم دیگه‌ای که برای فرم المنتورت استفاده کردی) رو بزن.
---
 راه‌حل جایگزین ترکینگ - ریدایرکت 
فرم‌های المنتور به صاحب سایت اجازه می‌دن اگه فرم با موفقیت ارسال بشه، بازدیدکننده رو ریدایرکت کنن. اینو می‌تونی با کلیک روی فرم و انتخاب گزینه Actions after submit تو سایدبار چپ انجام بدی.
توی اون فیلد، Redirect رو وارد کن. این یه گزینه جدید به سایدبار اضافه می‌کنه. روش بزن و URLی که می‌خوای بهش ریدایرکت بشه رو وارد کن.

اگه فقط یه صفحه "thanku" برای همه فرم‌ها داری، بهتره یه پارامتر کوئری رو بسته به نوع هر فرم اضافه کنی.
مثلاً اگه دو تا فرم (جذب لید 1 و 2) داری که هر دو به یه صفحه example.com/thank-you/ ریدایرکت می‌شن، می‌تونی این URLهای ریدایرکت رو تو تنظیمات فرم‌ها بذاری:
- URL ریدایرکت فرم جذب لید 1: https://www.example.com/thank-you/?form-name=lead-gen1
- URL ریدایرکت فرم جذب لید 2: https://www.example.com/thank-you/?form-name=lead-gen2  
هرچند از نظر فنی بازدیدکننده‌ها به یه صفحه می‌رن، می‌تونی با کوئری پارامتر form-name  ارسال‌های موفق فرم رو از هم تشخیص بدی.
اگه می‌خوای ارزش کوئری پارامتر form-name  رو به ابزار دیگه‌ای مثل گوگل آنالیتیکس بفرستی، از URL وریبل استفاده کن.

نکات آخر  
سخت‌ترین بخش ترکینگ فرم المنتور اینه که لیسنر AJAX روش کار نمی‌کنه. پس باید روش دیگه‌ای با GA و GTM پیدا کنی.
تو این مورد، گزینه‌ت تریگر دیده‌شدن المان + یه کم کمک از سلکتورهای CSS میتونه باشه.
اگه تو یه صفحه چندتا فرم داری، مشکلی نیست. باید تنظیمات فرم‌ها رو تو بیلدر المنتور (تو ادمین WP) آپدیت کنی و آیدی بهشون اضافه کنی. بعد از این، المان درست رو میگیری و آیدی فرم رو بعد از ارسال موفق میخونی.نکته ای مونده؟ کامنت بزار.