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