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