آموزش خروجی گرفتن از کانتینر در گوگل تگ منیجر

در Google Tag Manager قابلیتی وجود دارد که به کاربران اجازه می‌دهد از تنظیمات یک کانتینر خروجی بگیرند و آن را در یک پروژه دیگر وارد کنند. این قابلیت یکی از مهم‌ترین امکانات GTM برای مدیریت حرفه‌ای تگ‌ها، تریگرها و متغیرها در پروژه‌های مختلف است. در این مقاله با کاربردهای اصلی ایمپورت کردن کانتینر در گوگل تگ منیجر آشنا می‌شوید و بررسی می‌کنیم در چه موقعیت‌هایی این کار می‌تواند زمان و هزینه اجرای پروژه را به شکل قابل توجهی کاهش دهد.

مزایای وارد کردن کانتینر در GTM

۱. پیاده‌سازی تنظیمات مشابه در چند پروژه مختلف

فرض کنید مجموعه‌ای فعال در حوزه سلامت، دارای ۱۰ وب‌سایت با ساختار مشابه است و برای هر وب‌سایت یک کانتینر جداگانه در تگ منیجر تعریف شده. در این شرایط، برای اعمال تنظیمات یکسان، دو مسیر وجود دارد:

• تنظیمات به‌صورت دستی و تکراری روی هر کانتینر اعمال شود
• یا ابتدا یک کانتینر به‌صورت کامل پیکربندی شده، سپس از آن خروجی گرفته و در سایر کانتینرها وارد شود. در نهایت، فقط مقادیر متغیرهای خاص مانند Measurement ID در GA4 به‌روزرسانی می‌شود.

بدیهی است که روش دوم سریع‌تر، دقیق‌تر و کاملاً مقیاس‌پذیر است.

۲. استفاده از کانتینرهای آماده همکاران

در تیم‌های مارکتینگ یا آنالیتیکس، معمولاً قالب‌های از پیش طراحی‌شده‌ای وجود دارد که توسط یکی از اعضا تهیه شده و قابل استفاده در پروژه‌های مختلف است. با وارد کردن چنین فایل‌هایی در GTM، می‌توان از دوباره‌کاری جلوگیری کرد و فرآیند راه‌اندازی را تسریع بخشید.

۳. بهره‌مندی از GTM Recipeهای آنلاین

وب‌سایت‌های تخصصی زیادی، مجموعه‌ای از کانتینرهای آماده (GTM Recipe) را ارائه می‌کنند که شامل تنظیمات رایج مانند اسکرول ترکینگ، کلیک روی دکمه‌ها، تایمر و سایر ایونت های مهم هستند. وارد کردن این فایل‌ها در GTM، راهکاری سریع و قابل اتکا برای پیاده‌سازی این قابلیت‌ها است.

۴. مدیریت نسخه‌های مختلف پروژه (توسعه، آزمایشی و اصلی)

در بسیاری از پروژه‌ها، محیط‌های مجزایی برای توسعه (Development)، پیش‌نمایش (Staging) و اجرای نهایی (Production) تعریف می‌شود. با استفاده از امکان خروجی گرفتن از کانتینر در یکی از این محیط‌ها و وارد کردن آن در محیط دیگر، می‌توان ضمن حفظ دقت، روند استقرار تنظیمات را به‌شکل مؤثری مدیریت کرد.

مراحل وارد کردن یک کانتینر در Google Tag Manager

در این بخش به‌صورت گام‌به‌گام با فرآیند وارد کردن یک فایل کانتینر (فرمت JSON) در GTM آشنا می‌شویم. این فایل می‌تواند از منابع مختلفی مانند کتابخانه GTM Recipes تهیه شده باشد.

مرحله ۱: ورود به بخش Admin و انتخاب گزینه Import Container

در پنل مدیریت کانتینر موردنظر در GTM وارد بخش Admin شوید و روی گزینه Import Container کلیک کنید.

مرحله ۲: انتخاب فایل کانتینر (JSON)

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

مرحله ۳: انتخاب Workspace

در گام بعدی، باید مشخص کنید که فایل کانتینر در کدام Workspace وارد شود. اگر تاکنون با مفهوم Workspace کار نکرده‌اید، احتمالاً در حال حاضر فقط از Default Workspace استفاده می‌کنید.

در این صورت، روی گزینه Existing در بخش «Choose workspace» کلیک کرده و Default Workspace را انتخاب کنید.

مرحله ۴: انتخاب نوع واردسازی (Import Option)

در این مرحله با دو گزینه مواجه می‌شوید:

Overwrite (بازنویسی کامل)

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

Merge (ادغام)

این گزینه باعث می‌شود که تگ‌ها، تریگرها و متغیرهای جدید به کانتینر موجود اضافه شوند بدون اینکه موارد قبلی حذف شوند.

در صورت وجود تداخل (یعنی اگر یک تگ یا متغیر جدید، نامی مشابه با یکی از آیتم‌های موجود داشته باشد)، GTM دو انتخاب به شما می‌دهد:

• Overwrite: آیتم قبلی حذف و آیتم جدید جایگزین می‌شود.
• Rename: آیتم جدید با نام متفاوت (مثلاً با پیشوند «Copy of…») وارد می‌شود و آیتم قبلی باقی می‌ماند.

پس از انتخاب هرکدام از این گزینه‌ها، GTM یک پیش‌نمایش از تغییراتی که در کانتینر ایجاد خواهد شد نمایش می‌دهد تا بتوانید نتیجه نهایی را بررسی کنید.

در صورت تمایل، می‌توانید روی لینک View Detailed Changes کلیک کنید تا لیست دقیق آیتم‌هایی که قرار است اضافه یا حذف شوند را مشاهده کنید.

مرحله ۵: تأیید و نهایی‌سازی

در نهایت، روی دکمه Confirm کلیک کنید تا فرآیند واردسازی فایل کانتینر به پایان برسد.

مرحله نهایی: بررسی با حالت Preview

پس از انجام واردسازی، پیشنهاد می‌شود بلافاصله روی دکمه Preview کلیک کرده و تغییرات را در سایت بررسی کنید.

نصب گوگل تگ منیجر، اولین قدمی است که برای بهره‌مندی از مزایای این ابزار دیجیتال مارکتینگ باید بردارید. بنابراین اگر قصد دارید مدیریت تگ‌های مورد نیاز جهت انجام فعالیت‌های بازاریابی به عهده خودتان باشد و در سریع‌ترین زمان انواع ترکینگ کدها را در سایت قرار دهید و ایونت‌های جدید تعریف یا ویرایش کنید؛ در ادامه این مطلب همراه من باشید.

همان‌طور که در مقاله گوگل تگ منیجر چیست بیان شد؛ GTM به شما کمک می‌کند تا بدون نیاز به یک دولوپر یا توسعه دهنده، انواع ترکینگ کدها را در سایت قرار دهید و ویرایش کنید. در این راهنما، نحوه نصب صحیح Google Tag Manager را در وب سایت خود توضیح خواهم داد.

مراحل نصب گوگل تگ منیجر؛ آموزش تصویری

مرحله اول: وارد حساب Google خود شوید

برای نصب گوگل تگ منیجر، باید وارد آدرس tagmanager.google.com. شوید و از طریق حساب کاربری گوگل خود یک اکانت تگ منیجر بسازید و وارد آن شوید. لطفا توجه داشته باشید که برای استفاده از ابزارهایی مانند GTM و آنالیتیکس، به یک حساب گوگل نیاز خواهید داشت.

مرحله دوم: اکانت و کانتینر تگ منیجر ایجاد کنید

روی گزینه Create Account کلیک کنید. تنظیمات حساب تگ منیجر را مشابه با آنالیتیکس، می‌توانید در دو سطح انجام دهید؛ سطح اکانت و سطح کانتینر (Container). شما می‌توانید چندین اکانت  و در هر اکانت، می‌توانید چندین کانتینر داشته باشید.

کانتینر در گوگل تگ منیجر، مرکزی است که تمام قطعه کدهای قرار داده شده در سایت از طریق GTM را در خود نگه می‌دارد.

نکته مهم: در انتخاب نام اکانت و کانتینر تگ منیجر، دقت کنید. بهتر است نام هر دو را مرتبط با کسب و کار و یا آدرس سایت انتخاب کنید.

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

بعد از انجام تنظیمات مربوط به اکانت، می‌توانید اسم کانتینر و پلتفرم که قصد نصب گوگل تگ منیجر روی آن را دارید، انتخاب کنید. در این مرحله می‌توانید آدرس سایت را به عنوان اسم کانتینر انتخاب کنید. سپس روی گزینه Create کلیک کنید.

در مرحله بعد، قوانین و شرایط استفاده از این ابزار نمایش داده می‌شود؛ باید آنها را بپذیرید و روی Yes کلیک کنید. بعد از انجام این کار، اکانت گوگل تگ منیجر به همراه یک کانتینر، ساخته می‌شود.

در مرحله بعد، پیامی حاوی کدهای مخصوص برای نصب گوگل تگ منیجر به شما نمایش داده می‌شود. اگر به هر دلیلی این پیغام را نمی‌بیند؛ می‌توانید از طریق Google Tag Manager ID، در بالای صفحه و کنار (Workspace Changes: )، به آن دسترسی داشته باشید.

مرحله سوم: کدهای نصب گوگل تگ منیجر را در سایت قرار دهید

پاپ آپی که پیش از این به آن اشاره شد، حاوی دو قطعه کد است که اولی باید قبل از بسته شدن تگ <head> قرار گیرد و دومی دقیقا بعد از تگ <body> در سایت قرار گیرد. برای انجام این کار، شما باید یا به سورس کد سایت دسترسی و با کدهای HTML تا حدی آشنایی داشته باشید و یا از افزونه گوگل تگ منیجر برای وردپرس استفاده کنید.

روش‌های نصب کد گوگل تگ منیجر روی سایت

روش‌های مختلفی برای قرار دادن کدهای نصب گوگل تگ منیجر روی سایت وجود دارد.

نصب از طریق دولوپر یا توسعه دهنده سایت

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

نصب از طریق افزونه‌های وردپرس

اگر از سیستم‌های مدیریت محتوای رایج مانند وردپرس، شاپیفای و… استفاده می‌کنید؛ می‌توانید برای نصب گوگل تگ منیجر از افزونه‌های مختلفی که برای انجام این کار وجود دارد؛ استفاده کنید. به عنوان مثال، اگر از وردپرس به عنوان CMS استفاده می‌کنید، افزونه Google Tag Manager برای وردپرس توسط Thomas Geiger را توصیه می‌کنم. در ادامه روش نصب گوگل تگ منیجر از طریق افزونه وردپرس را به شما عزیزان آموزش می‌دهم.

• وارد پیشخوان وردپرس سایت شوید.
• روی گزینه افزونه‌ها و سپس افزودن کلیک کنید.
• در قسمت جستجو، عبارت Google Tag Manager را وارد کنید.
• روی گزینه نصب کلیک کنید. (مطمئن شوید که این افزونه با وردپرس شما سازگار است.)

• بعد از نصب، روی گزینه “فعال نمایید” کلیک کنید.
• سپس به صفحه افزونه‌های نصب شده بروید و روی تنظیمات افزونه GTM4WP کلیک کنید.
• در صفحه‌ای که نمایش داده می‌شود، در اولین کادر، باید کد گوگل تگ منیجر را وارد کنید. این کد کجاست؟ کنار بخش Workspace Changes. روی آی دی تگ منیجر کلیک کنید و در صفحه‌ای که نمایش داده می‌شود، مشابه با تصویر زیر، آدرس کانتینر را کپی کنید و در کادر قرار دهید. در قسمت دوم، باید جایگاه پیشنهادی برای نصب کد دوم، درواقع کدی که قرار دادن آن در سایت ضروری نبود و بهتر بود که در بخش body قرار گیرد؛ را انتخاب کنید. با استفاده از افزونه GTM4WP، کد اول که کد اصلی و ضروری بود، در بخش head سایت قرار می‌گیرد.

• سپس روی گزینه “ذخیره تغییرات” کلیک کنید.

توجه: بعد از نصب و انجام تنظیمات مربوط به نصب گوگل تگ منیجر در سایت، به افزونه GTM4WP از طریق منوی تنظیمات در پیشخوان وردپرس دسترسی خواهید داشت.

چرا باید کد Google Tag Manager را در بخش <head> قرار دهیم؟

شاید قرار دادن کد Google Tag Manager در بخش <head> سایت اجباری نباشد، اما به‌شدت توصیه می‌شود که بخش <script> این کد را در ابتدای صفحه، یعنی داخل تگ <head> قرار دهید.

دلیلش چیست؟ دقت بیشتر در ردیابی کاربران

هرچه کدهای ردیابی بالاتر در ساختار صفحه قرار بگیرند، زودتر بارگذاری می‌شوند. در نسخه‌های قدیمی‌تر گوگل تگ منیجر، پیشنهاد می‌شد کد را داخل <body> قرار دهید، اما این کار ممکن بود باعث از دست رفتن اطلاعات کاربرانی شود که پیش از بارگذاری کامل صفحه از آن خارج می‌شدند.

برای مثال، اگر وب‌سایت شما خیلی دیر لود شود و بارگذاری آن چند ثانیه طول بکشد، اجرای GTM در <body> با تأخیر شروع می‌شود. اما اگر آن را در <head> قرار دهید، اجرای آن بسیار سریع‌تر آغاز می‌شود و در نتیجه، می‌توانید رفتار تعداد بیشتری از بازدیدکنندگان را ثبت و تحلیل کنید.

فرصت ثبت کاربرانی که خیلی زود از سایت خارج می‌شوند

یکی از مزایای مهم این کار، امکان تحلیل دقیق‌تر نرخ پرش (Bounce Rate) است. با اجرای زودهنگام GTM، می‌توانید کاربرانی را که حتی قبل از لود کامل صفحه خارج می‌شوند هم شناسایی کنید.

یادتان باشد: هرچه کدهای ردیابی پایین‌تر در کدهای سایت قرار بگیرند، دیرتر اجرا می‌شوند. و همین تأخیر می‌تواند باعث از دست رفتن بخشی از دیتاهای ارزشمند شما شود.

چگونه بفهمیم Google Tag Manager به‌درستی نصب شده است؟

پس از اینکه کد Google Tag Manager (GTM) را در صفحات سایت‌تان قرار دادید، باید مطمئن شوید که این کد واقعاً به‌درستی نصب شده است. برای این کار، چند روش ساده و کاربردی وجود دارد که در ادامه به آن‌ها می‌پردازیم:

۱. مشاهده سورس صفحه

یکی از سریع‌ترین روش‌ها برای بررسی نصب GTM این است که روی پس‌زمینه سایت خود کلیک راست کرده و گزینه‌ی View Page Source (مشاهده کد منبع صفحه) را انتخاب کنید.
در صفحه‌ی بازشده، با فشردن کلیدهای ترکیبی Ctrl + F عبارت gtm.js را جستجو کنید.
اگر این عبارت را پیدا کردید، به احتمال زیاد کد GTM در صفحه شما قرار گرفته است.

۲. فعال‌سازی حالت پیش‌نمایش (Preview) و دیباگ

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

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

اشتباهات رایج در نصب Google Tag Manager

نصب Google Tag Manager (یا به اختصار GTM) در ظاهر کار ساده‌ای به نظر می‌رسد؛ اما در عمل، برخی اشتباهات رایج باعث می‌شوند این ابزار به‌درستی عمل نکند یا حتی به‌کلی از کار بیفتد. در ادامه، به تعدادی از خطاهای پرتکرار که هنگام نصب GTM دیده‌ام می‌پردازم:

۱. به‌هم‌ریختن علامت نقل‌قول در کد

یکی از اشتباهات رایج، زمانی اتفاق می‌افتد که بازاریاب‌ها کد GTM را از پنل گوگل کپی می‌کنند و از طریق نرم‌افزارهایی مثل Microsoft Word یا Google Docs برای توسعه‌دهنده‌ها ارسال می‌کنند. این نرم‌افزارها اغلب علامت‌های نقل‌قول (quotation marks) موجود در کد را به‌طور خودکار تغییر می‌دهند. نتیجه؟ کدی که دیگر معتبر نیست و اجرا نمی‌شود.

برای جلوگیری از این مشکل، توصیه می‌کنم همیشه کد را از طریق ابزارهای متنی ساده مثل Notepad، VS Code یا حتی پلتفرم‌هایی مانند GitHub یا Pastebin ارسال کنید. این ابزارها تغییرات ناخواسته‌ای در ساختار کد ایجاد نمی‌کنند.

۲. قرار ندادن قطعه کد GTM در همه صفحات سایت

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

در سایت‌های مدرن، معمولاً این موضوع با قرار دادن کد در فایل‌هایی مثل header.php یا بخش‌های مشترک قالب (مثل Layout در پروژه‌های React یا Next.js) مدیریت می‌شود. اما همچنان توصیه می‌کنم بررسی کنید که کد GTM در تمام صفحات وب‌سایت شما بارگذاری می‌شود. این موضوع مخصوصاً برای کسب‌وکارهای ایرانی که از سیستم‌های مدیریت محتوای بومی یا قالب‌های اختصاصی استفاده می‌کنند، اهمیت بیشتری دارد.

سوالات متداول درباره نصب گوگل تگ منیجر

در حالت ایده‌آل و توصیه‌شده، باید کد Google Tag Manager را به شکل زیر در ساختار سایت خود قرار دهید:

• بخش <script> را در قسمت <head> سایت قرار دهید (معمولاً دقیقاً قبل از بسته شدن تگ </head>).
• بخش <noscript> باید بلافاصله بعد از تگ <body> درج شود.

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

آیا می‌توان تگ <noscript> را در جایی غیر از ابتدای <body> قرار داد؟

بله، امکان‌پذیر است.

این وضعیت اغلب زمانی رخ می‌دهد که از سیستم‌های مدیریت محتوای محدودی استفاده می‌کنید—مثل برخی سرویس‌های آماده ساخت سایت—که به شما اجازه دسترسی مستقیم به کدهای HTML سایت را نمی‌دهند. در این شرایط، معمولاً فقط یک فیلد مشخص برای وارد کردن کدهای رهگیری وجود دارد، و همه محتوای این فیلد در انتهای کد HTML سایت قرار می‌گیرد.

هرچند این روش توصیه نمی‌شود، اما همچنان می‌توان تگ‌های <script> و <noscript> مربوط به Google Tag Manager را در بخش <body> قرار داد.

اگر قصد شما اجرای تست‌های A/B یا آزمایش‌های مشابه با استفاده از GTM است، حتماً باید بخش اصلی اسکریپت را در تگ <head> قرار دهید تا اطمینان حاصل شود که تست‌ها بدون اختلال اجرا می‌شوند.

اما اگر صرفاً هدف شما فعال‌سازی Google Analytics یا رهگیری‌های پایه مشابه است، در اغلب موارد مشکلی نخواهید داشت.

با این حال باید به این نکته توجه داشته باشید که هرچه کد رهگیری در پایین‌تر از ساختار HTML قرار گیرد، اجرای آن نیز با تأخیر بیشتری انجام خواهد شد. این موضوع می‌تواند منجر به از دست رفتن بخشی از داده‌ها، به‌ویژه در بازدیدهای بسیار کوتاه، شود.

آیا می‌توانم بخش <noscript> را حذف کنم و فقط از <script> استفاده کنم؟

بله، می‌توانید.

اگر برای شما اهمیتی ندارد که برخی کاربران ممکن است JavaScript را به‌طور کامل غیرفعال کرده باشند، می‌توانید بخش <noscript> را به‌طور کامل حذف کنید. البته توجه داشته باشید که قراردادن کد noscript تگ منیجر در بخش <head> از لحاظ استاندارد HTML اشتباه است، چون عنصر <iframe> نباید در آن قسمت قرار بگیرد.

در نتیجه، اگر قصد استفاده از <noscript> را دارید، آن را در بخش <body> صفحه قرار دهید یا به‌کلی از آن صرف‌نظر کنید.

اگر چند سال پیش Google Tag Manager را نصب کرده‌ام و هر دو کد <script> و <noscript> در بخش body هستند، مشکلی وجود دارد؟

خیر، مشکلی نیست.

همان‌طور که پیش‌تر اشاره شد، تا اواخر سال ۲۰۱۶، گوگل توصیه می‌کرد که کل کد Google Tag Manager در بخش <body> قرار بگیرد. این روش هنوز هم کار می‌کند و مشکلی از این بابت وجود ندارد.

اما یک نکته را در نظر داشته باشید: اگر کد GTM در بخش body قرار بگیرد، ممکن است بخشی از داده‌های ردیابی (tracking) را از دست بدهید؛ چون بارگذاری GTM در body کمی دیرتر از زمانی انجام می‌شود که این کد در <head> قرار گرفته باشد.

بنابراین اگر منابع فنی کافی در اختیار دارید، توصیه می‌شود که بخش <script> را به <head> منتقل کنید تا داده‌ها با دقت و سرعت بیشتری ثبت شوند.

در گوگل تگ منیجر 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 را انتخاب نمایید. با انجام این کار میتوانید به آدرس اختصاصی که به این المان در صفحه اشاره دارد، دسترسی پیدا کنید.

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

1. به بخش Triggers مراجعه کرده و یک تریگر جدید از نوع All Elements Clicks تعریف کنید.
2. در قسمت شرط‌ها (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 نیز کاربرد دارد.

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

• gtm.element.parentElement.innerText – متن ساده داخل عنصر والد را بازمی‌گرداند.
• gtm.element.firstChild.id – شناسه اولین عنصر فرزند را نمایش می‌دهد.

این روش در مستندات آموزشی تیم Bounteous نیز برای ثبت مقادیر فرم‌های ارسال‌شده از طریق GTM مورد استفاده قرار گرفته است.