چطور چت/رایچت رو با گوگل تگ منیجر و GA4 ترکینگ کنیم

اگه ویجت چت تو سایتت داری، احتمالاً کنجکاوی که کاربرها چقدر باهاش تعامل دارن یا آیا روی مسیر کاربرها تأثیر داره. ولی چطور با GTM و GA4 اینو ترکینگ کنیم؟
احتمالاً به کد کاستوم نیاز داری. اگه شانس بیاری، شاید کسی قبلاً اون رو نوشته باشه. اگه نه، کار کمی پیچیده‌تر می‌شه.

 پیدا کردن لیسنر
اولین کاری که باید برای ترکینگ ویجت چت تو سایتت بکنی استفاده از تریگرهای داخلی گوگل تگ منیجر، مثل تریگرهای کلیک، هست. ولی این اون‌طور که انتظار داری کار نمی‌کنه. ویجت‌های چت معمولاً از iFrame استفاده می‌کنن و شما دسترسی خوبی به iFrame چت نداری.
به جاش، می‌خوایم ایونت لیسنر (تابعی که منتظر ایونت های خاصه و بعد کد رو در پاسخ به اون ایونت اجرا می‌کنه) پیدا کنیم که برای گوش دادن به تعامل بین چت تهیه شده و  دیتای اون تعاملات رو در دسترس دیتالیر قرار میده.
اینجا مهارت‌ بالای سرچ به کار میاد، چون باید توی گوگل بگردی تا لیسنر مناسب ابزار خاصی که ازش استفاده می‌کنی رو پیدا کنی.
بیایم یه مثال از ویجت‌ چت Smartsupp رو بهت نشون بدم. اگه تو هم از این ابزار استفاده می‌کنی، می‌تونی کد لیسنر پایین رو کپی کنی. حتی اگه از این ابزار خاص استفاده نمی‌کنی، می‌تونی مراحلی که تو ادامه این بلاگ پست گفتم رو ادامه بدی.
smartapp.txt
 لیسنر رو به GTM اضافه کن تا به اکشن های چت گوش بده
وقتی لیسنر مناسب رو پیدا کردی، به بخش تگ‌ها تو GTM برو و یه تگ جدید بساز. برای تنظیمات تگ، «Custom HTML» رو انتخاب کن و کد لیسنر رو اونجا بریز.

لیسنر رو روی تریگر «All Pages» تنظیم کن و تگ رو با اسم «cHTML – smartsupp listener» ذخیره کن.

مثل همیشه، باید تگ و تریگر رو تست کنی، پس روی Preview بزن و URL سایتت رو وارد کن. وقتی تب/پنجره جدیدی با سایتت باز شد، ویجت چت رو باز کن و یه پیام بفرست. حالا، تب پریویو مود GTM رو چک کن.
توی این مثال خاص، باید ایونت SmartsuppChatEvent رو ببینی. اگه از ابزار دیگه‌ای استفاده می‌کنی، اسم ایونت فرق می‌کنه، ولی باید بالاخره یه چیزی ببینی.

ایونت رو باز کن، می‌تونی اطلاعاتی که لیسنر جمع‌آوری کرده رو ببینی، از جمله اکشنی که ایونت به کمک پارامتر chatAction ترکینگ کرده.

تو این مورد خاص، به اکشن «message sent» میپردازیم و می‌خوایم «message received» رو نادیده بگیریم چون یه کم تکراریه.

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

تریگری بساز تا وقتی کاربر پیام چت می‌فرسته فایر بشه
چون فقط می‌خوایم وقتی کاربر پیام می‌فرسته رو ترکینگ کنیم، باید یه دیتالیر وریبل برای chatAction بسازیم، چون بهمون دقیقا می‌گه اقدام کاربر چیه.
تو GTM، به تب Variables برو و از بخش user defined variables، گزینه «جدید» رو انتخاب کن.

از لیست وریبل ها، «datalayer variable» رو انتخاب کن،  عبارت«chatAction» رو تو باکس وارد کن، و اسم وریبل رو «dlv – chatAction» بزار و ذخیره کن.

حالا به تب Triggers برو و یه تریگر جدید بساز. از لیست تریگرها،  گزینه «Custom Event» رو انتخاب کن و فیلد نام ایونت رو  با «SmartsuppChatEvent» پر کن.

توی تنظیمات این کاستوم ایونت گزینه «some custom event» رو انتخاب کن و شرط رو روی chatAction برابر با «message sent» تنظیم کن و save رو بزن. این باعث می‌شه تریگر فقط وقتی کاربر پیامی رو فرستاده فایر بشه. نام ایونت رو «custom – SmartsuppChatEvent» بذار و ذخیره کن.

برای ویجت های چت مشابه بایدحواست به مقادیر فیلدevent name و پارامتری که میخوایم ترکینگش کنیم باشه. 

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

مژرمنت آیدی رو پیست کن، که تو تگ کانفیگ GA4 کانتینر پیدا می‌شه.

انتخاب نام ایونت به تعداد ایونت‌هایی که می‌خوای ترکینگ کنی بستگی داره، مثلاً chat_closed یا chat_open. اینجا فقط می‌خوام وقتی کاربر پیام می‌فرسته ترکینگ کنم، پس اسم ایونت رو «chat» می‌زارم و تو باکس وارد می‌کنم.

برای محدود کردن تعداد دفعاتی که ایونت چت ارسال می‌شه (چون ممکنه این اتفاق تو هر صفحه چند بار اتفاق بیفته)، می‌تونیم تگ رو طوری تنظیم کنیم که فقط یک‌بار تو هر صفحه فعال بشه. مثلاً، اگه بازدیدکننده به صفحه دیگه‌ای بره، ایونت دوباره فعال می‌شه. برای این، به Advanced Settings تگ برو و از بخش  tag firing options، گزینه «یک‌بار تو هر صفحه» رو انتخاب کن.

تریگر ایونت کاستومی که قبلا ساخته بودی رو به تگ  اضافه کن. اسم تگ رو رو «GA4 event – chat» بذار و ذخیره کن.

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

چک کن که تگ زمان لاگ شدن ایونت SmartsuppChatEvent - و وقتی پارامتر chatAction مساوی با «message sent» شد - فایر بشه.

برای بررسی اینکه GA4 این داده‌ها رو چطور دریافت می‌کنه، به این مسیر برو:

 ادمین > نمایش داده‌ها > DebugView. 

DebugView ابزاریه که بهت اجازه می‌ده داده‌های ایونت Real-time رو وقتی از وب‌سایتت فرستاده می‌شن ببینی. ایونت‌های ورودی و پارامترهاشون رو نشون می‌ده و تست و رفع اشکال ترکینگت رو راحت‌تر می‌کنه.
مطمئن شو ایونت chat رو می‌بینی.

وقتی همه‌چیز خوب به نظر اومد، کانتینر GTM‌ت رو پابلیش کن. مطمئن شو از قواعد نام‌گذاری درستی استفاده کنی و به کانتینر نام و توضیحاتی بده (خودت تو آینده ازت تشکر می‌کنه).

استفاده از جاوااسکریپت (پیشرفته‌تر)
اگه ایونت لیسنر جواب نداد، می‌تونی سرچ کنی ببین ویجت چتی که توی وبسایتت هست API جاوااسکریپتی داره که بتونی با اون به تعاملات کاربرها با چت گوش بدی. من یکی برای چت‌بات Smartsupp پیدا کردم که گزینه‌هایی برای ترکینگ چند ایونت مختلف مثل message_sent، message_received و messenger_close ارائه می‌ده.
حالا برای ادامه این قضیه باید از دولوپر کمک بگیری یا از هوش مصنوعی بخوای که یه ایونت لیسنر برات بسازه.مثلا برای ابزارک رایچت خودش توضیح داده که باید یه تگ کاستوم HTML رو زمانی که ایونت raychat_ready پوش شد ران کنیم. 

                                            https://raychat.io/documentation

این تیکه کد میاد و زمانی که ایونت open لاگ بشه یه ایونتی به اسم raychat_open رو پوش میکنه. بقیه مراحل شبیه چیزی هست که بالا توضیح دادم. 

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

اگه ایونت لیسنر خاصی پیدا نکردی دنبال  API جاوااسکریپت اون ابزار چت برای ترکینگ بگرد و کار رو به دولوپر بسپار یا از هوش مصنوعی کمک بگیر.