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

ساخت تگ HTML سفارشی با Listener مخصوص AJAX در GTM

اگر در حال خواندن این مطلب هستید، احتمالاً فرمی روی سایتتان دارید که توسط تریگر پیش‌فرض «ارسال فرم» (Form Submission) در گوگل تگ منیجر پشتیبانی نمی‌شود. این فرم معمولاً به جای اینکه کاربر را به صفحه «تشکر» هدایت کند، فقط پیام موفقیت‌آمیز بودن ارسال را نشان می‌دهد، بدون آنکه صفحه واقعاً رفرش شود.

در اینجا به احتمال زیاد فرم شما از تکنولوژی AJAX استفاده می‌کند. نیازی نیست درگیر جزئیات فنی آن شوید؛ چیزی که باید بدانید این است که راهی برای شنود (Listener) رویدادهای AJAX وجود دارد.

معرفی Listener پیشنهادی برای رویدادهای AJAX

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

با وجود اینکه این کد مدت‌ها پیش نوشته شده (حتی در آن به اینترنت اکسپلورر ۹ اشاره شده)، اما همچنان به خوبی کار می‌کند.

نحوه استفاده از کد AJAX Listener در GTM

برای پیاده‌سازی این Listener کافی است کد زیر را در یک تگ HTML سفارشی (Custom HTML Tag) در Google Tag Manager قرار دهید:

<script id="gtm-jq-ajax-listen" type="text/javascript">
(function() {
 'use strict';
 var $;
 var n = 0;
 init();

 function init(n) {
   if (typeof jQuery !== 'undefined') {
     $ = jQuery;
     bindToAjax();
   } else if (n < 20) {
     n++;
     setTimeout(init, 500);
   }
 }

 function bindToAjax() {
   $(document).bind('ajaxComplete', function(evt, jqXhr, opts) {
     var fullUrl = document.createElement('a');
     fullUrl.href = opts.url;
     var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname;
     var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search;
     var queryParameters = objMap(queryString, '&', '=', true);
     var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':');

     dataLayer.push({
       'event': 'ajaxComplete',
       'attributes': {
         'type': opts.type || '',
         'url': fullUrl.href || '',
         'queryParameters': queryParameters,
         'pathname': pathname || '',
         'hostname': fullUrl.hostname || '',
         'protocol': fullUrl.protocol || '',
         'fragment': fullUrl.hash || '',
         'statusCode': jqXhr.status || '',
         'statusText': jqXhr.statusText || '',
         'headers': headers,
         'timestamp': evt.timeStamp || '',
         'contentType': opts.contentType || '',
         'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '')
       }
     });
   });
 }

 function objMap(data, delim, spl, decode) {
   var obj = {};
   if (!data || !delim || !spl) {
     return {};
   }
   var arr = data.split(delim);
   var i;
   if (arr) {
     for (i = 0; i < arr.length; i++) {
       var item = decode ? decodeURIComponent(arr[i]) : arr[i];
       var pair = item.split(spl);
       var key = trim_(pair[0]);
       var value = trim_(pair[1]);
       if (key && value) {
         obj[key] = value;
       }
     }
   }
   return obj;
 }

 function trim_(str) {
   if (str) {
     return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
   }
 }
})();
</script>

بررسی استفاده از فرم‌های مبتنی بر AJAX

حالا وقت آن است که بررسی کنیم آیا فرم سایت شما بر پایه AJAX ساخته شده یا خیر:

1. حالت پیش‌نمایش و اشکال‌زدایی (Preview and Debug Mode) را فعال یا به‌روزرسانی کنید.
2. سعی کنید فرم موجود در وب‌سایتتان را ارسال کنید (بدون ایجاد خطا).
3. در کنسول پیش‌نمایش و اشکال‌زدایی، بررسی کنید که آیا رویداد ajaxComplete ظاهر شده یا خیر.

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

کار با فرم‌های AJAX

اگر پاسخ شما به سؤال قبلی مثبت است و فرم شما بر پایه AJAX ساخته شده، گام بعدی این است که ببینیم چگونه می‌توانیم از این ویژگی بهره ببریم:

• در حالت پیش‌نمایش و اشکال‌زدایی، روی رویداد ajaxComplete کلیک کنید و جزئیات API Call را باز کنید.

ممکن است این بخش در نگاه اول برای کسانی که توسعه‌دهنده حرفه‌ای نیستند، کمی پیچیده به نظر برسد؛ اما در عمل بسیار ساده‌تر از چیزی است که فکر می‌کنید.

شناسایی ارسال موفق فرم

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

حالا باید به دنبال عبارتی باشید که نشان‌دهنده ارسال موفق فرم باشد. کمی پایین‌تر اسکرول کنید و به دنبال بخش “response” بگردید.

اگر دقت کنید، پیامی شبیه به این مشاهده می‌کنید:
“با تشکر از تماس شما! به زودی با شما تماس خواهیم گرفت.”

تبریک می‌گویم! دقیقاً همین پیام را می‌توانید به‌عنوان یک تریگر (Trigger) برای رهگیری موفقیت‌آمیز ارسال فرم در GTM استفاده کنید.

متغیر Data Layer و ایجاد تریگر برای رویداد سفارشی در Google Tag Manager

ایجاد متغیر Data Layer

ابتدا باید یک متغیر Data Layer در Google Tag Manager بسازیم. برای این کار مراحل زیر را دنبال کنید:

• وارد بخش Variables شوید.
• به پایین صفحه اسکرول کنید تا به بخش User-Defined Variables برسید و روی گزینه New کلیک کنید.
• در بخش Variable Configuration، نوع متغیر را Data Layer Variable انتخاب کنید.
• در قسمت Data Layer Variable Name، این مقدار را وارد کنید:
  attributes.response.data.message

شاید برایتان سوال باشد که چرا به جای واژه ساده‌تر مثل response، از مسیر کامل attributes.response.data.message استفاده کردیم. اجازه بدهید دقیق‌تر این موضوع را بررسی کنیم.

بررسی ساختار داده در حالت Preview و Debug

در حالت Preview و Debug در GTM، اگر به خط دوم نگاه کنید، رویدادی با نام ajaxComplete مشاهده خواهید کرد؛ این همان رویدادی است که در سمت چپ کنسول نیز نمایش داده می‌شود. در این رویداد:

• ابتدا آبجکتی به نام attributes داریم که شامل داده‌های مختلف (به صورت کلید-مقدار) است.
• یکی از کلیدهای این آبجکت، response است.
• درون response، یک شیء دیگر به نام data داریم.
• و در نهایت، message در دل data قرار دارد.

می‌توانید این روند را مانند دسترسی به پوشه‌های تو در تو تصور کنید:
ابتدا وارد attributes می‌شوید، سپس response، بعد data و در نهایت message.

🔵 نکته مهم:
ساختار داده در پروژه‌های مختلف می‌تواند متفاوت باشد. ممکن است نام پارامترها تغییر کند. همیشه مسیر از attributes.response شروع می‌شود، اما ادامه آن ممکن است در فرم‌های مختلف فرق کند؛ مثلاً ممکن است به جای attributes.response.data.message، مسیر attributes.response.message باشد. بنابراین باید ساختار داده‌های خود را به دقت بررسی کنید و مسیر مناسب را انتخاب نمایید.

یک مثال دیگر:

فرض کنید می‌خواهید اطلاعات سرور (Server Data) را از پاسخ AJAX استخراج کنید. در این حالت باید نام متغیر Data Layer را اینگونه تعریف کنید:
attributes.headers.Server

دیباگ کردن متغیر ساخته شده

پس از ساخت متغیر Data Layer، حالا نوبت به تست آن می‌رسد:

• حالت Preview and Debug را در GTM رفرش کنید (روی دکمه Preview کلیک کنید).
• فرم موردنظر را پر کرده و ارسال کنید.
• روی آخرین رویداد ajaxComplete کلیک کنید.
• به تب Variables بروید و متغیر جدید با نام dlv – attributes.response.data.message را پیدا کنید.

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

⚠️ اگر مقدار این متغیر undefined بود، باید دنبال خطا بگردید. رایج‌ترین مشکلات شامل تایپ اشتباه نام متغیر یا تعریف نادرست مسیر داده‌هاست. برخی افراد به اشتباه فقط response را به جای attributes.response.data.message استفاده می‌کنند که باعث عدم دریافت داده می‌شود.

ساخت تریگر برای رویداد سفارشی

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

• رویداد ajaxComplete اتفاق بیفتد.
• و متغیر Data Layer حاوی عبارت “Thanks for contacting us” باشد.

مراحل ساخت تریگر:

• وارد بخش Triggers شوید و روی New کلیک کنید.
• نوع تریگر را Custom Event انتخاب کنید.
• در قسمت Event Name، مقدار ajaxComplete را وارد کنید.
• مشخص کنید که این تریگر برای Some Custom Events فعال شود.
• شرط زیر را تعریف کنید:
  متغیر dlv – attributes.response.data.message شامل “Thanks for contacting us” باشد.

تست نهایی

• این تریگر جدید را به تگ Google Analytics 4 Event که قبلاً ساخته‌اید، متصل کنید.
• مجدداً حالت Preview and Debug را باز یا رفرش کنید.
• فرم AJAX را پر کرده و ارسال کنید.
• پس از ارسال موفقیت‌آمیز، باید تگ GA4 شما فعال شود (این مورد در حالت Preview and Debug قابل مشاهده خواهد بود).
• همچنین می‌توانید در Google Analytics 4 Debug View این رویداد را بررسی کنید.

نکات مهم هنگام ردیابی فرم‌های AJAX

• پاسخ فرم شما ممکن است ساختار متفاوتی داشته باشد. بنابراین، باید متناسب با آن متغیر Data Layer و تریگر خود را تنظیم کنید.
• اگر توسعه‌دهندگان تغییراتی در ساختار پاسخ ایجاد کنند، تریگر شما ممکن است از کار بیفتد. بنابراین، حتماً تیم فنی را در جریان پیاده‌سازی‌های GTM قرار دهید.
• اگر صفحه شما چندین فرم AJAX داشته باشد، سعی کنید اطلاعات بیشتری از Data Layer استخراج کنید تا بتوانید فرم‌های مختلف را از هم تفکیک کنید.

آیا حالت پیش‌نمایش (Preview Mode) در Google Tag Manager برای شما کار نمی‌کند؟ احتمالاً شما هم مثل بسیاری از کاربران حداقل یک‌بار با این مشکل روبه‌رو شده‌اید. حالت Preview و Debug فعال می‌شود، اما روی سایت نه دیده می‌شود و نه درست کار می‌کند. در ادامه، چند راه‌حل کاربردی برای برطرف کردن این مشکل ارائه می‌دهم که احتمالاً حداقل یکی از آن‌ها به درد شما می‌خورد.

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

۱. کد GTM به‌درستی روی سایت اضافه نشده است

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

پس مشکل کجاست؟ احتمال زیاد این است که کد GTM فقط در نسخه‌ی پیش‌نویس (draft) ذخیره شده و به نسخه‌ی نهایی و زنده‌ی سایت منتشر نشده است. این اشتباه ساده اما رایج، باعث می‌شود هیچ اتفاقی روی سایت شما نیفتد.

چگونه بررسی کنیم که کد GTM درست نصب شده؟

چند راه ساده برای این کار وجود دارد:

• استفاده از افزونه‌ی Tag Assistant در مرورگر کروم: این افزونه بررسی می‌کند که آیا تگ‌های گوگل مثل Google Analytics، Google Ads یا GTM روی صفحه فعال هستند یا نه.
• بررسی سورس کد سایت: کافی‌ست در مرورگر خود کلیدهای Ctrl + U را فشار دهید (یا روی مک، CMD + Option + U) و دنبال کد کانتینر GTM بگردید.

۲. کد نادرست یا اشتباه GTM روی سایت قرار گرفته

شاید عجیب به‌نظر برسد، اما وارد کردن کد اشتباه GTM هم یکی از دلایل رایج است. برای بررسی این موضوع، وارد حساب کاربری Google Tag Manager شوید و در گوشه‌ی بالا سمت راست، شناسه‌ی GTM (Container ID) را بررسی کنید.

حالا کد GTM موجود در سایت خود را با آن مقایسه کنید. می‌توانید از همان افزونه‌ی Tag Assistant هم برای مقایسه کمک بگیرید.

نکته مهم: هرگز نباید کدی که از GTM کپی می‌کنید را تغییر دهید. این کد باید دقیقاً به همان صورت در سایت قرار گیرد؛ هرگونه تغییر، باعث اختلال در عملکرد آن خواهد شد.

۳. پیش‌نمایش را روی کانتینر اشتباه فعال کرده‌اید

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

۴. استفاده از مرورگر متفاوت ممنوع!

زمانی که حالت Preview & Debug فعال می‌شود، یک تب یا پنجره جدید در همان مرورگر باز می‌کند که سایت را با حالت دیباگ نمایش می‌دهد. اگر بعد از آن، مرورگر را تغییر دهید یا وارد حالت ناشناس (Incognito) شوید، ممکن است دیباگ به درستی کار نکند. بنابراین، حتماً از همان مرورگری که حالت پیش‌نمایش را فعال کرده‌اید استفاده کنید.

۵. پاک کردن کش و کوکی مرورگر

اگر با وجود رعایت نکات بالا، همچنان مشکلاتی دارید، شاید لازم باشد کش (Cache) و کوکی (Cookies) مرورگر را پاک‌سازی کنید. روش انجام این کار در مرورگرهای مختلف متفاوت است. برای مثال می‌توانید در گوگل جستجو کنید:
“نحوه پاک کردن کش و کوکی مرورگر کروم / فایرفاکس / سافاری”
اگر از مرورگر کروم استفاده می‌کنید، این گزینه در بخش تنظیمات > حریم خصوصی و امنیت در دسترس است.

۶. حذف پارامتر پیش‌نمایش از آدرس URL

در حالت Preview & Debug، به‌طور پیش‌فرض پارامتر gtm_debug=x به انتهای آدرس سایت اضافه می‌شود. اما بعضی وب‌سایت‌ها ممکن است با این پارامتر به درستی کار نکنند و حتی خطای 404 نمایش دهند. اگر چنین مشکلی دارید، تیک گزینه مربوط به پارامتر دیباگ را در تنظیمات Preview بردارید. این کار ممکن است مشکل را حل کند.

۷. تداخل Cloudflare با بارگذاری فایل gtm.js

یکی از رایج‌ترین CDNهایی که در ایران و جهان استفاده می‌شود، Cloudflare است. وظیفه‌ی CDN این است که محتوای استاتیک سایت شما (مثل فایل‌های CSS، JS و تصاویر) را از نزدیک‌ترین سرور به کاربر نهایی ارائه دهد و این کار باعث افزایش سرعت بارگذاری صفحات می‌شود.

اما این نکته را در نظر داشته باشید که Cloudflare ممکن است در بارگذاری فایل JavaScript مخصوص GTM (یعنی gtm.js) اختلال ایجاد کند. مخصوصاً اگر قابلیت Rocket Loader در تنظیمات فعال باشد. این ویژگی با هدف بهینه‌سازی بارگذاری JS طراحی شده، اما گاهی باعث به‌هم‌ریختگی عملکرد GTM می‌شود. از برنامه‌نویس سایت خود بخواهید بررسی کند که Rocket Loader در Cloudflare غیرفعال باشد.

۸. تغییر ناخواسته کد GTM هنگام کپی‌برداری

شاید برایتان پیش آمده باشد که قصد دارید کد کانتینر GTM را برای توسعه‌دهنده سایت ارسال کنید. معمولاً این کد را از پنل GTM کپی می‌کنید، در یک فایل Word یا Google Docs قرار می‌دهید و سپس آن را می‌فرستید. اما همین کار ساده ممکن است باعث خراب شدن کد شود!

چرا؟ چون ابزارهای ویرایش متن ممکن است برخی از نمادهای کد، مثل نقل‌قول‌ها (‘ ’)، فاصله‌ها یا حتی علائم نگارشی را به‌صورت خودکار تغییر دهند. در نتیجه، هرچند ظاهر کد تغییری نکرده، ولی GTM دیگر کار نمی‌کند؛ حالت Preview و Debug هم نمایش داده نمی‌شود.

✅ راه‌حل بهتر: کد را در یک فایل .txt (مثلاً با Notepad) قرار دهید و فایل را مستقیماً برای توسعه‌دهنده بفرستید. یا از سایت pastebin.com استفاده کنید تا کد به‌صورت خام و بدون تغییر در دسترس برنامه‌نویس باشد.

۹. مسدود شدن پاپ‌آپ‌ها و ریدایرکت‌ها توسط مرورگر

یکی دیگر از مشکلاتی که کاربران GTM ممکن است با آن مواجه شوند، مسدود شدن پنجره پیش‌نمایش (Preview) توسط مرورگر است. وقتی دکمه‌ی Preview را در محیط GTM می‌زنید، یک تب جدید باز می‌شود که به سایت tagassistant.google.com متصل می‌شود.

گاهی مرورگر (مثل Chrome) این پنجره را مسدود می‌کند. اگر این اتفاق افتاد، کافیست روی آیکن هشدار در نوار آدرس کلیک کنید و گزینه‌ی:

“Always allow popups and redirects from tagassistant.google.com”

را انتخاب کرده و روی “Done” بزنید. این تنظیم فقط برای GTM اعمال می‌شود و امنیت مرورگر شما را به خطر نمی‌اندازد.

۱۰. کانتینر را منتشر کنید (حتی اگر جدید نیست)

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

از حالت پیش‌نمایش خارج شده و دوباره وارد شویدگاهی تنها بستن تب حالت پیش‌نمایش و تب سایت و سپس ورود مجدد از طریق دکمه “Preview” در پنل GTM، مشکل را حل می‌کند. این راه‌حل در چندین مورد مؤثر بوده است.

۱۱. افزونه‌های مرورگر مانند AdBlock یا Ghostery ممکن است GTM را مسدود کنند

با افزایش استفاده از افزونه‌های مسدودکننده تبلیغات، ابزارهایی مانند GTM نیز در معرض مسدود شدن قرار گرفته‌اند. افزونه‌هایی نظیر Ghostery، AdGuard، AdBlock Plus و حتی uBlock Origin ممکن است مانع اجرای صحیح حالت پیش‌نمایش شوند.

🔒 اگر یکی از این افزونه‌ها روی مرورگر شما فعال است، موقتاً آن را غیرفعال کرده و دوباره پیش‌نمایش را بررسی کنید.

۱۲. سیستم شما ممکن است به‌صورت خودکار از تنظیم کوکی‌ها جلوگیری کند

در پی اجرای قوانین مربوط به حریم خصوصی مانند GDPR، برخی وب‌سایت‌ها از ابزارهایی برای بلاک‌کردن خودکار کوکی‌ها استفاده می‌کنند. نمونه‌هایی از این ابزارها:

• OneTrust Auto-blocking
• CookieBot Auto-blocking

در این حالت، باید مطمئن شوید که کوکی با نام _TAG_ASSISTANT مجاز به ذخیره‌سازی است. اگر اطلاعات کافی ندارید، با فردی که در زمینه مدیریت کوکی یا ابزارهای رضایت‌سنجی تخصص دارد مشورت کنید.

۱۳. بررسی کنید که کانتینر صحیح را انتخاب کرده‌اید

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

۱۴. توجه به تفاوت Workspace و Environment

اگر در حال استفاده از Google Tag Manager هستید و در زمان فعال‌سازی حالت Preview با پیام “هیچ تگی در این کانتینر اجرا نشد” مواجه شدید، احتمال زیادی وجود دارد که در حال پیش‌نمایش محیط (environment) نیستید، بلکه صرفاً ورک‌اسپیس (workspace) را مشاهده می‌کنید. این مسئله می‌تواند کاربران زیادی را گیج کند. در این مقاله به زبان ساده توضیح می‌دهیم که دلیل این مشکل چیست و چطور می‌توانید آن را برطرف کنید.

تفاوت Workspace و Environment در GTM چیست؟

وقتی Google Tag Manager روی یک وب‌سایت نصب می‌شود، معمولاً توسعه‌دهندگان از اسنیپتی استفاده می‌کنند که در رابط کاربری GTM و با کلیک روی Container ID قابل دسترسی است. این اسنیپت پیش‌فرض، پارامترهای اضافی مربوط به Environment را ندارد.

اما گوگل تگ منیجر قابلیتی به نام محیط‌ها (Environments) هم ارائه می‌دهد که به شما اجازه می‌دهد نسخه‌های مختلفی از تگ‌ها را برای محیط‌های متفاوت مثل توسعه (development)، تست (staging) یا حتی نسخه زنده (live) داشته باشید. هرکدام از این محیط‌ها اسنیپت مخصوص به خودشان را دارند.

مشکل زمانی پیش می‌آید که…

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

«No tags were evaluated in this container»

راه‌حل چیست؟

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

1. به بخش Admin > Environments در GTM بروید.
2. محیط مورد نظر (مثلاً Live) را انتخاب کنید.
3. روی Actions > Share Link کلیک کنید.
4. حالا با استفاده از این لینک وارد حالت Preview شوید.

نکته مهم: باید حداقل یک نسخه‌ی منتشرشده از GTM روی کانتینر شما وجود داشته باشد تا گزینه Share Link در دسترس قرار بگیرد.

چطور متوجه شویم که کدام اسنیپت روی سایت نصب شده؟

برای این کار:

• به وب‌سایت بروید.
• روی صفحه راست‌کلیک کرده و گزینه View Page Source را انتخاب کنید.
• کد GTM را پیدا کرده و با اسنیپت پیش‌فرض GTM مقایسه کنید.

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

۱۵. از مرورگر Brave برای کار با GTM استفاده نکنید

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

اگر Brave مرورگر اصلی‌تان است، دو راه پیش‌رو دارید:

• از مرورگر دیگری مثل Chrome یا Microsoft Edge فقط برای کار با GTM استفاده کنید (چون افزونه‌های زیادی برای این مرورگرها در دسترس است)
• یا قابلیت امنیتی اصلی Brave یعنی Shields را غیرفعال کنید

پیشنهاد حرفه‌ای ما؟ از یک مرورگر دیگر استفاده کنید. چون اگر بخواهید Shields را غیرفعال کنید، عملاً Brave را بی‌اثر کرده‌اید.

۱۶. دامنه سایت‌تان هنوز از HTTP استفاده می‌کند؟

اگر وب‌سایت شما هنوز روی HTTP است و نه HTTPS، احتمالاً با مشکل در حالت پیش‌نمایش GTM مواجه خواهید شد. این قابلیت فقط روی سایت‌هایی که گواهینامه امنیتی SSL دارند (و آدرس‌شان با https شروع می‌شود) به درستی کار می‌کند.

✅ راه‌حل ساده است:
از توسعه‌دهنده یا مدیر وب‌سایت خود بخواهید که SSL را فعال کرده و مطمئن شود سایت فقط از طریق HTTPS لود می‌شود. این کار نه تنها برای GTM لازم است، بلکه برای اعتماد کاربران و سئو سایت‌تان هم حیاتی است.

۱۷. سیاست امنیتی محتوا (CSP) مانع بارگذاری GTM می‌شود

اگر وب‌سایت‌تان از Content Security Policy (CSP) استفاده می‌کند، ممکن است همین تنظیمات باعث شود حالت پیش‌نمایش GTM لود نشود. برای تشخیص این موضوع، می‌توانید از کنسول توسعه‌دهنده مرورگر استفاده کنید.

مراحل کار (در ویندوز و مرورگر کروم):

وارد منوی مرورگر شوید → More Tools → Developer Tools → زبانه Console
صفحه را رفرش کنید و دنبال ارورهایی با محتوای “Content Security Policy” بگردید.

اگر چنین خطایی را دیدید، باید با توسعه‌دهنده سایت تماس بگیرید تا CSP را اصلاح کند. اینجا دیگر راه میان‌بری وجود ندارد و حتماً نیاز به تغییر در تنظیمات سمت سرور دارید.

۱۸. افزونه GA Debugger را غیرفعال کنید

اگر هنگام استفاده از GA4، در حالت Preview فقط آی‌دی را می‌بینید ولی جزئیاتی نمایش داده نمی‌شود، احتمالاً افزونه GA Debugger در مرورگر شما فعال است. این افزونه باعث می‌شود حالت دیباگ مخصوص GA4 کار نکند، اما تأثیری روی دیباگ کلی GTM ندارد و تگ‌های شما همچنان اجرا می‌شوند.

راه‌حل: افزونه GA Debugger را غیرفعال کنید تا بتوانید اطلاعات دقیق GA4 را در حالت پیش‌نمایش مشاهده کنید.

۱۹. مرورگر را کامل ببندید و دوباره باز کنید

گاهی اوقات فقط بستن تب کافی نیست. باید مرورگر را کاملاً ببندید (در Chrome از منوی سه‌نقطه‌ای گزینه Exit را انتخاب کنید) و مطمئن شوید که فرآیند آن در پس‌زمینه هم بسته شده است. سپس مرورگر را مجدد باز کنید و وضعیت را بررسی نمایید.

۲۰. سیستم مدیریت رضایت کوکی (Cookie Consent)

اگر از ابزارهایی مثل OneTrust استفاده می‌کنید و این ابزارها تا زمانی که کاربر روی «موافقم» کلیک نکرده باشد، GTM را بلاک می‌کنند، حالت Preview نیز تا آن لحظه فعال نخواهد شد.

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

۲۱. آرایه‌ای که Data Layer را خراب می‌کند

گاهی یک قطعه کد اشتباه می‌تواند Data Layer را مختل کند. مثلاً اگر آرایه‌ای به شکل نادرست به Data Layer پوش داده شود، حالت Preview چیزی نشان نخواهد داد.

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

۲۲. VPN می‌تواند مانع GTM شود

برخی سرویس‌های VPN به‌منظور افزایش امنیت، دسترسی به سرویس‌هایی مثل GTM را مسدود می‌کنند. اگر از VPN استفاده می‌کنید و حالت Preview درست عمل نمی‌کند، VPN را غیرفعال کرده و مجدد تست کنید.

۲۳. افزونه TikTok Pixel Helper را غیرفعال کنید

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

۲۴. حذف افزونه Tag Assistant

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

راه‌حل: این افزونه را حذف یا غیرفعال کرده و عملکرد مجدد را بررسی نمایید.

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

مراحل تنظیم Click Trigger در Google Tag Manager

۱. ایجاد یک تریگر جدید برای کلیک

در محیط GTM به بخش Triggers بروید و روی دکمه New کلیک کنید تا یک تریگر جدید بسازید.

۲. انتخاب نوع تریگر کلیک

در بخش Trigger Configuration، یکی از گزینه‌های زیر را انتخاب کنید:

• All Elements: اگر می‌خواهید تمام کلیک‌ها را ردیابی کنید، از جمله کلیک روی لینک‌ها، دکمه‌ها، تصاویر و سایر المان‌ها.
• Just Links: اگر فقط کلیک‌هایی را می‌خواهید ردیابی کنید که روی لینک‌های HTML انجام می‌شوند، مثلاً:

<a href="https://www.google.com">Google</a>

۳. تنظیمات اختیاری برای تریگر “Just Links”

• Wait for Tags: این گزینه را فعال کنید تا GTM صبر کند تا همه تگ‌ها اجرا شوند یا مدت زمان مشخصی سپری شود.
• Check Validation: با فعال کردن این گزینه، فقط کلیک‌های معتبر منجر به اجرای تگ می‌شوند. در غیر این صورت، هر کلیکی روی لینک باعث اجرای تگ خواهد شد.

۴. محدودسازی اجرای تریگر برای بهینه‌سازی عملکرد

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

• در بخش This trigger fires on گزینه Some Clicks را انتخاب کنید.
• سپس در بخش Fire this trigger when an Event occurs and all of these conditions are true یک فیلتر اضافه کنید، مثلاً:

Click URL contains /landing/promo  

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

تفاوت بین All Elements و Just Links در Google Tag Manager؛ کدام گزینه برای ردیابی کلیک مناسب‌تر است؟

در هنگام پیکربندی تریگر کلیک در Google Tag Manager، دو گزینه اصلی در اختیار شما قرار دارد: All Elements و Just Links. هر یک از این گزینه‌ها برای سناریوهای خاصی طراحی شده‌اند و انتخاب نادرست آن‌ها می‌تواند دقت داده‌های شما را تحت تأثیر قرار دهد.

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

All Elements؛ ردیابی کلیک روی تمام المان‌های صفحه

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

موارد استفاده از All Elements:

• دکمه‌هایی که با تگ <button> طراحی شده‌اند
• تصاویر قابل کلیک
• آیکون‌ها یا بلوک‌هایی که با CSS یا جاوااسکریپت تعامل دارند
• المان‌هایی که به‌صورت دستی قابلیت کلیک به آن‌ها اضافه شده است (مثلاً با onclick)

🔧 نمونه کد HTML:

htmlCopyEdit<button>افزودن به سبد خرید</button>
<div onclick="...">اطلاعات بیشتر</div>
<img src="banner.jpg" onclick="...">

نکته مهم:

استفاده از All Elements نیازمند فیلترگذاری دقیق است؛ زیرا در غیر این صورت، ممکن است داده‌های غیرضروری یا اشتباه ثبت شود.

Just Links؛ ردیابی کلیک فقط روی لینک‌ها

گزینه Just Links مخصوص ردیابی کلیک‌هایی است که صرفاً روی تگ‌های HTML از نوع <a> انجام می‌شود. این روش سبک‌تر و دقیق‌تر است و امکاناتی برای کنترل بیشتر نیز در اختیار شما قرار می‌دهد.

موارد استفاده از Just Links:

• لینک‌های داخلی سایت
• لینک به صفحات خارجی (مانند شبکه‌های اجتماعی)
• لینک‌های دارای پارامتر UTM برای کمپین‌های تبلیغاتی

🔧 نمونه کد HTML:

htmlCopyEdit<a href="/product/123">مشاهده محصول</a>
<a href="https://instagram.com/example">اینستاگرام ما</a>

تنظیمات پیشرفته:

• Wait for Tags: GTM منتظر می‌ماند تا اجرای تگ‌ها کامل شود.
• Check Validation: فقط کلیک‌هایی که به‌عنوان “اقدام معتبر” در نظر گرفته می‌شوند، منجر به اجرای تگ خواهند شد.

کدام گزینه را انتخاب کنیم؟

اگرچه گزینه All Elements توانایی ردیابی کلیک روی همه بخش‌های صفحه را دارد، اما همیشه بهترین انتخاب نیست. در جدول زیر، مقایسه‌ای بین این دو گزینه ارائه شده است:

نوع تریگر	مناسب برای ردیابی کلیک روی	مزایا	نکات مهم
All Elements	دکمه، عکس، آیکون، بلوک متنی	پوشش جامع	نیاز به فیلتر دقیق
Just Links	لینک‌های متنی یا تصویری	سبک‌تر و سریع‌تر	محدود به تگ <a>

جمع‌بندی

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