ترکینگ Gravity Forms با گوگل تگ منیجر و GA4

اول از همه چطور بفهمیم که با یه Gravity فرم مواجهیم؟

برای اینکه بفهمی تو یه صفحه وب‌سایتی با فرم Gravity مواجهی، این مراحل رو دنبال کن:

1. بررسی سورس کد صفحه: مرورگرت رو باز کن (مثلاً کروم)، راست‌کلیک کن و "View Page Source" رو انتخاب کن. تو کد HTML دنبال تگهایی مثل <form> بگرد که شامل کلاس‌هایی مثل gform_wrapper یا gform_body باشن. این‌ها نشونه‌های فرم Gravity هستن.
2. بررسی با developer tools: توی مرورگر کروم از منوی سه نقطه بالا سمت راست گزینه more tools رو انتخاب کن و بعد developer tools رو بزن.( یا به جای کل این مراحل F12 رو بزن)، تب "Elements" رو چک کن. اگه ساختار HTML شامل gform_* (مثل gform_fields یا gform_submit_button) باشه، احتمالاً فرم Gravity داری.
3. رفتار فرم: اگه فرم بعد از ارسال، پیام موفقیت یا ریدایرکت با هوک‌های جاوااسکریپت مثل gform_confirmation_loaded رو نشون می‌ده، نشونه دیگه‌ای از Gravity Form هست.
4. بررسی آدرس یا مستندات سایت: اگه به پنل وردپرس سایت دسترسی داری، تو بخش فرم‌ها (Forms) چک کن. یا از دولوپر سایت بپرس که از Gravity Forms استفاده می‌کنه.

گراویتی فرم چیه؟

Gravity Forms یه افزونه وردپرس کاستومایز شونده هست که بهت اجازه می‌ده فرم‌های ساده یا پیچیده رو به وب‌سایت، بلاگ، یا هر چیزی که با WP راه‌اندازی کردی اضافه کنی.
با این حال، مثل هر تعامل مهم دیگه، ترکینگ ارسال فرم‌ها لازمه تا رفتار بازدیدکننده‌ها رو بهتر بفهمی. توی این پست وبلاگی، بهت نشون می‌دم چطور Gravity Forms رو با گوگل تگ منیجر ترکینگ کنی و ایونت‌های ارسال فرم موفق رو به GA4 بفرستی.

 #۱. چطور Gravity Forms رو با گوگل تگ منیجر ترکینگ کنیم
اگه عجله داری، فقط مراحل پایین رو سریع رو دنبال کن. ولی اگه می‌خوای بفهمی چطور راه‌های مختلف رو ارزیابی کنی، پست وبلاگی کامل رو بخون.

 #۱.۱. ایونت لیسنر Gravity Forms

یه تگ کاستوم HTML رو بساز و کدهای فایل پایین رو توش کپی کن:

gform code 1.txt
تگ رو تنظیم کن که تو همه صفحاتی که فرم Gravity توشون جاسازی شده (مثلاً page path شامل «contact-us» باشه) فایر بشه.  کد جاوااسکریپتی داخل فایلی که بالا گذاشتم به ارسال‌های موفق فرم گراویتی گوش می‌ده و یه ایونت دیتالیری به اسم formSubmission رو پوش می‌کنه.

نکته خیلی مهم: این ایونت لیسنر از فرم‌های مبتنی بر AJAX Gravity Forms پشتیبانی می‌کنه. لیسنر اگه صفحه بعد از ارسال موفق رفرش نشه، درست کار می‌کنه. اگه ارسال موفق کاربر رو به صفحه جداگانه «thankyou» بفرسته، باید یه کد دیگه به تنظیمات فرم اضافه کنی. ادامه بلاگ پست  رو بخون تا بیشتر متوجه این قضیه بشی.

 #۱.۱.۱. اگه فرم Gravity من صفحه رو رفرش کنه یا بازدیدکننده رو به صفحه «thankyou» ریدایرکت کنه چی؟
احتمالاً متوجه این قضیه شدی که ایونت لیسنر Gravity Form که بالا دادم تو این موقعیت‌ها کار نمی‌کنه. به جاش، باید به وردپرس لاگین کنی، فرم رو پیدا کنی و یه تیکه کد کوچک اضافی اضافه کنی تا لیسنر ارسال موفق فرم رو شناسایی کنه.

تو وردپرس:
- برو به بخش Forms و فرم موردنظرت  که می‌خوای ترکینگ کنی رو باز کن.
- بعد به تنظیماتش برو.
- روی گزینه Confirmations کلیک کن.
- معمولاً نوع تأیید «text» هست و باید یه کد کوچک جاوااسکریپت اونجا اضافه کنی. این کد یه ایونت دیتالیر به اسم «formSubmission» می‌سازه که بعداً به‌عنوان تریگر ازش استفاده می‌کنیم.

کد تکه‌ای که باید بعد از پیام تأیید اضافه کنی اینه:
gform with redirect.txt

دو نکته مهم رو به خاطر داشته باش:
- قبل از چسبوندن کد، ویرایشگر متن رو به حالت «text» (به جای «visual») تغییر بده.
- گزینه automatic formatting رو تو اون ویرایشگر غیرفعال کن (یه چک‌باکس تو پایین هست). وگرنه کد خراب می‌شه.

چطور تست کنی که کار می‌کنه؟ تنظیمات بخش Confirmations  رو ذخیره کن، حالت پیش‌نمایش و دیباگ GTM رو فعال کن، توی وبسایت به پیج حاوی فرم برگرد و بعد از پرکردن اون فرم دکمه  ارسال رو بزن. اگه ایونت «formSubmission» رو تو کنسول پیش‌نمایش ببینی، کد درست کار می‌کنه و می‌تونی به بخش بعدی سر بزنی.

یه نکته مهم دیگه: اگه دو یا چند فرم Gravity تو یه صفحه خاص داری و این فرم‌ها صفحه رو رفرش می‌کنن، باید بعضی قسمت‌های کد window.dataLayer.push  آخری که گذاشتم رو تغییر بدی. درواقع تنها باید پارامتر فرم آیدی رو تغییر بدیم که بدونیم کدوم فرم پر شده.
تو این حالت، هر دو فرم باید کدهای متفاوتی داشته باشن. کد تنظیم‌شده فرم اول می‌تونه این‌جوری باشه:

gform 1.txt

برای فرم دوم، کدش باید شامل 'formID': '2' باشه:

gform 2.txt
چرا این کارو کردیم؟ یه بار دیگه باید تاکید کنم که آیدیهای متفاوت فرم بهت کمک می‌کنه تو دیتالیر بفهمی کدوم فرم ارسال شده.
به هر حال، اگه فرم بازدیدکننده رو به صفحه دیگه (مثلاً صفحه «ممنون») ریدایرکت کنه و نوع تأیید تو فرم Gravity‌ت «ریدایرکت» باشه، در انتهای این  بلاک پست مراحل ترکینگ این فرم‌ها رو مشخص کردم.

نکته مهم: لازمه بگم که وب‌سایتی رو هم دیدم که بعد از ارسال موفق فرم، کاربر به هوم پیج ریدایرکت می‌شه (بدون نمایش پیام ارسال موفقیت یا  thankyou page). تو این حالت، هیچ‌چیز تو این راهنما بهت کمک نمی‌کنه. تنها گزینه‌ت اینه که تنظیمات فرم رو تغییر بدی و یا پیام موفقیت به بازدیدکننده نشون بدی یا بازدیدکننده رو به به صفحه تأیید دریافت اختصاصی ریدایرکتش کنی.
 تجربه کاربر رو هم در نظر بگیر. اگه اون شخص فرم رو با موفقیت بفرسته و بعد بدون پیام موفقیت به صفحه اصلی بره، این باعث ابهام کاربر میشه.

 #۱.۲. کاستوم تریگر  و وریبل (اختیاری)
تو اکانت GTM‌ت برو به این مسیر:

Triggers>New>Custom Events

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

#۱.۳. تگ ایونت GA4
نهایتاً، داده‌ها رو با ساخت یه تگ ایونت GA4 و تنظیمات زیر به GA4 بفرست:

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

اگه بخوای، می‌تونی وریبل {{dlv – formID}} رو حذف کنی. تریگر ایونت کاستوم formSubmission که تو عنوان قبلی ساختیش رو به این تگ اختصاص بده.
تمومه! فراموش نکن که سناریوهای مختلف رو تست کنی:
- فرم رو وقتی همه فیلدهای الزامی مقدار دارن ارسال کن. نتیجه موردانتظار: تگ ایونت GA4 باید فعال بشه.
- حداقل یه فیلد الزامی رو خالی بذار و سعی کن فرم رو ارسال کنی. نتیجه موردانتظار: تگ ایونت GA4 نباید فعال بشه.
- همچنین، گزارش‌های ایونت Real-time گوگل آنالیتیکس رو چک کن، چون همه ارسال‌های موفق فرم باید اونجا قابل‌دید باشن.

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

**عضویت و دریافت کتاب الکترونیکی - راهنمای ترکینگ تبدیل**
ساخت تگ بخش آسانی از این فراینده. بیایم یکی بسازیم – بعداً تو این پست وبلاگی بهش نیاز داری.

اینجا باید یه تگ ایونت GA4 بسازی:
- برو به تگ‌ها
- دکمه New رو بزن
- توی لیستی که میاره گزینه Google Analytics رو انتخاب کن و بعد روی Google Analytics: GA4 Event بزن
-  مژرمنت آیدی رو وارد کن.
- تو فیلد نام ایونت، من generate_lead وارد می‌کنم. شما میتونی یه اسم ایونت کاستوم ست کنی.
- بخش تریگر رو (فعلا) خالی بذار و ذخیره کن. بعداً بهش برمی‌گردیم.

نکته مهم: از generate_lead به‌عنوان نام ایونت استفاده کردم چون تو لیست ایونت‌های پیشنهادی GA4 هست. ولی اگه بخوای، می‌تونی اسم دیگه‌ای بذاری.

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

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

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

الان، بیایم تریگری بسازیم که فقط تو صفحه ارسال موفق فایر بشه.
- توی گوگل تگ منیجر برو به Triggers
- دکمه New رو بزن
- نوع تریگر رو Pageviews انتخاب کن. توی تنظیمات تریگر گزینه some pageviews رو انتخاب کن.
- اگه بازدیدکننده به https://www.example.com/form/thankyou.html ریدایرکت بشه، می‌تونی یکی از این قواعد رو برای ست کردن این تریگر استفاده کنی:
- page path برابر با /form/thankyou.html.
- یا page URL شامل /form/thankyou.html باشه. سعی کن تا حد امکان گزینه های فایر شدن تریگر رو محدود کنی . فقط گذاشتن «thankyou» به‌عنوان قانون برای این تریگر ایده خوبی نیست چون ممکنه صفحات دیگه‌ای باشن که این کلمه تو URL‌شون باشه (و ما نمی‌خوایم این اتفاق بیفته!)
- و فراموش نکن تریگر رو درست نام‌گذاری کنی – Pageview – Successful Form Submission. عنوان باید واضح باشه؛ وگرنه تو اکانت GTM‌ت (در درازمدت) بی نظمی ایجاد می‌شه.

ستاپ رو تست کنیم
این تریگر جدید رو به تگ GA4 که اول این پست وبلاگی ساختی وصل کن.
حالت پریویو و دیباگ رو باز (یا رفرش) کن که یه تب جدید مرورگر رو برات باز میکنه.
بعد فرم رو پر کن و ارسال کن. بعد از ارسال موفق، به  thankyou page ریدایرکت می‌شی – اگه تگ ایونت GA4 فعال بشه، کارت عالیه!  اگه مشکلی پیش اومد، فرم دیگه‌ای تو وب‌سایتت رو امتحان کن (تا ببینی تگ تصادفاً فایر نشده باشه).
باید  دیباگ ویوی GA4 رو هم چک کنی.
اگه چند فرم با thankyou pageهای متفاوت داری، نیازی به ست کردن پارامترهای کاستوم برای تگ ایونت GA4 نیست. GA4 به‌طور خودکار page_location رو ترکینگ می‌کنه و می‌تونی ارسال‌ فرم های مختلف رو با دایمنشنی مثل مسیر صفحه از هم متمایز کنی.
اگه برعکس، چند فرم با یه thankyou page یکسان داری، باید این کار رو بکنی:
- همه این نکات رو چک کن و ببین می‌تونی یه وریبل با شناسه فرم (مثلاً آیدی فرم، نام فرم و غیره) بسازی و ازش استفاده کنی.
- بعد، یه پارامتر اضافی تو تگ ایونت form_submission GA4 اضافه کن. این پارامتر می‌تونه چیزی مثل form_id، form_name یا هر چیزی که خوب بتونی بشناسیش باشه:

حرف آخر:

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