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

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

1. Consent Initialization (راه‌اندازی اولیه برای مدیریت رضایت کاربران)

این نوع تریگر برای اطمینان از اعمال تنظیمات مربوط به رضایت کاربران طراحی شده است—پیش از آن‌که تریگرهای دیگر فعال شوند. معمولاً از این تریگر برای برچسب‌هایی استفاده می‌شود که وضعیت رضایت کاربران را تنظیم یا به‌روزرسانی می‌کنند؛ مثلاً:

• تگ‌های مربوط به پلتفرم‌های مدیریت رضایت (CMP)
• تگ‌هایی که پیش‌فرض‌های رضایت را تعیین می‌کنند

در هر کانتینر (Container) در GTM، به صورت پیش‌فرض یک تریگر با عنوان Consent Initialization – All Pages وجود دارد. توجه داشته باشید که اگر نیاز دارید تگی خیلی زود در سایت اجرا شود، این تریگر گزینه‌ی مناسبی نیست. در این‌گونه موارد، باید از تریگر Initialization استفاده کنید.

2. Initialization (راه‌اندازی اولیه)

این تریگر طوری طراحی شده که قبل از همه‌ی تریگرها اجرا شود—به‌جز تریگر Consent Initialization. در هر کانتینر GTM به صورت پیش‌فرض یک تریگر Initialization – All Pages وجود دارد. این گزینه برای تگ‌هایی مناسب است که باید پیش از سایر تگ‌ها اجرا شوند.

3. Page View (نمایش صفحه)

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

4. DOM Ready (آماده بودن ساختار HTML)

وقتی مرورگر بارگذاری کامل HTML صفحه را به پایان می‌رساند و مدل شیء سند (DOM) برای پردازش آماده می‌شود، این تریگر فعال می‌شود. اگر تگ‌های شما برای استخراج اطلاعات یا پر کردن متغیرها نیاز به دسترسی به ساختار DOM دارند، حتماً از این تریگر استفاده کنید تا از دسترسی کامل به عناصر HTML مطمئن شوید.

5. Window Loaded (پایان کامل بارگذاری صفحه)

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

کدام نوع تریگر (Trigger) را انتخاب کنیم؟

در زمان راه‌اندازی تگ‌ها در Google Tag Manager، انتخاب نوع مناسب «تریگر» اهمیت زیادی دارد. هر تریگر (یا محرک) بسته به هدفی که دارید باید به‌درستی انتخاب شود. در ادامه با رایج‌ترین تریگرها و موارد استفاده‌ی آن‌ها آشنا می‌شویم:

اگر تگ مربوط به دریافت رضایت کاربر است:

در صورتی‌ که تگی که می‌خواهید اجرا کنید به رضایت‌گیری از کاربر مرتبط باشد—مثلاً برای نمایش پنجره‌ی پاپ‌آپ رضایت (Consent Popup) یا تعیین وضعیت رضایت—از تریگر Consent Initialization استفاده کنید. این تریگر زودتر از هر تریگر دیگری فعال می‌شود و مناسب سناریوهایی است که باید قبل از هر چیز، وضعیت رضایت مشخص شود.

اگر می‌خواهید یک تگ بلافاصله پس از شروع بارگذاری صفحه اجرا شود:

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

اگر می‌خواهید تگی هم‌زمان با شروع بارگذاری صفحه اجرا شود:

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

اگر اجرای تگ شما نیاز به مقدار خاصی از یک عنصر در صفحه دارد:

در شرایطی که تگ باید به محتوای یک عنصر خاص در صفحه (مثل یک متن، دکمه یا فرم) دسترسی داشته باشد، بهتر است از تریگر DOM Ready یا Window Loaded استفاده کنید. این تریگرها بعد از بارگذاری بخش‌های مختلف صفحه فعال می‌شوند و تضمین می‌کنند که اطلاعات مورد نظر در دسترس هستند.

اگر می‌خواهید تگ تنها بعد از بارگذاری کامل صفحه اجرا شود:

برای اطمینان از این‌که کل صفحه (از جمله تمام تصاویر و اسکریپت‌ها) بارگذاری شده است، از تریگر Window Loaded استفاده کنید. این گزینه به‌ویژه برای تگ‌هایی مفید است که نیاز به یک تجربه‌ی کاربری کامل دارند یا باید در هماهنگی کامل با محتوای نهایی صفحه اجرا شوند.

نحوه ایجاد یک Page View Trigger جدید

برای ساخت یک تریگر جدید در GTM مراحل زیر را طی کنید:

1. از منوی سمت چپ، روی Triggers کلیک کرده و سپس New را انتخاب کنید.
2. روی Trigger Configuration کلیک کنید و یکی از انواع تریگر Page View را انتخاب نمایید.
3. (اختیاری، اما توصیه‌شده برای بهبود عملکرد) شرایطی را برای محدودسازی فعال‌سازی تریگر مشخص کنید. مثلاً بر اساس آدرس صفحات (URL Pattern):
   • در بخش This trigger fires on گزینه‌ی Some Events را انتخاب کنید.
   • در قسمت Fire this trigger when an Event occurs and all of these conditions are true فیلتری تعریف کنید. مثال: Click URL contains /path/to/promo
4. تریگر را ذخیره کرده و تغییرات را منتشر (Publish) کنید.

آیا حالت پیش‌نمایش (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 می‌شود. به‌طور خاص، حالت پیش‌نمایش فقط برای اولین بازدید از صفحه کار می‌کند و پس از آن قطع می‌شود.

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