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

طبقة البيانات هي عنصر تستخدمه أداة 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" في معالجة جميع رسائل الدفع التي تمّت إضافتها إلى قائمة الانتظار في طبقة البيانات. تعالج "إدارة العلامات من Google" الرسائل على أساس الأولوية حسب وقت الاستلام: تتم معالجة كل رسالة على حدة، بالترتيب الذي تم استلامها به. إذا كانت الرسالة حدثًا، سيتم تنشيط أي علامات تتضمّن شروط مشغّل تم استيفاؤها قبل أن ينتقل "مدير العلامات" إلى الرسالة التالية.

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

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

ملاحظة مهمة: لا تستخدِم علامات HTML المخصّصة لإعداد إعدادات الموافقة في Tag Manager. بما أنّه يجب تطبيق إعدادات الموافقة قبل تشغيل العلامات ذات الصلة في حاوية أداة "إدارة العلامات من Google"، عليك تطبيق واجهات برمجة التطبيقات لوضع الموافقة في أداة "إدارة العلامات من Google" لإعداد السلوك التلقائي والتعديل. استخدِم واجهات برمجة التطبيقات الخاصة بوضع الموافقة في "إدارة العلامات من 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() بعد إنشاء مثيل لطبقة البيانات عند تحميل كل صفحة، وأرسِل المتغيّرات إلى طبقة البيانات. إذا أردت أن تتوفّر متغيّرات طبقة البيانات هذه في أداة "إدارة العلامات من Google" عند تحميل الحاوية، أضِف طلب dataLayer.push() أعلى رمز حاوية أداة "إدارة العلامات من Google" كما هو موضّح في المثال التالي:

<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>
  window.myNewName = window.myNewName || [];
  window.myNewName.push({'variable_name': 'variable_value'});
</script>

ملاحظة مهمة: استخدِم طبقة بيانات واحدة فقط لكل صفحة

يُسمح بكائن dataLayer واحد فقط لكل صفحة. تعتمد "إدارة العلامات من Google" وgtag.js على مصفوفة JavaScript واحدة وشاملة باسم window.dataLayer لتلقّي جميع الأحداث والمتغيّرات ووضعها في قائمة الانتظار ومعالجتها بالترتيب الذي تتم إضافتها به. تربط مقتطفات الحاويات المستمعين ومنطق المعالجة بهذا الصفيف الفردي تحديدًا. يمكن أن يؤدي محاولة استخدام أكثر من مثيل واحد لطبقة البيانات أو إعادة تهيئة طبقة البيانات بشكلٍ غير صحيح (على سبيل المثال، الكتابة فوقها باستخدام window.dataLayer = [] بعد تحميل Google Tag Manager) إلى حدوث مشاكل كبيرة:

• قد لا يتم تنشيط العلامات: لن تؤدي الأحداث والمتغيّرات التي يتم إرسالها إلى مثيل من dataLayer لا تتتبّعه أداة Google Tag Manager أو علامة Google بشكلٍ نشط إلى تنشيط علاماتك.
• جمع البيانات بشكلٍ غير متّسق: قد تؤدي الأجزاء المختلفة من صفحتك أو النصوص البرمجية المختلفة إلى إرسال البيانات إلى مصفوفات dataLayer منفصلة ومعزولة، ما يؤدي إلى وصول معلومات غير مكتملة أو غير صحيحة إلى علامات الإحصاءات والتسويق.
• فقدان البيانات: قد يتم فقدان المعلومات المخصّصة للتتبُّع إذا تم إرسالها إلى مثيل dataLayer غير صحيح.
• صعوبات تصحيح الأخطاء: من الصعب تشخيص مشاكل وضع العلامات لأنّ مسار بيانات التتبُّع لا يمكن التنبّؤ به.

أفضل الممارسات: عليك دائمًا إنشاء مثيل لطبقة البيانات باستخدام window.dataLayer = window.dataLayer || []; مرة واحدة لكل صفحة، وعادةً ما يكون ذلك في أعلى <head> في الصفحة قبل مقتطف أداة "إدارة العلامات من Google" أو gtag.js. استخدِم dataLayer.push() دائمًا لإضافة أحداث أو متغيرات لاحقة. لا تستبدِل المتغيّر window.dataLayer أو تعيد تعيينه أبدًا.

طُرق طبقة البيانات المخصّصة

إذا أرسلت دالة إلى طبقة البيانات، سيتم استدعاؤها مع ضبط this على نموذج بيانات مجرّد. يمكن لنموذج البيانات المجرد هذا الحصول على القيم وتعيينها في مخزن قيم المفاتيح، كما يوفّر طريقة لإعادة ضبط طبقة البيانات.

ملاحظة مهمة: لاستخدام طرق مخصّصة لطبقة البيانات، يجب استخدام .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();
});