لایه داده

لایه داده، شیء‌ای است که توسط Google Tag Manager و gtag.js برای ارسال اطلاعات به برچسب‌ها استفاده می‌شود. رویدادها یا متغیرها می‌توانند از طریق لایه داده ارسال شوند و تریگرها می‌توانند بر اساس مقادیر متغیرها تنظیم شوند.

برای مثال، اگر وقتی مقدار purchase_total بیشتر از ۱۰۰ دلار باشد، یا بر اساس رویدادهای خاص، مثلاً وقتی روی یک دکمه کلیک می‌شود، یک تگ بازاریابی مجدد ایجاد کنید، لایه داده شما می‌تواند طوری پیکربندی شود که آن داده‌ها را در دسترس تگ‌های شما قرار دهد. شیء لایه داده به صورت JSON ساختار یافته است. برای مثال:

{
  event: "checkout_button",
  gtm: {
    uniqueEventId: 2,
    start: 1639524976560,
    scrollThreshold: 90,
    scrollUnits: "percent",
    scrollDirection: "vertical",
    triggers: "1_27"
  },
  value: "120"
}

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

نصب

برای نصب صفحات وب Tag Manager، باید یک لایه داده ایجاد کنید. کد هایلایت شده زیر نشان می‌دهد که لایه داده قبل از بارگذاری 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 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 سفارشی انجام شود، پیام مرتبط پس از ارزیابی سایر پیام‌های در حال انتظار، در صف قرار گرفته و پردازش می‌شود. این بدان معناست که تضمینی وجود ندارد که مقادیر لایه داده به‌روزرسانی شده برای رویداد بعدی در دسترس باشند. برای مدیریت این موارد، باید یک نام رویداد را به پیامی که به لایه داده ارسال می‌شود اضافه کنید و سپس با یک تریگر رویداد سفارشی به آن نام رویداد گوش دهید.

مهم: از تگ‌های HTML سفارشی برای پیاده‌سازی کد مبتنی بر gtag.js استفاده نکنید. در عوض، از قالب‌های تگ بومی Tag Manager برای Google Ads ، Analytics و Floodlight استفاده کنید.

مهم: از تگ‌های HTML سفارشی برای پیکربندی تنظیمات رضایت در Tag Manager استفاده نکنید. از آنجایی که تنظیمات رضایت باید قبل از فعال شدن تگ‌های مربوطه در یک محفظه Tag Manager اعمال شوند، باید APIهای Tag Manager Consent را برای پیکربندی رفتار پیش‌فرض و به‌روزرسانی اعمال کنید. استفاده از APIهای Tag Manager Consent تضمین می‌کند که به‌روزرسانی‌های رضایت قبل از هر مورد صف‌بندی شده در لایه داده پردازش می‌شوند، به طوری که همه تگ‌های فعال شده توسط یک رویداد، وضعیت رضایت یکسانی را مشاهده می‌کنند.

نکته کلیدی: شما می‌توانید از دستیار تگ گوگل (Google Tag Assistant) برای بررسی وضعیت لایه داده خود در هر نقطه‌ای از زنجیره رویدادها استفاده کنید.

استفاده از یک لایه داده با کنترل‌کننده‌های رویداد

شیء dataLayer از یک دستور event برای شروع ارسال رویدادها استفاده می‌کند.

تگ گوگل و تگ منیجر از یک متغیر لایه داده ویژه به نام 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>

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

همانند رویدادها، این قابلیت با فراخوانی API مربوط به 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() را فراخوانی کنید و متغیرها را به لایه داده ارسال کنید. اگر می‌خواهید این متغیرهای لایه داده هنگام بارگذاری کانتینر در 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 بازنویسی می‌شود. نصب‌های Tag Manager باید لایه داده را تا حد امکان در کد منبع، بالاتر از قطعه کد کانتینر، با استفاده از window.dataLayer = window.dataLayer || []; نمونه‌سازی کنند. پس از تعریف dataLayer ، از dataLayer.push({'item': 'value'}) برای افزودن مقادیر اضافی به آن استفاده کنید، و اگر این مقادیر باید هنگام بارگذاری صفحه در Tag Manager در دسترس باشند، فراخوانی dataLayer.push() نیز باید بالای کد کانتینر Tag Manager باشد.

نام شیء 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'});

تغییر نام لایه داده

نام پیش‌فرض شیء لایه داده که توسط تگ گوگل یا تگ منیجر آغاز می‌شود، dataLayer است. اگر ترجیح می‌دهید از نام دیگری برای لایه داده خود استفاده کنید، می‌توانید با ویرایش مقدار پارامتر لایه داده در قطعه کد تگ گوگل یا تگ منیجر خود با نام دلخواه خود، این کار را انجام دهید.

gtag.js

یک پارامتر کوئری به نام «l» به URL اضافه کنید تا نام جدید لایه داده را تنظیم کنید، مثلاً l=myNewName . تمام نمونه‌های dataLayer را در قطعه کد تگ گوگل به نام جدید به‌روزرسانی کنید.

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

مدیر برچسب

مقدار پارامتر لایه داده (که در زیر هایلایت شده است) را در قطعه کد کانتینر خود با نام دلخواه خود جایگزین کنید.

مهم: مقدار پارامتر هایلایت نشده را جایگزین نکنید .

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

پس از تغییر نام، تمام ارجاعات به لایه داده شما (یعنی هنگام اعلام لایه داده بالای قطعه کد، یا هنگام ارسال رویدادها یا متغیرهای لایه داده پویا به لایه داده با دستور .push() ) باید تنظیم شوند تا نام لایه داده سفارشی شما را منعکس کنند:

<script>
  myNewName = window.dataLayer || [];
  myNewName.push({'variable_name': 'variable_value'});
</script>

نکته: در هر صفحه فقط از یک شیء dataLayer پشتیبانی می‌شود.

روش‌های لایه داده سفارشی

اگر تابعی را به لایه داده ارسال کنید، با این مجموعه در یک مدل داده انتزاعی فراخوانی می‌شود. این مدل داده انتزاعی می‌تواند مقادیر را دریافت و در یک مخزن کلید-مقدار تنظیم کند و همچنین راهی برای تنظیم مجدد لایه داده فراهم می‌کند.

مهم: برای استفاده از متدهای لایه داده سفارشی، باید از .push برای ارسال مستقیم داده‌ها به متغیر dataLayer استفاده کنید. اگر از gtag استفاده کنید، تابع به عنوان یک دستور نامعتبر تفسیر شده و نادیده گرفته می‌شود.

مجموعه

تابع 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();
})