در این مطلب، قصد دارم نحوه ترکینگ فرم‌های 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 ساخته شده یا خیر:
- حالت پیش‌نمایش و اشکال‌زدایی (Preview and Debug Mode) را فعال یا به‌روزرسانی کنید.
- سعی کنید فرم موجود در وبسایتتان را ارسال کنید (بدون ایجاد خطا).
- در کنسول پیش‌نمایش و اشکال‌زدایی، بررسی کنید که آیا رویداد 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 استخراج کنید تا بتوانید فرم‌های مختلف را از هم تفکیک کنید.
![۹ روش برای بررسی فعال بودن «Consent Mode» در سایت شما [+تصاویر]](https://negar.digital/wp-content/uploads/2025/04/how-to-check-if-consent-mode-is-enabled.jpg)