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

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

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

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

يستخدِم العنصر 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'}) لإضافة قيم أخرى إليه، وإذا كانت هذه القيم يجب أن تكون متاحة لأداة "إدارة العلامات من Google" عند تحميل الصفحة، يجب أن يكون طلب dataLayer.push() أعلى رمز حاوية "إدارة العلامات من Google" أيضًا.

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

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