طبقة البيانات

طبقة البيانات هي كائن يستخدمه برنامج "إدارة العلامات من 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"، يجب إنشاء طبقة بيانات. تشير رسالة الأشكال البيانية يوضح الكود المحدد أدناه مكان إنشاء طبقة البيانات، قبل Tag تم تحميل المدير.

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