تریگر Element Visibility تو گوگل تگ منیجر بهت اجازه می‌ده وقتی المان خاصی تو صفحه ظاهر می‌شه، بتونی اون رو ترکینگ کنی—که واقعاً باحاله!  خوشحالم که این تریگر وجود داره چون افق‌های جدیدی تو ترکینگ باز کرده. البته اگه درست استفاده بشه.
معمولاً این تریگر برای هدف‌گیری المان ها بر اساس ID یا  CSS سلکتور استفاده می‌شه. ولی ترکینگ بر اساس متن المان چطوره؟—اینجا و اونجا این سؤال رو می‌شنوم. خب، از نظر فنی *می‌تونی* این کار رو هم بکنی.
تو این پست، یه ترفند نشون می‌دم که نباید مکررا پیاده‌ش کنی چون خیلی شکننده‌ست.
به طور کلی، ترکینگ تعامل با یه المان بر اساس متنش روش خیلی لوس (احتمالاً محکوم به شکست) هست. اگه کسی متن المان رو عوض کنه چی؟ تریگرت خراب می‌شه. اگه بازدیدکننده نسخه ترجمه شده صفحه رو تو سایتت مشاهده کنه؟ دوباره تریگرت خراب میشه. A/B تست میخوای انجام بدی؟ اگه متن المان رو تغییر بدی، تریگرت هم خراب می‌شه.
خلاصه، امروز نمی‌خوام تو یا تصمیم‌هات رو قضاوت کنم. این بار می‌خوام نشون بدم با GTM چه کارایی *می‌تونی* بکنی، هرچند *نباید* بکنی. بزن بریم!

CSS سلکتور تو تریگر Element Visibility
خب، این "ترفند" خیلی ساده‌ست. اول باید روش انتخاب المان رو مشخص کنی، یا ID یا CSS سلکتور.


اگه المان ID نداشته باشه (که اعتراف می‌کنم زیاد پیش میاد)، باید سراغ سلکتور CSS بری (که برای تازه‌کارها یه موضوع دشوار حساب می‌شه). ولی اگه می‌خوای مهارتت تو تگ منیجر رو بالا ببری، سلکتورهای CSS حتماً باید تو لیست مهارت هات باشن. باهاش می‌تونی قوانین پیچیده‌تری برای هدف‌گیری المان های خاص سایتت بسازی.
ولی چطور می‌فهمی سلکتور درسته؟ متأسفانه نمی‌تونم یه ترفند سریع برای استفاده از CSS سلکتور بنویسم  چون خروجی به کد HTML سایت بستگی داره. اینجا ده تا CSS سلکتور رایج رو بهت معرفی میکنم.

1- سلکتورهای عمومی  
این سلکتورها برای پیدا کردن المان‌ها بر اساس ویژگی‌هاشون یا موقعیتشون تو DOM استفاده می‌شن. می‌تونی سلکتورها رو با پشت سر هم گذاشتنشون ترکیب کنی. مثلاً 

div[title="someTitle"][data-gtm-event="someEvent"]   با هر المان div رو که هم ویژگی title و هم پارامتر data-gtm-event رو داشته باشه، مچ میشه.


یا مثلا someClass. یه  المان با کلاس "someClass" رو هدف میگیره، مثلاً <div class="someClass">.

 
و یا someId#  یه المان با آیدی "someId" رو هدف می‌گیره، مثلاً <span id="someId">.  


- Element - هر المان HTML با نام "Element" رو پیدا می‌کنه. مثلاً "div" همه المان‌های div تو صفحه رو می‌گیره، و "div#myId" المان <div id="myId"> رو هدف می‌گیره.  


- Element Element - این ساختار هر المان HTML که نوه المان قبلی باشه رو پیدا می‌کنه. لازم نیست رابطه والد-فرزندی باشه—فقط کافیه المان اول تو یه چارت درختی قبل از المان دوم باشه. مثلاً "span.myClass div#myId" میاد هر div#myId که نوه یه span.myClass باشه رو می‌گیره. می‌تونی به این زنجیره هر چند تا لینک که می‌خوای اضافه کنی: مثلا "div#main ol li" هر li که نوه یه ol باشه و اون ol هم نوه div#main باشه رو هدف می‌گیره.  


- Element > Element - این ساختار هر المان HTML که فرزند مستقیم المان قبلی باشه رو هدف می‌گیره. مثلاً "div#myId > a#contactUs": المان <a id="contactUs"> رو هدف می‌گیره که فرزند مستقیم <div id="myId"> هست.  


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


این سلکتورهای عمومی پایه تقریباً همه کاراییه که با سلکتورهای CSS می‌کنی، پس خوبه یاد بگیری چطور کار می‌کنن.

 2. a[href^="tel:"]  
این سلکتور هر المان لینک (<a>) که ویژگی hrefش با استرینگ "tel:" شروع می‌شه رو هدف می‌گیره، مثلا: <a href="tel:01010101">. این سلکتور برای ترکینگ کلیک روی شماره تلفن‌هایی که با پروتکل "tel:" نوشته شدن، مفیده.
می‌تونی برای لینک‌های ایمیل هم ازش استفاده کنی: a[href^="mailto:"]، 

پروتکل پیامک SMS: a[href^="sms:"]، و حتی پروتکل جاوااسکریپت که قدیمیه ولی هنوز پرکاربرده: a[href^="javascript:"] رو میتونی با این سلکتور هدف بگیری.

 3. a[href*="dmformula.ir"]  
این سلکتور هر المان لینک که ویژگی hrefش شامل "dmformula.ir" باشه رو هدف می‌گیره. پس می‌تونم باهاش کلیک روی لینک‌های داخلی سایتم رو جداگانه ترکینگ کنم.

 4. a[href$=".pdf"]  
این سلکتور هر المان لینکی که ویژگی hrefش با ".pdf" تموم بشه رو هدف می‌گیره. این برای ترکینگ لینک‌های PDF مفیده. برای ترکینگ فایل‌های دیگه، فقط واژه ".pdf" رو با نوع فایلی که می‌خوای ترکینگ کنی عوض کن.

5. div.someElement a  
اینو تو سلکتورهای عمومی گفتم، ولی یه مورد کاربردی مهم رو باید اشاره کنم.
وقتی با تریگر Click / All Elements کار می‌کنی، خوبه برای هر المانی که می‌خوای ترکینگ کنی، یه گزینه وایلدکارد اضافه کنی:
*Click Element matches CSS selector a[href*="simoahava.com"], a[href*="simoahava.com"]
این ساختار یعنی بعد از سلکتور اصلی، یه سلکتور دوم اضافه کن که هر نوع نوه اون سلکتور رو هدف بگیره. این مفیده چون تریگر All Elements دقیقاً المانی که روش کلیک شده رو هدف می‌گیره. در یه ساختار nested DOM، ممکنه گاهی چیزی غیرمنتظره باشه. مثلاً اگه لینکی مثل این داری:
کلیک روی این لینک واقعاً روی المان <span/> می‌افته. با تنظیم سلکتور به این صورت  *a[href="mailto:some@email.com"], a[href="mailto:some@email.com"]، هم کلیک روی خود لینک و هم نواده‌هاش (شامل <span>) رو هدف می‌گیری.

 6. form#myForm option:checked  
می‌تونی از سلکتور  :checked برای هدف گرفتن المان‌های انتخاب‌شده استفاده کنی. مثلاً:

 form#myForm option:checked هر <option> انتخاب‌شده تو فرم رو پیدا می‌کنه. این وقتی مفیده که بخوای بدونی کدوم گزینه تو لیست drop-down الان انتخاب شده.

 7. ()a:not  
سلکتور :not برعکس سلکتور رو هدف می‌گیره. پس سلکتوری مثل a:not([href*="dmformula.ir"]) کلیک روی هر لینکی که "dmformula.ir" تو lمقدار اتریبیوت hrefش نداشته باشه رو می‌گیره. اینجوری میتونی لینک های خروج از سایتت رو پیدا کنی.

 8. ol > li:first-child  
سلکتور :first-child المانی که اولین فرزند والدش باشه رو می‌گیره. پس ol > li:first-child اولین المان <li> تو لیست <ol> رو می‌گیره.
سلکتورهای مشابه دیگه :last-child (آخرین فرزند والد) و :nth-child(N) (Nمین فرزند والد، مثلاً :nth-child(3) سومین فرزند والد رو می‌گیره) هستن.

 9. a[data-gtm-event]  
کروشه‌ها نشون‌دهنده اتریبیوت ها هستن، و اگه علامت تساوی (=) رو نذاری، فقط چک می‌کنی المان اون اتریبیوت رو داشته باشه. a[data-gtm-event] هر المان لینک که اتریبیوت data-gtm-event رو داشته باشه هدف می‌گیره، فارغ از اینکه ارزش اون اتریبیوت چی باشه.

 10. body > div.site-container > div > div > main
این بیشتر یه ترفنده تا یه سلکتور مفید. سعی کن از زنجیره‌های سلکتور بلند و پیچیده دوری کنی. هر چی زنجیره طولانی‌تر باشه و بیشتر روی رابطه والد-فرزند مستقیم (>) تأکید کنی، امکان خراب شدت سلکتورت در آینده بیشتر می‌شه.
کافیه یه المان تو اون مسیر DOM تغییر کنه و سلکتورت دیگه کار نکنه. پس همیشه سعی کن سلکتور جنرال ولی  کافی برای هدف گرفتن دقیق چیزی که می‌خوای رو پیدا کنی.

برگردیم به یه مثال از تریگر Element Visibility:


مثال 
تو صفحه اصلی سایتم ، یه دکمه قرمز  (با کلاس‌های CSS btn-bt align-left with_icon) دارم و می‌خوام فقط یکی رو که متن شروع کنید رو داره ترکینگ کنم.

هرچند می‌تونستم با سلکتور CSS دقیق‌تر هدفش بگیرم، تو این پست می‌بینیم چطور به‌جای اون سلکتور از متن استفاده کنیم.
اول، سلکتور CSS رو انتخاب می‌کنیم. روش کلیک راست می‌کنم و Inspect Element رو می‌زنم. بعد می‌بینم چی داریم.
متن دکمه تو یه المان <span> هست که مستقیم زیر یه لینک (<a> tag) قرار داره و اون لینک از کلاس‌های btn-bt align-left with_icon استفاده می‌کنه. این مهمه: باید المان HTML رو هدف بگیری که متن اصلی توشه.

چون می‌خوایم متن دکمه رو هدف بگیریم، باید سلکتور CSS رو وارد کنیم که دقیقاً همون متن رو انتخاب کنه. تو این حالت، اولین گزینه می‌تونه a.btn-bt.align-left > span باشه.
با اینسلکتور، همه المان های <span> که بچه‌های لینک‌های (<a> tag) با کلاس‌های btn-bt و align-left هستن رو انتخاب می‌کنیم.
بیا چک کنیم این سلکتور عناصر اضافی رو نگیره. تو مرورگرت تب کنسول دولوپر تولز رو باز کن (اگه کروم و ویندوز داری، F12 بزن و Console رو انتخاب کن).
این دستور رو وارد کن

document.querySelectorAll("a.btn-bt.align-left > span")
لیستی از دو المان که با سلکتور CSS a.btn-bt.align-left > span مچ میشن برمی‌گرده. اگه این روش رو تو سایت خودت امتحان کنی، نتیجه‌ فرق میکنه.

اگه هر دو المان رو باز کنی، می‌بینی یکی متن شروع کنید رو داره:

خب، چطور تریگری بسازیم که فقط وقتی المان صفحه (که تو صفحه ظاهر می‌شه) با سلکتورمون:

 CSS a.btn-bt.align-left مطابقت داره و متن LEARN MORE ABOUT THIS COURSE رو هم داره، فایر بشه؟
باید یه شرط اضافی به تریگر Element Visibility اضافه کنی:

 شروع کنید Click Text contains (or equals)  - 

یادت باشه این شرط حساس به حروف بزرگ و کوچکه اگه با متن انگلیسی سروکارداری



کلیک وریبل تو تریگر Element Visibility

چرا  Click Text رو انتخاب کردم وقتی داریم impression رو ترکینگ می‌کنیم، نه کلیک؟

چون لیسنر Element Visibility شباهت‌هایی با لیسنرهای Click یا Form داره. وقتی المان درست رو پیدا می‌کنه، لیسنر  دیتای مرتبط با المان رو به دیتالیر می‌فرسته که ساختار دقیقش مثل چیزیه که تو تریگرهای Click یا Form می‌فرستن.

تو دیتالیر، این اطلاعات شامل کلیدهایی مثل gtm.element، gtm.elementTarget، gtm.elementClasses و غیره هست.


می‌بینی؟ شبیه دیتاییه که لیسنرهای کلیک و فرم می‌فرستن.

خب، ولی gtm.elementText کجاست؟ چطور متن عنصر کلیک‌شده رو می‌گیریم اگه تو این دیتالیر نیست؟

تو GTM چیزی به اسم gtm.elementText وجود نداره.  وقتی رو یه المان سایت کلیک می‌کنی gtm.elementText رو توی دیتالیرپوش نمی‌بینی چون وریبل‌های Click Text (یا Form Text) وریبل‌های دیتالیری نیستن. اونها در واقع وریبل های Auto Event هستن.


این نوع وریبل ها، مقادیر المان هایی که بازدیدکننده باهاشون تعامل داره (مثل کلیک، ارسال فرم یا دیدن با تریگر Element Visibility) رو برمی‌گردونن. به کمک این وریبل می‌تونی ویژگی هر المان یا متن واقعی (که بهش innerText هم می‌گن) رو بگیری.

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

نهایتاً، تریگر باید این‌جوری باشه:


(توضیح : تریگری با CSS سلکتور  a.btn-bt.align-left > span و شرط شروع کنید Text click ontains)

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


تست تریگر

حالت پیش‌نمایش و دیباگ رو رفرش کن، صفحه‌ای که روش کار می‌کنی (تو مثال خودم: صفحه اصلی سایت) رو رفرش کن و شروع به اسکرول کردن کن. شرط تریگرمون "شروع کنین Click Text matches "  بود. 

اسکرول کن تا دکمه ظاهر بشه.

یه ایونت gtm.elementVisibility  به دیتالیر فرستاده شد، و  تگ اجرا شده (چون وریبل Click Text متن موردنظرمون رو داره).


ولی چه گزینه‌های بهتری برای ترکینگ وقتی عناصر مهم تو صفحه ظاهر می‌شن هست؟

اگه این پست رو واقعاً خوندی، باید یادت باشه گفتم این روش ترکینگ قابل‌اعتماد نیست. اگه کسی (یا چیزی) متن رو تغییر بده (مثلا با ترجمه صفحه، تست A/B  و غیره)، این روش از کار می‌افته.

پس چه گزینه‌های بهتری هست؟ بدون ترتیب خاص:

#1. از دولوپر بخواه ID خاصی به المان های مهم سایت اضافه کنه تا توی تریگر Visibility ازشون استفاده کنی.  

#2. از دولوپر بخواه اتریبیوت های کاستومی مثل -data به المان های مهم اضافه کنه. می‌تونی تو تریگر Element Visibility و ترکینگ کلیک به روش کارآمدتری ازشون استفاده کنی. مثلا میتونی به دکمه ثبت نام یه اتریبیوت این شکلی اضافه کنی 

و برای ترکیتگ این المان میتونی از این CSS سلکتور وایلدکارد استفاده کنی

 *a[data-tracking-id="login"], a[data-tracking-id="login"]

#3. فقط از سلکتورهای CSS (بدون چک کردن متن عنصر) استفاده کنی. این گزینه به اندازه 1 یا 2 خوب نیست (چون اگه سلکتور CSSت به المان های زیاد و ارتباط‌هاشون با هم وابسته باشه، ریسک خرابی بالاتری داره)، ولی بازم بهتر از وابستگی به متن المان هست.

جمع بندی

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

باید ترکینگ Element Visibility بر اساس متن المان رو فقط به‌عنوان آخرین راه‌حل در نظر بگیری.

اگه نظر صادقانه‌م رو می‌خوای، می‌گم برو و هرچه سریع‌تر سلکتورهای CSS رو یاد بگیر و تو تسک های GTMت استفاده شون کن اگه به دولوپر برای اضافه کردن ID یا اتریبیوت های data-* دسترسی نداری.