8

كيفيَّة استخدام "dataLayer variables" لسحب البيانات من "GTM dataLayer" [معلومة سريعة]

مرحباً بمُعجبي قناة "measure".

معكم جوليان, جئت إليكم بفيديو آخر سريع للنصائح.

اليوم, سنتحدَّث عن كيفيَّة سحب بيانات من مُتغيِّر "data layer".

إذا كنت تعلم شيء عن "data layer", فأنت تعلم أنه بإمكانك دفعهم إلى خلفيَّة الصفحة.

و سيبدو شيء ما مثل هذا من حيثُ الأكواد.

لذا لن يرى المُستخدم عملية دفع "data layer".

لكن البيانات متاحة الآن في "data layer"

و هي قاعدة البيانات المركزيَّة للبيانات المهيكلة في "Google Tag Manager"

يمكننا إرسال معلومات إلى "data layer" بعدَّة طُرق.

بمجرد وجودهم في "data layer", يجب أن تكون قادر على رؤية البيانات بطُرق مختلفة.

لذا, على سبيل المثال, إذا كان لديك وضع العرض و تصحييح الأخطاء"preview and debug" مفتوح.

إذا ذهبت إلى "data layer", يجب أن ترى المعلومات التي تم دفعها في "data layer" هنا تحت "data layer tab".

يجب أيضاً أن تكون قادراً على رؤية دَفعة"push", اعتماداً علي كيفية دفعها في أدوات المُطوِّر "developer tools" باستخدام العناصر.

لنبحث عن "data layer" هنا, لدينا الكثير من "data layers" هنا.

و ها نحن ذا, هذه هي المعلومات التي تم سحبها مُسبقاً في هذه الصفحة.

في الحقيقة, إنها هنا.

إذاً, يجب أن تكون قادراً على رؤيتها هنا أيضاً في "console" أيضاً إذا قمت ببساطة بكتابة "data layer".

و هنا, سنقوم بفتح لائحة "data layer".

و لدينا هنا أدوات مختلفة.

و الآن, كل أداة لديها مفتاح "key" و قيمة للأزواج "value pairs".

إذاً, سيكون لديك دائماً "key", و الذي سيكون في هذه الحالة "event".

و ستكون القيمة في هذه الحالة "blog post view".

و الآن, ماذا إن أردت سحب قيمة واحدة, أو قيمة أُخرى من "data layer".

و جعلها متاحة ل"tag" أو "triggers" الخاص بك.

ستحتاج أن تستخدم مُتغيِّر "data layer".

لأجل هذا, سنحتاج أن نعرف "key" من أجل وضع القيمة.

ستكون في حالتنا هذه كلمة "author", و يجب أن نكون قادرين على سحب قيمة "admin".

لذا, لنذهب إلى "Google Tag Manager", إلى "variables".

نحن ببساطة سنقوم بإنشاء "data layer variable" جديد.

سأقوم بتسمية هذا, بالاختصار "dlv", ثم ستكون "data layer" ل "author".

و الآن, سأذهب إلى "configurations" و سأختار "data layer variable".

و هنا سأكتب في "data layer variable key", في الواقع مكتوب هنا "name", لكنني أرى هذا مُربك قليلاً.

أُفضِّل تذكُّره ك"key".

و هذا ال"key" يحتاج أن يتناسب مع أي شيء نمتلكه في "data layer" مثل "first key" الذي تم ربطه بالقيمة لدينا.

في حالتنا هذه ستكون "author", و يُمكننا وضعها في تشكيلات مختلفة.

لا تحتاج أن تهتم بهذه الأشياء, إلا إذا كان لديك سبب خاص لهذا.

هيا نتقدَّم و نحفظه, و نُجرِّب هذا كله.

سنقوم فقط بعمل "refresh" ل"debug mode" السابق ثم العودة إلى صفحتنا.

قم بإعادة التحميل لهذا.

و تحت "variables" يجب أن نكون قادرين على رؤية "key" الخاص بنا.

الآن, يتم حلّ مُتغيِّرات دائماً بالإستناد إلى "events".

و "events" تكون حقاً مثل نقاط تفتيش صغيرة و التي نجدها في الصفحة.

لذا, إذا أردت استخدام "variables" أعني "author variable" في صفحة العرض.

سترى أنَّ هذا ما زال غير مُعرَّف"undefined".

في "event" الثاني هنا, سنرى الآن أنَّ "dlv author" قد تمَّ امتلاؤه بالفعل.

و ستظل ممتلئة إلا إذا تمَّ كتابتها بواسطة "later events".

لذا, إذا أردت استخدام هذا لاحقاً في "trigger" أو في "tag", فكُن متأكداً أنك تُطلقه في "event" الصحيح.

إذاً, فقد امتلأت "data layer variable".

الأمر بغاية السهولة الآن, ستحتاج فقط أن تعرف "key" المناسب.

ثم تُدخل هذا في "data layer variable" لتسحب البيانات للخارج.

لكن لا تبدو جميع "data layer" مثل هذا.

هذه "data layer" ثابتة للغاية, لذا ستحتاج فقط إلى "key" ثم إلى "value".

لكن في الواقع يُمكنك تجميع "data layer" هذه في بعضها البعض.

لذا, هنا على سبيل المثال لدينا "GTM key" و الذي يُمسك أداة "object".

و أستطيع رؤية هذه في هذه الأقواس المُنحنية.

و في هذا "object", فَهُناك "key" آخر, إذاً فهي لها قيمة ثنائية.

ربما تكون على دِراية ب"data layer" و التي تأتي من صفحة "order received" على سبيل المثال.

لقد قمنا بتحسين "data layer" التي تتبِّع التجارة الإلكترونية و قد تم تجميعها بالفعل.

إذاً, نحن لدينا أوَّل شيء "data layer object"

و بداخلها "data layer key" و هو "ecommerce" و داخل "ecommerce" نجِد "data layer object" آخر.

ثم سنَجِد "keys" مختلفة و بِداخلها مرَّة أخرى "data layer object"

من الصعب قليلاً القراءة في وضع العرض و تصحيح الأخطاء.

لذا لنفتح "JavaScript console" هنا.

و سأنظر في "data layer" عن طريق إدخال "data layer" ثانيةً ببساطة.

إذاً, نحن لدينا الآن "4 objects".

و نريد النظر في "ecommerce" الموجودة هنا.

إذاً, لدينا هذا المُثلَّت و الذي يُمكننا فتحه بالنقر عليه.

و يمكننا هنا رؤية أنَّ الجمع بينهم قد حدث بصورة جيِّدة.

و لدينا "ecommerce data layer object" و الذي يُمكننا فتحَه.

و لدينا بها كود للعملة و للشراء.

و بداخل الشراء "purchase" لدينا مجال عمل "action field".

و بداخل "action case" فلدينا على سبيل المثال في هذه الحالة الأمر "Id", و سيكون 309.

و إذا أردنا سحب "309" هذا, فمعرفة "key" فقط لن تكون كافية هنا و ال "ID".

في الواقع ينبغي أن نستخدم تسجيل خاص, و الذي سيكون تسجيل النقطة "dot notation".

لكي يتمكَّن "Google Tag Manager" من الذهاب لأسفل الشجرة و إيجاد "ID" في "object".

كيف تبدو نقطة التسجيل هذه "dot notation"؟

أو أنَّك إذا حوَّمت حولها, سترى بالفعل هنا, "ecommerce purchase action field ID".

و توجد النقطة بينهما.

هذا ما نحتاج لكتابته بالضبط في "data layer variable" إذا أردت سحب الأمر"ID".

هيَّا نجرِّب هذا, لنُراجع هذيْن المُتغيريْن

لنَقُم بإنشاء "data layer variable" جديد ل"order-ID".

و سنذهب من جديد إلى "new data variable".

و سنبدأ بالمادة الأولى هنا, ألا و هي "ecommerce".

سأقوم بفصل ذلك بنقطة أخرى في عنصر التجارة الإلكترونية هذا.

العُنصر التالي سيكون "purchase".ثم سنضيف ".action field".

و نحن نحصل هنا على "ID", لذا, سأضيفها هنا أيضاً هي الأخرى.

لنختبر هذا كله, احفظه و سنقوم بعمل "refresh", و سأقوم بإعادة تحميل هذه الصفحة.

و لسوء الحظ, ينبغي أن أذهب إلى أمر آخر هنا تماماً.

و ها نحن ذا, قد وصلنا إلى صفحة "order recived".

أنقر على المناسبة الصحيحة هنا, لنذهب إلى "page view", ثم سأذهب إلى "variables".

يجب أن تكون قادراً الآن على رؤية "dlv order ID", و التي قد امتلأت بقيمة 315.

و التي يجب أن تكون "order ID" الجديدة, و التي نستطيع أن نراها هنا تماماً.

إذاً, فقد دفعت ال"ID" الصحيح باستخدام الإشارة نقطة "." للحصول على القيم المُتداخلة في "data layer object".

هناك اختصاص صغير آخر عن هذه القِيَم المتداخلة.

رُبما يُصادف أنَّك تريد دفع قيمة من "key pairs" و هي في الواقع داخل المجمومة "array".

ما هي المجموعة "Array"؟

في بنود "JavaScript", فإنها ببساطة: قائمة تم تحديدها بأقواس مربعة.

إذاً, اعتماداً على عدد المنتجات التي قمت بشرائها هنا, لدينا هنا مُنتَجان بالضبط.

يجب أن تكون لدينا قائمة بالمُنتَجيْن هنا, بالإضافة إلى بعض المعلومات هنا.

و ها نحن ذا.

إذا كان لدينا ثلاثة أو أربعة منتجات تم شرائها, فبوضوح ستكون هذه القائمة أطول.

الآن, ستحتاج لإخبار "Google Tag Manager" بصراحة أنَّك تريد سحب بيانات من المُنتج الأوَّل أو من المُنتج الثاني.

لذا, على سبيل المثال, إذا أردت أن تحصل على سعر المُنتَج هنا, ستحتاج للوصول إلى هذه المجموعة.

و سيتم عمل ذلك بتدوين نُقطة مرَّة أخرى.

لكن في هذه المرَّة, ستستخدم الأرقام لكي تجد العنصر الصحيح في هذه المجموعة.

هيا نُجرِّب هذه في أدوات المُطوِّر "developer tools".

و في "console" سأضع "data layer" مرَّة أخرى.

سأذهب إلى عنصر "ecommerce", سنقوم بالضغط مرَّة واحدة ثم سنرى "purches" و بعدها "products".

و سيُمكنك بالفعل أن ترى هنا الترقيم المميَّز.

إذا قمت بالنقر عليهم, سأرى هذه الأرقام: صفر و واحد.

و هذه كيفيَّة ترقيم المجموعات, الرقم الأوَّل هو صفر و الرقم الثاني هو واحد.

لذا, إذا أردت أن معرفة سعر المُنتَج للمُنتج الأوَّل فسأحتاج إلى تدوين النقطة التي تحتوي على صفر و بعد ذلك مفتاح السعر.

إذاً, لنُجرِّب هذا.

اذهب ثانيةً إلى "data layer variables", قم بإنشاء واحدة جديدة.

و نكتُب سعر المنتَج للمنتَج الأوَّل, ثم نذهب إلى "data layer variable".

و نكتب في نفس الشيء مرَّة أخرى, إنه يبدأ ب"ecommerce."

ثم "purchase.product" هذه المرَّة.

و بعد ذلك, بعلامة النقطة, سنذهب إلى المُنتَج الأوَّل و هو صفر.

ثم سنحصل على السعر

سأتأكد أنني لم أقم بأيِّ خطأ, يجب التأكُّد, أجل.

احفظ هذا, و قم ب"refresh" و سأقوم بطلب جديد هنا.

و سأصل إلى صفحة فاتورة الطلب.

سعر أوَّل مُنتج "happy ninja" هو 35$

و الآن, سنذهب إلى "variables", و إذا قمنا بكُلِّ شيء بشكل صحيح سنرى السعر هنا 35$ هنا تماماً.

اسحبها خارج "data layer" لهذا المنتَج.

و بوضوح, ستحتاج لإعادة هذا للمنتجات المختلفة الأخرى إذا أردت سحب ثمنها.

و هذا هو فيديو النصائح الصغير بالفعل.

أنت تعرف الآن كيف تستخدم "data layer variables" لتسحب القِيَم من "data layer".

بمعرفة "key" ببساطة, و القيم المكتملة التي يُمكن أن تكون في "data layer".

و كيفيَّة هيكَلة "key" الخاص بك لإيجاد المُنتَج الصحيح في "data layer" المُتداخلة.

مرحباً بكم, هذا أنا مرّة أخرى, أشكركم لرؤيتكم هذا الفيديو الصغير.

أكان هذا مفيداً؟

هل هناك شيء لم تفهمه تماماً؟

فسأوَّد أن أعرف منكم في التعليقات بالأسفل.

لكن إذا أعجبك الفيديو, و تريد أن تدعمنا ب"أعجبني" و تشارك في القناة, فمن هنا تماماً.

لأننا نقوم بعمل فيديوهات جديدة مثل هذا الفيديو تماماً, كل أُسبوع.

الآن, أنا جوليان, ألقاك في المرَّة القادمة.