در گوگل تگ منیجر Google Tag Manager، مجموعه‌ی گسترده‌ای از متغیرها در اختیار شماست؛ از متغیرهای از پیش‌تعریف‌شده گرفته تا آن‌هایی که خودتان می‌سازید. متغیر Click Element؛ یکی از متغیرهای داخلی یا همان Built-in variableهایی که کمتر کسی درباره‌اش صحبت می‌کند. پس اگر اهل ردیابی رفتار کاربران در سایت هستید و می‌خواهید از GTM مثل یک پرفورمنس مارکتر حرفه ای استفاده کنید، پیشنهاد می‌کنم ادامه‌ی این مطلب را از دست ندهید.

متغیر Click Element در گوگل تگ منیجر چیست؟

یکی از متغیرهای داخلی (Built-in Variable) در گوگل تگ منیجر، متغیری است به نام Click Element. این متغیر، عنصری از صفحه را که کاربر روی آن کلیک کرده، به‌عنوان خروجی برمی‌گرداند. اما نکته مهم اینجاست که به‌صورت پیش‌فرض در همه کانتینرهای جدید GTM غیرفعال است.

برای فعال‌سازی آن باید وارد مسیر زیر شوید:

Variables > Configure
و سپس گزینه Click Element را تیک بزنید.

فعال‌سازی متغیر به‌تنهایی کافی نیست

اگر صرفاً این متغیر را فعال کنید، در حالت پیش‌نمایش و دیباگ (Preview and Debug Mode) گوگل تگ منیجر، هیچ داده‌ای به شما نشان داده نمی‌شود. چرا؟ چون برای اینکه این متغیر کار کند، باید حداقل یکی از تریگرهای زیر را هم فعال کرده باشید:

All Elements Clicks
Just Links

اگر با مفهوم ترکینگ کلیک در GTM آشنایی ندارید، پیشنهاد می‌کنم در دوره آموزش گوگل تگ منیجر شرکت کنید.

تفاوت Click Element با Click URL

در نگاه اول ممکن است در حالت پیش‌نمایش گوگل تگ منیجر، خروجی این متغیر با متغیر Click URL یکی به نظر برسد. اما این تصور اشتباه است.

متغیر Click Element، آبجکت کامل مربوط به عنصر کلیک‌شده را برمی‌گرداند. این یعنی:

نه‌تنها لینک (URL) المان را برمی‌گرداند (اگر وجود داشته باشد)
بلکه تمام ویژگی‌ها (Attributes) و داده‌های دیگر آن المان را هم در اختیار دارد

حتی اگر این اطلاعات برای یک کاربر معمولی قابل مشاهده نباشد، این متغیر آن‌ها را نگه می‌دارد.

نکته مهم درباره Preview Mode

در حالت پیش‌نمایش GTM، ممکن است متغیر Click Element به‌صورت یک رشته (String) نمایش داده شود. این نمایش گمراه‌کننده است. در واقع، زیرساخت اصلی این متغیر همچنان یک (Object) است، نه رشته.

پس اگر در حال تست تگ یا تریگر هستید و دیدید که مقدار این متغیر به صورت یک رشته ظاهر شده، نگران نباشید؛ کارکرد واقعی آن تغییر نکرده است.

متغیر «Click Element» شامل چه دیتایی است؟

دیتای این متیغر از لیسنرهای پیش‌فرض ایونت های خودکار در Google Tag Manager (GTM) تأمین می‌شوند. اگر حتی یکی از تریگرهای زیر را در تگ منیجر فعال کرده باشید:

Just Links (کلیک روی لینک‌ها)
All Element Clicks (کلیک روی تمام عناصر)
Form Submission (ارسال فرم)
Element Visibility (قابل مشاهده شدن یک عنصر)

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

این لیسنرها دقیقاً چه کاری می‌کنند؟

Just Links کلیک روی لینک‌ها را ردیابی می‌کند.
All Element Clicks تمام کلیک‌های روی المان های مختلف صفحه (به‌جز عناصر داخل iFrame) را ردیابی می‌کند.
Form Submission تکمیل فرم را می‌کند.
Element Visibility بررسی می‌کند که چه زمانی یک المان خاص در صفحه نمایان می‌شود.

ارسال داده به Data Layer

وقتی این لیسنرها (Listeners) یک تعامل را شناسایی می‌کنند، یک سری داده به Data Layer ارسال می‌شود. این داده‌ها به المانی که کاربر با آن تعامل داشته مربوط هستند.

داده‌هایی که به dataLayer.push ارسال می‌شوند، معمولاً شامل کلیدهای زیر هستند:

gtm.element
gtm.elementClasses
gtm.elementTarget
gtm.elementUrl
gtm.elementId

برای مشاهده این مقادیر، کافی‌ست وارد بخش Preview و Debug در GTM شوید و به تب Data Layer سر بزنید.

این کلیدها چه کاربردی دارند؟

تمام این کلیدها به عنوان متغیرهای داخلی (Built-in Variables) در GTM قابل استفاده هستند، مانند:

Click Element
Click Classes
Click Target
Click URL
Click ID

به جز gtm.element که یک (Object) است و اطلاعات بیشتری در دل خودش دارد، بقیه کلیدها صرفاً رشته متنی (String) هستند.

متغیر Click Element تنها گزینه موجود نیست!

اگر قبلاً با Google Tag Manager (یا به اختصار GTM) کار کرده باشید، احتمالاً می‌دانید که متغیر Click Element وظیفه‌اش این است که مقدار ذخیره‌شده در Data Layer را از کلید gtm.element دریافت کند. حالا اگر چنین کلیدی اصلاً در Data Layer وجود نداشته باشد، نتیجه‌ای که این متغیر برمی‌گرداند چیزی نیست جز undefined.

اما فقط Click Element نیست که از این کلید استفاده می‌کند!

چیزی که احتمالاً بسیاری از کاربران تازه‌کار GTM از آن بی‌خبرند این است که یک متغیر داخلی دیگر هم وجود دارد که دقیقاً به همین کلید در Data Layer دسترسی دارد، به نام Form Element.

در واقع، هم Click Element و هم Form Element، هر دو به کلید gtm.element دسترسی دارند — یا اگر دقیق‌تر بگوییم، به کلیدی در Data Model دسترسی پیدا می‌کنند که با همین نام شناخته می‌شود.

جفت‌ متغیرهای Form و Click دقیقاً یکسان هستند

جالب است بدانید تمامی متغیرهایی که برای ایونت های کلیک (Click) و فرم (Form) تعریف شده‌اند، به کلیدهای یکسانی دسترسی دارند. به جدول زیر توجه کنید:

gtm.elementTarget توسط Click Target و Form Target
gtm.elementUrl توسط Click URL و Form URL
gtm.elementClasses توسط Click Classes و Form Classes
gtm.elementId توسط Click ID و Form ID
و در نهایت gtm.element توسط Click Element و Form Element

ایجاد متغیر دلخواه برای دسترسی به مقادیر مشترک در Data Layer

در کنار استفاده از متغیرهای پیش‌فرضی مانند Click Element یا Form Element، شما می‌توانید متغیرهای دلخواه خودتان را هم تعریف کنید تا به همان مقادیر دسترسی پیدا کنید.

فرض کنید می‌خواهید نسخه اختصاصی خودتان از متغیر Click Element را بسازید. برای این کار، کافی است به مسیر زیر در Google Tag Manager بروید:

Variables > New > Data Layer Variable

در قسمت Data Layer Variable Name، مقدار gtm.element را وارد کنید. این همان کلیدی است که داده‌ها در Data Layer در آن ذخیره می‌شوند.

نکته جالب اینجاست که متغیرهای Click Element و Form Element نیز دقیقاً از همین کلید استفاده می‌کنند. یعنی هر سه متغیر، به یک داده مشترک دسترسی دارند و نتیجه نهایی یکسانی را ارائه می‌دهند.

حالا شاید این سؤال پیش بیاید: “پس چرا باید خودمان یک متغیر جدید تعریف کنیم وقتی می‌توانیم از متغیرهای آماده استفاده کنیم؟” پاسخ مشخصی برایش وجود ندارد—هدف این بخش بیشتر این است که به شما نشان دهد ساختار GTM چطور کار می‌کند و چطور اجزا به هم متصل‌اند.

چه زمانی باید از متغیر Click Element در تگ منیجر استفاده کنیم؟

همانطور که گفته شد، این متغیر، دیتای المانی را (Object) را بازمی‌گرداند که کاربر با آن تعامل داشته است، مانند کلیک کردن روی یک عنصر، مشاهده یک المان یا ارسال یک فرم. بنابراین زمانی که نیاز دارید مستقیماً با یک عنصر واقعی در صفحه وب کار کنید، باید از این متغیر استفاده کنید.

کاربرد اصلی: استفاده از Click Element همراه با CSS Selectorها

یکی از رایج‌ترین سناریوهای استفاده از متغیر Click Element، در کنار CSS Selectorهاست. فرض کنید قصد دارید کلیک روی برخی عناصر مشخص در وب‌سایت را ردیابی کنید، اما هیچ‌کدام از آن عناصر شناسه (ID) منحصربه‌فردی ندارند. در چنین شرایطی، استفاده از CSS Selector می‌تواند راه‌گشا باشد.

ممکن است این پرسش مطرح شود که CSS Selector چیست؟
CSS Selector الگویی است که امکان انتخاب عناصر خاص در یک صفحه وب را فراهم می‌کند.

در فرآیند پیاده‌سازی ردیابی کلیک در Google Tag Manager، یکی از سناریوهای نسبتاً پیشرفته زمانی مطرح می‌شود که بخواهیم کلیک بر روی یک دکمه بدون لینک را ردیابی کنیم. در چنین شرایطی، روش‌هایی مانند استفاده از تریگرهای مرتبط با لینک (Just Links) کاربردی نخواهند بود و باید از تریگر کلی‌تر یعنی All Element Clicks بهره گرفت.

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

متن دکمه
پس‌زمینه یا قاب گرافیکی دکمه

در صورتی که این دو بخش دارای شناسه (ID) یا کلاس (Class) مشابه باشند، می‌توان از متغیرهایی نظیر Click ID یا Click Classes استفاده کرد. به‌عنوان مثال، اگر متن دکمه دارای ID با نام AddToCartText و پس‌زمینه دارای ID با نام AddToCart باشد، امکان تعریف تریگری با شرطی مانند “شروع ID با AddToCart” وجود دارد.

اما در مواردی که عناصر مورد نظر فاقد شناسه یا کلاس قابل استفاده باشند و یا ساختار آن‌ها پیچیده‌تر از این باشد (مثلاً از چندین عنصر داخلی تشکیل شده باشند)، لازم است از راهکار حرفه‌ای‌تری استفاده کنیم.

راهکار پیشنهادی: استفاده از CSS Selector برای ردیابی کلیک

به جای تعریف چند تریگر برای هر عنصر داخلی، رویکرد بهینه این است که یک تریگر واحد ایجاد کرده و از CSS Selector برای تعیین عناصر هدف بهره ببریم.

ساده ترین کاری که در این مرحله میتوانید انجام دهید این است که روی المان مورد نظر در بخش inspect راست کلیک کنید و سپس گزینه Copy Selector را انتخاب نمایید. با انجام این کار میتوانید به آدرس اختصاصی که به این المان در صفحه اشاره دارد، دسترسی پیدا کنید.

برای ساخت تریگر با استفاده از این آدرس، مراحل زیر را دنبال کنید:

به بخش Triggers مراجعه کرده و یک تریگر جدید از نوع All Elements Clicks تعریف کنید.
در قسمت شرط‌ها (Trigger Conditions)، تنظیمات زیر را اعمال کنید:

Variable: Click Element  
Condition: Matches CSS Selector  
#product-401 > div:nth-child(1) > div.row.product-image-summary-wrap > div > div > div.col-lg-8.col-12.col-md-6.text-right.summary.entry-summary > div > form > button

در این تنظیمات از متغیر Click Element استفاده می‌شود، چرا که قصد داریم کل عنصر کلیک‌شده را با Selector تطبیق دهیم. این روش تنها با همین متغیر قابل استفاده است.

آشنایی با شیء `gtm.element` در گوگل تگ منیجر

در این بخش پایانی از مقاله، به بررسی دقیق‌تری از یکی از قابلیت‌های پیشرفته گوگل تگ منیجر می‌پردازیم: شیء gtm.element. اما این آبجکت دقیقاً چه اطلاعاتی را در خود ذخیره می‌کند؟ و چگونه می‌توان به این داده‌ها دسترسی داشت، در حالی که ابزار preview و دیباگ GTM چنین امکانی را مستقیماً فراهم نمی‌کند؟

استفاده از Console برای مشاهده داده‌ها

برای مشاهده داده‌های موجود در شیء gtm.element، لازم است از ابزار توسعه‌دهنده (Developer Tools) مرورگر و به‌ویژه بخش Console استفاده نمایید. لازم است حداقل یکی از تریگرهای کلیک در صفحه فعال باشد. گزینه‌های رایج شامل موارد زیر هستند:

All Element Clicks
Just Links
Form Submission
Element Visibility

فعال‌سازی حالت Preview & Debug در GTM گرچه الزامی نیست، اما فرآیند بررسی را ساده‌تر خواهد کرد.

پس از فعال‌سازی تریگر، روی یکی از عناصر صفحه کلیک کنید. در صورتی که رویداد کلیک در پنل دیباگ GTM نمایش داده نشد، صفحه را مجدداً بارگذاری کرده و از فعال بودن تریگر اطمینان حاصل نمایید.

در این مرحله، لیستی از تمام dataLayer.push‌های اتفاق‌افتاده در صفحه قابل مشاهده خواهد بود. رویدادهایی که با gtm.click، gtm.linkClick، gtm.formSubmit یا gtm.elementVisibility آغاز می‌شوند، بسته به نوع تریگر مورد استفاده، قابل مشاهده هستند.

در صورت مشاهده چندین رویداد gtm.click، به این معناست که روی چند عنصر مختلف کلیک کرده‌اید. جهت یافتن رویداد دقیق مربوط به کلیک اخیر، عدد اختصاص داده‌شده به هر ایونت را با عدد نمایش‌داده‌شده در ابزار دیباگ GTM مقایسه نمایید (معمولاً در ابزار دیباگ، عدد یک واحد بیشتر است).

با باز کردن مثلث کنار ایونت مورد نظر در لیست dataLayer، بخشی با عنوان gtm.element قابل مشاهده خواهد بود. این بخش شامل داده‌هایی از قبیل gtm.elementId، gtm.elementClasses و سایر ویژگی‌های مرتبط با عنصر کلیک‌شده است.

با ادامه بررسی، می‌توان داده‌هایی همچون کلاس یا شناسه عنصر والد را نیز استخراج کرد. برای مثال:

مسیر gtm.element.parentElement.className کلاس عنصر والد را برمی‌گرداند.
مسیر gtm.element.parentElement.id شناسه (ID) عنصر والد را نمایش می‌دهد.

جهت بهره‌برداری از اطلاعات موجود در gtm.element، کافی است یک متغیر از نوع Data Layer Variable در GTM ایجاد نموده و مسیر کامل کلید مورد نظر را وارد نمایید. به‌عنوان نمونه:
gtm.element.parentElement.className

این متغیر مقدار کلاس عنصر والدِ عنصری را بازمی‌گرداند که کاربر روی آن کلیک کرده است. این رویکرد در سناریوهای دیگری از جمله تریگر Element Visibility یا Form Submission نیز کاربرد دارد.

سایر مسیرهای کاربردی: