طبقة البيانات هي عنصر تستخدمه أداة "إدارة العلامات من 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() 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 في نموذج البيانات التجريدي ضبط القيم لاستردادها.
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();
})