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