لایه داده

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

به عنوان مثال، اگر یک برچسب بازاریابی مجدد را زمانی که ارزش purchase_total بیشتر از 100 دلار است، یا بر اساس رویدادهای خاص، به عنوان مثال، هنگامی که یک دکمه کلیک می‌شود، فعال کنید، لایه داده شما می‌تواند به گونه‌ای پیکربندی شود که آن داده‌ها در دسترس برچسب‌های شما قرار گیرد. شی لایه داده به صورت 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 سفارشی انجام شود، پیام مربوطه در صف قرار می‌گیرد و پس از ارزیابی سایر پیام‌های معلق پردازش می‌شود. این بدان معناست که هیچ گونه مقادیر لایه داده به روز شده برای رویداد بعدی تضمین نمی شود. برای رسیدگی به این موارد، باید یک نام رویداد به یک پیام اضافه کنید که به لایه داده فشار داده می‌شود، و سپس با یک راه‌انداز رویداد سفارشی به نام رویداد گوش دهید.

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

شی 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>

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

همانند رویدادها، این عملکرد با فراخوانی 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'});

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

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

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

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

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

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();
})