همون اول باید بگم که این روش نباید اولین گزینه ترکینگ فرم با گوگل تگ منیجر باشه. هر روش دیگه ترکینگ فرم که تو این پست گفتم رو قبلش امتحان کن.
اگه دولوپرها دائم کد سایت رو آپدیت میکنن، اسکرپ DOM رو بهعنوان آخرین راهحل باید در نظر گرفته بشه. ریسکش زیاده و ممکنه سریعتر از چیزی که فکر میکنی از کار بیفته.
حتی یه تغییر کوچیک از طرف دولوپر میتونه ستاپ رو خراب کنه. تازه، این روش نیاز به دونستن زبان جاوااسکریپت و مفاهیم DOM هم داره (که بین بازاریابها خیلی رایج نیست).
تو این مثال، از وریبل المان DOM استفاده میکنیم. این یه وریبل تو گوگل تگ منیجر هست که بهت اجازه میده مستقیم از Document Object Model محتوا رو اسکریپ کنی (یعنی با کمکش میتونی هر متنی تو سایتت رو به یه وریبل تبدیل کنی و به ابزارهای مارکتینگ مثل گوگل آنالیتیکس بفرستی). ولی اول، بیا یه تگ GA بسازیم.
ساختن تگ گوگل آنالیتیکس
حتماً با کانسپت اصلی گوگل تگ منیجر آشنا هستی: هر تعاملی که میخوای ترکینگ کنی، به تگ و تریگر نیاز داره. اگه میخوای همه موارد ارسال موفق فرمها رو با گوگل آنالیتیکس 4 ترکینگ کنی، باید یه تگ گوگل آنالیتیکس و یه تریگر (قاعده) برای اجرا شدن تگ بسازی.
ساخت تگ قسمت آسونشه.
فرضم اینه که گوگل آنالیتیکس 4 رو نصب کردی و تگ کانفیگ GA4 داری. وقتشه یه تگ ایونت GA4 بسازی که تو همه مثالهای این مقاله ازش استفاده بشه.
- برو به Tags
- دکمه New رو بزن
- تو تنظیمات تگ، Google Analytics: GA4 Event رو انتخاب کن
- تو فیلد Configuration Tag، تگ کانفیگ GA4 فعلیات رو انتخاب کن یا مستقیم مژرمنت آیدی GA4 رو بهش اضافه کن. تگ ایونتی که میسازیم از بعضی تنظیمات تگ کانفیگ (مثل Measurement ID) استفاده میکنه
- تو فیلد Event Name، بیا و generate_lead رو وارد کن.
- بخش Triggering رو خالی بذار (فعلا) و Save کن. بعداً بهش برمیگردیم.
بذار سریع توضیح بدم چرا این طور عمل کردم. generate_lead رو بهعنوان نام ایونت زدم چون تو لیست ایونتهای پیشنهادی GA4هست. ولی اگه بخوای، میتونی اسم دیگهای براش بذاری.
تریگر
فرض کن تو پایین صفحه اصلی سایتم فرم "عضویت تو خبرنامه" هست.
ایمیل example@example.com رو تو اون فرم وارد کردم و Subscribe رو زدم. صفحه رفرش میشه، آدرس پیج به https://somewebsite.com/?customer_posted=true#contact_form تغییر میکنه و اون فرم کوچیک یه پیام "مرسی" نشون میده.
تو این حالت، میتونستیم راحت با تریگر Pageview صفحه "thanku" ارسال فرمها رو ترکینگ کنیم، ولی فرض کنیم آدرس (URL) صفحه تغییر نکرده. این موقعیتی عادی نیست، ولی ممکنه پیش بیاد. اینجا وریبل المان DOM به درد میخوره. میتونیم تریگری بسازیم که سایت رو اسکن کنه و دنبال پیام موفقیت "thanks for subscribing" بگرده.
اول، بیا وریبل DOM Element بسازیم که دنبال اون پیام خاص باشه. ماوس رو بالای متن پیام موفقیت ببر، کلیک راست کن و Inspect رو بزن.
یه کنسول دولوپر تولز با کلی کد HTML باز میشه. حواست باشه که کد پیام موفقیت تو کنسول انتخاب شده باشه. این پیام آیدی یونیکی نداره، پس باید از سلکتورهای CSS استفاده کنیم.
تو پایین اسکرینشات، خطی از سلکتورهای CSS مثل div.note.form-success میبینی. این سلکتورها بهمون کمک میکنن المان دقیق رو توی سایت شناسایی کنیم.
بیا یه وریبل DOM Element بسازیم و سعی کنیم متن "مرسی که سابسکرایب کردی" رو اسکریپ کنیم.
- برو به Variables
- پایین برو به user defined variables و New بزن
- نوع وریبل رو "DOM Element Variable" انتخاب کن
- روش انتخاب: سلکتور CSS
- تو فیلد انتخاب المان، div.note.form-success وارد کن
میبینی چی کار کردم؟ آخرین سلکتور CSS رو از اسکرینشات بالا زدم.
اگه تو سایت بیشتر از یه پیام موفقیت با سلکتور CSS مشابه داشته باشیم، از سلکتور طولانیتری مثل "#contact_form div div.note.form-success" (بدون علامت های نقلقول) استفاده میکردم.
اسم اتریبیوت رو خالی بذار.
تایتل وریبل میتونه DOM – Form Success Message باشه.
Save رو بزن.
نوبت تست رسیده
حالت پریویو و دیباگ رو با زدن دکمه preview توی تگ منیجر فعال کن
فرم رو سابمیت کن.
ایونت DOM Ready رو تو سابدبار سمت چپ کنسول پریویو و دیباگ انتخاب کن و تب Variables رو بزن.
اگه ارزش وریبل DOM – Form Success Message ، معادل "Thanks for subscribing" باشه، کارتو خوب انجام دادی.
عالی! حالا باید تریگری بسازیم که به وریبل DOM جدیدمون وابسته باشه.
- برو به Triggers و New بزن
- نوع تریگر رو "DOM Ready" انتخاب کن
- این تریگر رو: بعضی صفحهها اجرا بشه
- این شرط رو وارد کن: DOM – Form Success Message equals Thanks for subscribing
این یعنی تریگر فقط تو صفحههایی که پیام ارسال موفق فرم به بازدیدکننده نشون داده شد، اجرا بشه.
- تریگر رو ذخیره کن
تست همه این موارد رو فراموش نکن
این تریگر جدید رو به تگ ایونت گوگل آنالیتیکس 4 که اول پست ساختی لینک بده.
حالت پریویو و دیباگ رو باز کن (یا رفرش کن)
فرم رو پر کن و ارسال کن. بعد از ارسال موفق، تگ گوگل آنالیتیکسی که ساخته بودی باید فایر بشه (تو پریویو و دیباگ میبینی).
باید ایونتهای ورودی رو تو Debug View گوگل آنالیتیکس 4 هم چک کنی(از مسیر admin...Debugview)
حتماً فرم رو با یه خطای عمدی پر کن و ببین تگ اجرا میشه یا نه (البته که نباید اجرا بشه).
اگه اسکریپ DOM برات گزینه مناسبی نیست
یه راهنمای خیلی مفصل برای ترکینگ فرم با گوگل تگ منیجر ساختم که پر از تکنیکهای مختلف ترکینگ فرمه.
اگه سؤالی داری، تو بخش کامنتهای این پست بنویس.
دیدگاه خود را بنویسید