لایه داده

لایه داده شیئی است که «مدیریت برچسب 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() را پس‌از نمونه‌سازی لایه داده در هر بارگیری صفحه فراخوانی کنید و متغیرها را به لایه داده ارسال کنید. اگر می‌خواهید این متغیرهای لایه داده هنگام بار شدن محفظه برای Tag Manager دردسترس باشند، یک فراخوانی dataLayer.push() را در بالای کد محفظه Tag Manager اضافه کنید، همان‌طور که در مثال زیر نشان داده شده است:

<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 یا قطعه ظرف «مدیر برچسب» با نام انتخابی‌تان انجام دهید.

<!-- 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 -->

<!-- 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 تنظیم‌شده به مدل داده انتزاعی فراخوانی خواهد شد. این مدل داده انتزاعی می‌تواند مقادیر را در فروشگاه مقدار کلید دریافت و تنظیم کند، و همچنین روشی برای بازنشانی لایه داده ارائه می‌دهد.

window.dataLayer.push(function() {
  this.set('time', new Date());
});

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
});

window.dataLayer.push(function() {
  this.reset();
});