طبقة البيانات

طبقة البيانات هي عنصر تستخدمه أداة 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"
}

تم تصميم علامات Google لتسهيل الرجوع إلى المعلومات التي تتم إضافتها إلى طبقة البيانات بطريقة منظَّمة ويمكن توقّعها، بدلاً من تحليل المتغيّرات ومعلومات المعاملات وفئات الصفحات والإشارات الأخرى المتناثرة في جميع أنحاء صفحتك. سيساعد تنفيذ طبقة البيانات التي يتم ملؤها بالمتغيرات والقيم المرتبطة بها في ضمان توفّر البيانات ذات الصلة عندما تحتاج إليها علاماتك.

تثبيت

بالنسبة إلى عمليات تثبيت صفحات الويب في Tag Manager، يجب إنشاء طبقة بيانات. يوضّح الرمز المميّز أدناه مكان إنشاء طبقة البيانات، أي قبل تحميل أداة "إدارة العلامات من 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>

كيف تتم معالجة معلومات طبقة البيانات؟

عند تحميل حاوية، ستبدأ "إدارة العلامات" في معالجة جميع رسائل نقل البيانات التي تمّت إضافتها إلى قائمة الانتظار. تعالج "إدارة العلامات من Google" الرسائل على أساس الوارد أولاً يُعالج أولاً: تتم معالجة كل رسالة على حدة، بالترتيب الذي تم استلامها به. إذا كانت الرسالة حدثًا، سيتم تنشيط أي علامات تتضمّن شروط مشغّل تم استيفاؤها قبل أن ينتقل "مدير العلامات" إلى الرسالة التالية.

إذا تم إجراء طلب gtag() أو dataLayer.push() من خلال رمز في صفحة أو في نموذج مخصّص أو في علامة HTML مخصّصة، يتم وضع الرسالة المرتبطة في قائمة الانتظار ومعالجتها بعد تقييم جميع الرسائل الأخرى المعلقة. وهذا يعني أنّه لا يمكن ضمان توفّر أي قيم معدَّلة في طبقة البيانات للحدث التالي. للتعامل مع هذه الحالات، عليك إضافة اسم حدث إلى رسالة عند إرسالها إلى طبقة البيانات، ثم الاستماع إلى اسم الحدث هذا باستخدام مشغّل حدث مخصّص.

ملاحظة مهمة: لا تستخدِم علامات HTML المخصّصة لنشر الرمز المستند إلى gtag.js. بدلاً من ذلك، استخدِم نماذج العلامات الأصلية في Tag Manager لكلّ من إعلانات Google وإحصاءات Google وFloodlight.

ملاحظة مهمة: لا تستخدِم علامات HTML المخصّصة لضبط إعدادات الموافقة في Tag Manager. بما أنّه يجب تطبيق إعدادات الموافقة قبل تفعيل العلامات ذات الصلة في حاوية Tag Manager، عليك تطبيق واجهات برمجة التطبيقات لوضع الموافقة في Tag Manager من أجل ضبط السلوك التلقائي وتعديله. يضمن استخدام واجهات برمجة التطبيقات الخاصة بميزة "وضع الموافقة" في أداة "إدارة العلامات من Google" معالجة تعديلات الموافقة قبل أي عناصر مدرَجة في قائمة الانتظار في طبقة البيانات، وذلك لكي تحصل جميع العلامات التي يُنشِّطها الحدث نفسه على حالة الموافقة نفسها.

نقطة أساسية: يمكنك استخدام Google Tag Assistant لفحص حالة طبقة البيانات في أي وقت في سلسلة من الأحداث.

استخدام طبقة بيانات مع معالِجات الأحداث

يستخدِم العنصر dataLayer الأمر event لبدء عملية إرسال الأحداث.

تستخدِم "علامة تتبُّع من Google" وTag Manager متغيّرًا خاصًا في طبقة البيانات يُسمّى event، ويستخدمه متتبِّعو أحداث JavaScript لتنشيط العلامات عندما يتفاعل أحد المستخدِمين مع عناصر الموقع الإلكتروني. على سبيل المثال، قد تريد تنشيط علامة تتبُّع الإحالات الناجحة عندما ينقر أحد المستخدِمين على زرّ تأكيد الشراء. يمكن استدعاء الأحداث عندما يتفاعل المستخدم مع عناصر الموقع الإلكتروني، مثل الروابط والأزرار وعمليات التمرير وما إلى ذلك.

يتم تنفيذ هذه الوظيفة من خلال استدعاء 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 الخاصة بالروابط التي تم النقر عليها، وما إلى ذلك.

كما هو الحال مع الأحداث، يتم تنفيذ هذه الوظيفة من خلال استدعاء واجهة برمجة التطبيقات 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 باستخدام عناصر JavaScript صالحة. يجب وضع جميع أسماء المتغيّرات في طبقة البيانات بين علامتَي اقتباس.

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 باستخدام الاسم الذي تختاره.

gtag.js

أضِف مَعلمة طلب بحث باسم "l" إلى عنوان URL لضبط اسم طبقة البيانات الجديدة، على سبيل المثال 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>

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

بعد إعادة التسمية، يجب تعديل جميع الإشارات إلى طبقة البيانات (أي عند تعريف طبقة البيانات أعلاه في المقتطف، أو عند إرسال الأحداث أو متغيّرات طبقة البيانات الديناميكية إلى طبقة البيانات باستخدام الأمر .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();
})