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

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

تثبيت

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

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

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

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

تستخدِم علامة Google و"إدارة العلامات من Google" متغيّرًا خاصًا لطبقة البيانات يُسمّى 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() API لإضافة متغيّرات طبقة البيانات أو استبدالها في طبقة البيانات. في ما يلي البنية الأساسية لتحديد متغيّرات طبقة البيانات الديناميكية:

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

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

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