لایه داده‌ها شیئی است که «مدیر برچسب 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 به‌گونه‌ای طراحی شده‌اند که به اطلاعاتی که به لایه داده‌ها اضافه شده است به‌شیوه‌ای سازمان‌یافته و قابل‌پیش‌بینی ارجاع دهند، نه با تجزیه متغیرها، اطلاعات تراکنش، دسته‌های صفحه، و نشان‌های دیگری که در سراسر صفحه شما پراکنده هستند. پیاده‌سازی لایه داده که با متغیرها و مقادیر مرتبط تکمیل شده است کمک می‌کند تا مطمئن شوید که داده‌های مربوطه زمانی که برچسب‌های شما به آن‌ها نیاز دارند دردسترس هستند.
نصب
برای نصب‌های صفحه وب «مدیر برچسب»، باید لایه داده ایجاد کنید. نمونه کد زیر نشان می‌دهد که لایه داده قبل‌از بار شدن «مدیر برچسب» کجا ایجاد می‌شود.
<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 (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
نحوه پردازش اطلاعات لایه داده
وقتی محتوی بار می‌شود، «مدیر برچسب» شروع به پردازش همه پیام‌های انتقال لایه داده در صف می‌کند. «مدیر برچسب» پیام‌ها را براساس اولویت زمان ثبت پردازش می‌کند: هر پیام به‌ترتیب دریافت پردازش می‌شود. اگر پیام رویداد باشد، هر برچسبی با شرایط راه‌اندازی که برآورده شده است قبل‌از اینکه «مدیر برچسب» به پیام بعدی برود فعال خواهد شد.
اگر تماسی از نوع gtag() یا dataLayer.push() توسط کد در صفحه، در «الگوی سفارشی»، یا در برچسب HTML سفارشی برقرار شود، پیام مربوطه در صف قرار می‌گیرد و پس‌از ارزیابی همه پیام‌های معلق دیگر پردازش می‌شود. این یعنی تضمینی وجود ندارد که مقادیر لایه داده به‌روزشده برای رویداد بعدی دردسترس باشد.
برای مدیریت این موارد، باید نام رویدادی را به پیامی اضافه کنید که به لایه داده ارسال می‌شود، و سپس با راه‌انداز «رویداد سفارشی» به آن نام رویداد گوش دهید.
استفاده از لایه داده با مدیریت‌کننده‌های رویداد
شیء dataLayer از فرمان event برای شروع ارسال رویدادها استفاده می‌کند.
برچسب Google و Tag Manager از متغیر لایه داده ویژه‌ای به‌نام
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() API
برای افزودن یا جایگزین کردن متغیرهای لایه داده در لایه داده انجام می‌شود. نحو پایه برای
تنظیم متغیرهای لایه داده پویا به‌صورت زیر است:
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 (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID&l=myNewName"></script>
<script>
window.myNewName = window.myNewName || [];
function gtag(){myNewName.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
پس‌از تغییر نام، همه ارجاع‌ها به لایه داده شما (یعنی هنگام تعریف لایه داده در بالا قطعه، یا هنگام انتقال رویدادها یا متغیرهای لایه داده پویا به لایه داده با فرمان .push()) باید به‌گونه‌ای اصلاح شوند که نام لایه داده سفارشی شما را منعکس کنند:
<script>
window.myNewName = window.myNewName || [];
window.myNewName.push({'variable_name': 'variable_value'});
</script>
روش‌های لایه داده سفارشی
اگر تابعی را به لایه داده ارسال کنید، با this تنظیم‌شده
به مدل داده انتزاعی فراخوانی خواهد شد. این مدل داده انتزاعی می‌تواند مقادیر را در
فروشگاه مقدار کلید دریافت و تنظیم کند، و همچنین روشی برای بازنشانی لایه داده ارائه می‌دهد.
تنظیم
تابع set در مدل داده انتزاعی به شما امکان می‌دهد مقادیر را برای بازیابی ازطریق دریافت تنظیم کنید.
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();
});