لایه داده شیئی است که «مدیریت برچسب Google» و gtag.js از آن برای ارسال اطلاعات به برچسب‌ها استفاده می‌کنند. رویدادها یا متغیرها را می‌توان بااستفاده از لایه داده منتقل کرد، و محرک‌ها را می‌توان براساس مقادیر متغیرها راه‌اندازی کرد.
برای مثال، اگر برچسب بازاریابی مجدد را زمانی فعال کنید که مقدار purchase_total
بیشتر از ۱۰۰ دلار باشد، یا براساس رویدادهای خاص، مثلاً وقتی روی دکمه‌ای
کلیک می‌شود، لایه داده شما می‌تواند به‌گونه‌ای پیکربندی شود که آن داده‌ها را برای برچسب‌هایتان
دردسترس قرار دهد. شیء لایه داده به‌صورت JSON ساختاردهی شده است. برای مثال:
{
event: "checkout_button",
gtm: {
uniqueEventId: 2,
start: 1639524976560,
scrollThreshold: 90,
scrollUnits: "percent",
scrollDirection: "vertical",
triggers: "1_27"
},
value: "120"
}
برچسب‌های Google به‌گونه‌ای طراحی شده‌اند که به‌جای تجزیه متغیرها، اطلاعات تراکنش، دسته‌های صفحه، و سایر سیگنال‌های پراکنده در سراسر صفحه، به اطلاعاتی که به‌صورت سازمان‌یافته و قابل‌پیش‌بینی به لایه داده اضافه شده است ارجاع دهند. پیاده‌سازی لایه داده که با متغیرها و مقادیر مرتبط پر شده باشد کمک می‌کند تا اطمینان حاصل شود که داده‌های مربوطه در زمانی که برچسب‌های شما به آن‌ها نیاز دارند دردسترس هستند.
نصب
برای نصب صفحه وب «مدیر برچسب»، باید لایه داده ایجاد کنید. نمونه کد زیر نشان می‌دهد که لایه داده کجا ایجاد می‌شود، قبل‌از اینکه Tag Manager بار شود.
<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
در پیاده‌سازی‌های استاندارد gtag.js که برچسب از داخل محصول کپی شده و به صفحه وب اضافه شده است، کد ایجاد لایه داده ارائه می‌شود. در پیاده‌سازی‌های سفارشی برچسب Google، کد لایه داده را در ابتدای اسکریپت خود اضافه کنید، همان‌طور که در نمونه کد زیر نشان داده شده است:
<!-- Google tag -->
<script async src="https://www.googletagmanager.com/gtm.js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
</script>
نحوه پردازش اطلاعات لایه داده
وقتی محفظه‌ای بار می‌شود، «مدیر برچسب» پردازش همه پیام‌های ارسال داده‌های لایه صف‌بندی‌شده را شروع می‌کند «مدیر برچسب» پیام‌ها را براساس «خروج به‌ترتیب ورود» پردازش می‌کند: هر پیام به‌ترتیب دریافت، یکی‌یکی پردازش می‌شود. اگر پیام رویداد باشد، هر برچسبی که شرایط راه‌انداز آن برآورده شده باشد قبل‌از اینکه «مدیر برچسب» به پیام بعدی برود فعال می‌شود.
اگر تماس gtag() یا dataLayer.push() توسط کد در صفحه، در «الگوی سفارشی»، یا در برچسب HTML سفارشی برقرار شود، پیام مربوطه در صف قرار می‌گیرد و پس‌از ارزیابی همه پیام‌های معلق دیگر پردازش می‌شود. این یعنی تضمینی وجود ندارد که مقادیر به‌روزشده لایه داده برای رویداد بعدی دردسترس باشد.
برای رسیدگی به این موارد، باید نام رویداد را به پیام اضافه کنید، زیرا به لایه داده ارسال می‌شود، و سپس با راه‌انداز رویداد سفارشی به آن نام رویداد گوش دهید.
استفاده از لایه داده با گرداننده‌های رویداد
شیء dataLayer از فرمان event برای شروع ارسال رویدادها استفاده می‌کند.
برچسب Google و «مدیر برچسب» از متغیر لایه داده ویژه‌ای به‌نام
event استفاده می‌کنند که شنوندگان رویداد جاوا اسکریپت از آن برای فعال کردن برچسب‌ها هنگام تعامل کاربر
با عناصر وب‌سایت استفاده می‌کنند. برای مثال، ممکن است بخواهید وقتی کاربر روی دکمه تأیید خرید کلیک می‌کند، برچسب پیگیری تبدیل را فعال کنید. هرگاه کاربر با عناصر وب‌سایت مانند پیوندها، دکمه‌ها، پیمایش‌ها، و غیره تعامل داشته باشد، ممکن است رویدادها فراخوانی شوند.
این عملکرد با فراخوانی dataLayer.push() هنگام وقوع رویداد انجام می‌شود. نحو ارسال رویداد با dataLayer.push() به‌صورت زیر است:
dataLayer.push({'event': 'event_name'});
که در آن event_name رشته‌ای است که رویداد را توصیف می‌کند، مثل 'login'،
'purchase'، یا 'search'.
از dataLayer.push() برای ارسال داده‌های رویداد هنگام وقوع کنشی که می‌خواهید اندازه‌گیری کنید استفاده کنید. برای مثال، برای ارسال رویداد وقتی کاربر روی دکمه‌ای کلیک می‌کند،
گرداننده onclick دکمه را برای فراخوانی dataLayer.push() اصلاح کنید:
<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>
می‌توانید متغیرهای لایه داده را به‌طور پویا به لایه داده ارسال کنید تا اطلاعاتی مانند مقادیر واردشده یا انتخاب‌شده در فرم، فراداده مرتبط با ویدیویی که بازدیدکننده درحال پخش آن است، رنگ محصول (مثلاً خودرو) سفارشی‌شده توسط بازدیدکننده، نشانی‌های وب مقصد پیوندهای کلیک‌شده، و غیره را ضبط کنید.
همانند رویدادها، این عملکرد با فراخوانی میانای برنامه‌سازی کاربردی push()
برای افزودن یا جایگزین کردن متغیرهای لایه داده در لایه داده انجام می‌شود. نحو پایه برای
تنظیم متغیرهای لایه داده پویا به‌صورت زیر است:
dataLayer.push({'variable_name': 'variable_value'});
که 'variable_name' رشته‌ای است که نام متغیر لایه داده را که باید تنظیم شود نشان می‌دهد، و 'variable_value' رشته‌ای است که مقدار متغیر لایه داده را که باید تنظیم یا جایگزین شود نشان می‌دهد.
برای مثال: برای تنظیم متغیر لایه داده با اولویت رنگ وقتی بازدیدکننده با ابزار سفارشی‌سازی محصول تعامل برقرار می‌کند، می‌توانید متغیر لایه داده پویا زیر را ارسال کنید:
dataLayer.push({'color': 'red'});
یک ارسال، چند متغیر
می‌توانید چندین متغیر و رویداد را به‌طور هم‌زمان ارسال کنید:
dataLayer.push({
'color': 'red',
'conversionValue': 50,
'event': 'customize'
});
ماندگار کردن متغیرهای لایه داده
برای حفظ متغیرهای لایه داده بین صفحه‌های وب، dataLayer.push() را پس‌از
نمونه‌سازی لایه داده در هر بارگیری صفحه فراخوانی کنید و متغیرها را
به لایه داده ارسال کنید. اگر می‌خواهید این متغیرهای لایه داده هنگام بار شدن محفظه برای «مدیر برچسب» دردسترس باشند، همان‌طور که در مثال زیر نشان داده شده است، یک فراخوانی dataLayer.push() بالای کد محفظه «مدیر برچسب» اضافه کنید:
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({
'event': 'Pageview',
'pagePath': 'https://www.googleanalytics.dev/pancakes',
'pageTitle': 'Pancake Event Signup',
'visitorType': 'customer'
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
هر متغیر اعلام‌شده در شیء لایه داده فقط تا زمانی باقی می‌ماند که بازدیدکننده در صفحه فعلی باشد. متغیرهای لایه داده که در صفحه‌ها مرتبط هستند (برای مثال، visitorType) باید در لایه داده در هر صفحه از وب‌سایت شما اعلام شوند. اگرچه لازم نیست مجموعه متغیرهای یکسانی را در لایه داده در هر صفحه قرار دهید، باید از یک قرارداد نام‌گذاری ثابت استفاده کنید. به عبارت دیگر: اگر دسته صفحه را در صفحه ثبت‌نام بااستفاده از متغیری به‌نام pageCategory تنظیم کنید، صفحه‌های محصول و خرید شما نیز باید از متغیر pageCategory استفاده کنند.
عیب‌یابی
در اینجا چند نکته عیب‌یابی لایه داده ارائه شده است:
متغیر window.dataLayer را رونویسی نکنید: وقتی مستقیماً از لایه داده استفاده می‌کنید (برای مثال، dataLayer = [{'item': 'value'}])، هر مقدار موجود در dataLayer را رونویسی خواهد کرد. نصب‌های «مدیر برچسب»
باید لایه داده را تا حد امکان در کد منبع،
بالاتر از قطعه کد محفظه، بااستفاده از window.dataLayer = window.dataLayer || []; نمونه‌سازی کنند.
پس‌از اعلام dataLayer، از dataLayer.push({'item': 'value'})
برای افزودن مقادیر بیشتر به آن استفاده کنید، و اگر لازم است این مقادیر هنگام بار شدن صفحه برای
«مدیر برچسب» دردسترس باشد، آن تماس dataLayer.push() نیز باید
بالاتر از کد محفظه «مدیر برچسب» باشد.
نام شیء dataLayer به حروف بزرگ و کوچک حساس است: اگر سعی کنید متغیر یا رویدادی را بدون رعایت حروف بزرگ و کوچک مناسب ارسال کنید، ارسال انجام نخواهد شد.
datalayer.push({'pageTitle': 'Home'}); // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'}); // Good (dataLayer in camel case)
dataLayer.push باید با اشیاء جاوا اسکریپت معتبر فراخوانی شود. همه نام‌های متغیر لایه داده باید در گیومه قرار بگیرند.
dataLayer.push({new-variable: 'value'}); // Bad - no quote marks
dataLayer.push({'new-variable': 'value'}); // Good - proper quote marks
نام متغیرها را در همه صفحه‌ها یکسان نگه دارید: اگر از نام‌های متغیر متفاوت برای یک مفهوم در صفحه‌های مختلف استفاده کنید، برچسب‌هایتان نمی‌توانند به‌طور یکسان در همه مکان‌های موردنظر فعال شوند.
بد:
// Homepage:
dataLayer.push({'visitorType': 'low-value'});
// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});
خوب:
// Homepage:
dataLayer.push({'visitorType': 'low-value'});
// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});
تغییر دادن نام لایه داده
نام پیش‌فرض شیء لایه داده که توسط برچسب Google یا
«مدیر برچسب» آغاز شده است dataLayer است. اگر ترجیح می‌دهید از نام دیگری برای لایه داده‌تان استفاده کنید، می‌توانید این کار را با ویرایش مقدار پارامتر لایه داده در قطعه ظرف «مدیر برچسب» یا برچسب Google با نام انتخابی‌تان انجام دهید.
Tag Manager
مقدار پارامتر لایه داده (در زیر برجسته شده است) را در قطعه ظرفتان با نام انتخابی‌تان جایگزین کنید.
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
gtag.js
پارامتر پُرسمانی با نام «l» به نشانی وب اضافه کنید تا نام لایه داده جدید را تنظیم کنید،
برای مثال، l=myNewName. همه نمونه‌های dataLayer را در تکه‌کد برچسب Google به نام جدید به‌روز کنید.
<!-- Google tag -->
<script async src="https://www.googletagmanager.com/gtm.js?id=TAG_ID&l=myNewName"></script>
<script>
window.myNewName = window.myNewName || [];
function gtag(){myNewName.push(arguments);}
gtag('js', new Date());
</script>
پس‌از تغییر نام، همه ارجاع‌ها به لایه داده شما (یعنی هنگام اعلام لایه داده در بالای قطعه کد، یا هنگام ارسال رویدادها یا متغیرهای لایه داده پویا به لایه داده با فرمان .push()) باید به‌گونه‌ای تنظیم شوند که نام لایه داده سفارشی شما را منعکس کنند:
<script>
window.myNewName = window.myNewName || [];
window.myNewName.push({'variable_name': 'variable_value'});
</script>
روش‌های لایه داده سفارشی
اگر تابعی را به لایه داده ارسال کنید، با تنظیم this روی مدل داده انتزاعی فراخوانی می‌شود. این مدل داده انتزاعی می‌تواند مقادیر را در یک مخزن مقدار کلید دریافت و تنظیم کند، و همچنین راهی برای بازنشانی لایه داده ارائه می‌دهد.
تنظیم
تابع set در مدل داده انتزاعی به شما امکان می‌دهد مقادیری را برای بازیابی ازطریق get تنظیم کنید.
window.dataLayer.push(function() {
this.set('time', new Date());
});
دریافت
تابع get در مدل داده انتزاعی به شما امکان می‌دهد مقادیری را که تنظیم شده‌اند بازیابی کنید.
window.dataLayer.push(function() {
const existingTime = this.get('time');
if (existingTime !== null) {
// Change behavior based on whether or not this value exists...
} else {
// ...
}
});
تنظیم مجدد
تابع reset در مدل داده انتزاعی به شما امکان می‌دهد داده‌ها را در لایه داده بازنشانی کنید. این روش برای صفحه‌ای که باز می‌ماند و اندازه لایه داده آن به‌مرور زمان افزایش می‌یابد بسیار مفید است. برای بازنشانی لایه داده، از کد زیر استفاده کنید:
window.dataLayer.push(function() {
this.reset();
});