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