23

3 طرق لاستخدام أداة (google_tag_manager) في (JavaScript)

في هذا الفيديو، سأقدم لكم ثلاث طرق حول كيفية استخدام

أداة Google Tag Manager

كل هذا وأكثر قادم

مرحبًا، معكم جوليان مجددًا مع فيديو آخر لكم

ونريد اليوم أن نتحدث عن أداة Google Tag Manager

إذا كنتَ متقدمًا قليلًا في تطبيقات Google Tag manager

فمن المرجح أنك استخدمت طبقة البيانات

وهذه هي قاعدة البيانات المركزية الخاصة بنا للبيانات المنظمة

التي نريد استخدامها مع العلامات والمشغلات والمتغيرات الخاصة بنا

وبالتالي يمكننا إتاحته على Google Tag Manager من خلال طبقة البيانات

ولكن هناك بالفعل خطوة بينهما لا يتم الحديث عنها غالبًا

وهي نموذج البيانات الداخلية ل Google Tag Manager

لذا، بمجرد إدخال البيانات في طبقة البيانات

فيتم حفظها بالفعل داخل نموذج البيانات الداخلية

ومن ثم سحبها بواسطة متغيرات طبقة البيانات أو المشغلات أو العلامات الخاصة بك

وهذا هو بالفعل التمثيل الداخلي لبياناتك المنظمة في Google Tag manager

ويمكننا بالفعل استخدام نموذج البيانات الداخلية لعمليات نشر العلامات

ولكن يجب أن يكون لديك طريقة للوصول إليها

وهذا ما نفعله مع أداة Google Tag Manager

الآن، كيف يمكن أن يكون هذا مفيدًا لنموذج البيانات الداخلي؟

سأريكم اليوم ثلاث طرق عن كيفية استخدام هذا غالبًا في علامات نشر العمليات الخاصة بي

تسريع سير العمل الخاص بي وجعل الأشياء الرائعة تحدث

والآن، بدون مقدمات

لدينا الكثير لتغطيته، لذا دعونا نبدأ

مرحبًا بكم في Demoshop الخاص بنا

الآن وقبل كل شيء، لنلق نظرة على أداة Google Tag Manager الخاصة بنا

يمكننا الوصول إليها من خلال الانتقال إلى أدوات المطور الخاصة بنا

فمثلًا، ستكون هنا في جوجل كروم

ثم ننتقل إلى لوحة التحكم حيث يمكننا الوصول إلى

JavaScript Runtime Environment

حيث يمكننا إدخال الأوامر الخاصة بنا

ونكتب ببساطة google_tag_manager

وهذه هي الأداة التي نتحدث عنها

وللوصول إليها، ستحتاج إلى إعداد معرف GTM الخاص بك

لأنها قد تكون أدوات مختلفة لحاويات مختلفة

ويمكننا الوصول إلى الحاوية الخاصة بنا من خلال الأقواس المربعة

والاقتباسات المزدوجة ومعرف حاوية GTM الخاصة بنا

اضغط على إدخال

ويمكننا هنا رؤية كافة الطرق المختلفة المتاحة لدينا

ألق نظرة على طبقة البيانات

هذا هو نموذج البيانات الداخلية التي يمكنك الوصول إليها

من خلال أداة JavaScript

كل ما نحتاج إلى القيام به هو كتابة "نقطة" ثم "dataLayer"

ومن هنا، سأريكم الطريقة الأولى

ومن خلال طريقة "get" يمكننا بالفعل الحصول على أي نوع من القيمة

من طبقة البيانات بدون الحاجة إلى إنشاء متغير طبقة البيانات

فمثلًا، في هذه الصفحة

وهي صفحة منتج

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

ويمكننا رؤية أننا لدينا بالفعل بعض المعلومات داخل طبقة البيانات

وإذا أردت الآن إنشاء علامة في Google Tag Manager

ولقد أعددتُ بالفعل شيئًا ما هنا

حيث نريد إرسال مناسبة إلى فيس بوك

وفي مناسبة فيس بوك هذه، نريد إرسال تتبع يسمى "ViewContent"

وسأضع اسم المنتج الفعلى هنا

والآن، سأنظر بالتأكيد إلى طبقة البيانات الخاصة بي

ومن ثم إنشاء متغيرًا في متغير طبقة البيانات في Google Tag Manager

ثم الرجوع وإدخال هذا بداخل قوسين منحنيين

ولكن ماذا لو أردتُ فقط استخدام هذا المتغير مرة واحدة وفقط لهذه العلامة؟

ونظرًا لأننا هنا بالفعل في سياق JavaScript

حيث نسمع علامة HTML المخصصة

يمكنني فقط استخدام أداة Google Tag Manager للوصول إلى هذه القيمة

كيف سأفعل ذلك؟

حسنًا، تمامًا مثل متغير طبقة البيانات

ستحتاج إلى إدخال المفتاح الخاص بك لطبقة البيانات في المتغير

ولذا، سأكتب فقط " get." هنا

ثم إدخال المفتاح المتغير

وبالنسبة لنا، سيكون ".ecommerce.detail"

وبما أن هذه مجموعة هنا

التي يمكنني رؤيتها هنا داخل قوسين مربعين

سأكتب "0.name" وأضغط إدخال

ويمكنني أن أرى ما إذا قد تم حل هذا

للأسف، لقد ارتكبتُ خطأ هنا أيضًا

فأنا نسيتُ المنتج في الواقع

دعونا نرجع هنا

ونضع هذا بعد"detail"

ولدينا هنا "product.0.name"

ويمكننا رؤية الاسم هنا

لذلك سيكون هذا الكود الذي يتم تشغيله في الخلفية

إذا كنتَ ستقوم بإنشاء متغير في طبقة البيانات

وبالتالي يمكننا فقط استخدام هذا الكود مباشرة في the environment of JavaScript هنا

وحلها بهذه الطريقة

دعونا نجرب هذا، ونحفظه

ونقم بالتحديث

والرجوع إلى الصفحة الخاصة بنا، وقد تم إطلاق العلامات الخاصة بنا

ولدينا محتوى العرض واسم المنتج؛ Happy Ninja

تم معالجة هذا بشكل صحيح وسيعمل أيضًا مع المنتج التالي إذا انتقلنا إلى هنا

إذن فهي طريقة سريعة جدًا لاستخدام أداة Google Tag Manager

حتى لا تضطر إلى إنشاء متغير في طبقة البيانات

خاصة إذا كنتَ تستخدمه مرة واحدة فحسب

ولننتقل الآن إلى الطريقة الثانية

ماذا إذا كنتَ تريد تجميع سمات معينة من النقرة

لذا، إذا نقرتُ هنا على زر"Add to cart"

فسأحصل على رابط GTM

وننقر بالفعل فوق تثبيت نقرة المشغل

وأريد الآن التقاط عنصر معين موجود في الخلفية

لنلقي نظرة

إذا انتقلت إلى Inspect Element هنا

يمكننا رؤية أن هذا الرابط ahref

لدينا معرّف بيانات المنتج

والذي أريد أن أسحبه لأنه ليس لدي في طبقة البيانات حتى الآن

والآن، كيف يمكنني فعل ذلك؟

لن أكون قادرًا على استخدام شيء ما مثل متغير عنصر DOM

حيث أنه سيتم تقييم هذا مرة واحدة بمجرد تحميل الصفحة

ولكن في كل مرة ينقر فيها المستخدم على زر Add to Cart

أريد إعادة تقييم ذلك بناءً على ما نقر عليه المستخدم

ولحسن الحظ، تتيح لنا أداة Google Tag Manager

بالوصول إلى نموذج البيانات في Google Tag Manager

وسيكون ذلك ممكنًا مرة أخرى من خلال الحصول على متغيرطبقة البيانات

لكن هذه المرة، نريد أن نحصل على متغير مدمج

والذي سيكون "gtm.element"

وهنا، يمكننا دائمًا رؤية الرابط الذي تم النقر عليه آخر مرة

لذا إذا نقرت هنا على Add to Cart مرة أخرى وكررت هذا الأمر

وعلى أي حال، اضغط على السهم لأعلى لاستعادة آخر أمر

ونضغط إدخال مجددًا

ونرى الآن أن لدينا دائمًا القيمة الأخيرة التي تم كتابتها حاليًا

في طبقة البيانات المتاحة لدينا هنا في JavaScript

وهذا شيء عظيم لأنه في كل مرة ينقر فيها شخص ما

يمكنني كتابة بعض الأوامر لسحب معرّف منتج البيانات الفعلي

كيف يمكنني فعل ذلك؟

حسنًا، يمكننا الانتقال إلى Google Tag Manager وإنشاء متغير Javascript مخصص

لذا، سأنتقل إلى جديد وإنشاء متغير JavaScript مخصص

وسيكون متغير JavaScript المخصص هذا معرّف المنتج الخاص بنا

وفي متغير JavaScript المخصص، نحتاج إلى خاصية مجهولة تقوم بإرجاع شيئًا ما

والآن في منتصف القيام باستخراج البيانات

لذا سنسحب "gtm.element" الخاص بنا هنا

ونريد بعد ذلك إجراء عملية عليه وهي سحب معرّف بيانات المنتج

كيف سنفعل ذلك؟

حسنًا، يمكننا استخدام أمرًا يسمى "getAttribute."

وبعد ذلك نضع بين قوسين المحدد الخاص بنا

في هذه الحالة هو "data-product_id"

ويمكننا اختبار كل هذا مسبقًا

ونكتب "50"

وهذا ما أردناه

لذا فلنبدأ وننسخ هذا

وفي الواقع لسنا بحاجة لوضعه هنا

ولكن ببساطة يمكننا إعادته على الفور تمامًا مثل هذا

دعونا نحفظ هذا ونجربه

وفي كل مرة أنقر على زر Add to Cart هنا

يجب أن نرى في متغيراتنا أنه تم إدخال معرّف المنتج بشكل مختلف

مع كل نقرة GTM

إذن يمكننا استخدام ذلك

ففي العلامة الخاصة بنا، لدينا بالفعل علامة تم إعدادها

وهي علامة Add To Cart حيث سنرسلها إلى مناسبة فيس بوك

وأود إدخال معرف منتجنا

وفي هذه المرة، قمنا بحفظه في متغير هنا وجعلها متاحة

وسأعود بالمناسبة إلى الخطوة رقم واحد

ويمكننا كتابة السطر كله هنا دون الحاجة فعليًا إلى إنشاء متغير

في متغير JavaScript المخصص

حتى المنظف وناهيك عن الأصول في حساب Google Tag Manager

ولكن إذا أردتَ إعادة استخدام هذا المتغير في علامات أخرى

فقد ترغب في وضعه في متغير وتجريده بهذه الطريقة

دعونا نقوم بحفظ ذلك وتحديث هذا

انظروا ماذا حدث

وإذا تلقى فيس بوك البيانات، فأضغط على Add To Cart

ولدينا مناسبة جديدة هنا وهي مناسبة "Click"

ومعرّف المنتج هو "53"

إذن استخدام أداة Google Tag Manager مفيد جدًا أيضًا

أخيرًا وليس آخرًا، أنا غالبًا استخدم هذا عندما أريد أن استخدم خيار محددات التطابق من CSS

لذا إذا أردتُ إنشاء مشغل لتشغيله في الجزء العلوي هنا من القائمة

فيمكنني بالتأكيد إنشاء مشغلات مختلفة للملابس والمعاطف

والقمصان وما إلى ذلك

ولكن لإبقاءه نظيفًا قدر الإمكان، فقد ترغب في استخدام محددات تطابق CSS

ماذا يعني ذلك؟

حسنًا، إذا اردنا إطلاق هذه العلامة في قائمة النقر الخاصة بنا

وسنحتاج إلى إنشاء مشغل

مشغل نقرات جديد لقائمة النقرات

وسيشمل هذا كافة عناصر المشغلات

ومن ثم نريد إطلاق هذا عندما يكون عنصر معين

وبالنسبة لنا، سيكون هذا: "Click Element" و "Matches CSS Selector"

والآن، ما الذي سندخله في محدد التطابق CSS؟

ولمذا نستخدم عنصر النقر؟

دعونا نتحقق من صفحتنا مجددًا

يجب أن أحفظ هذا

وسأكتب هنا رقم "1" فقط الآن

وتحديث وضع المعاينة وتصحيح الأخطاء الحاص بنا

إذن يمكننا رؤية عناصر ال GTM

وتعمل مطابقة محددات CSS على عناصر HTML فقط

لذا إذا كان لديك هنا "gtm.click" ونذهب إلى المتغيرات

فسنرى أن عنصر النقرات يظهر فقط "object HTML div element"

لا يهم حقًا مكان النقر

فلدي " gtm.click" جديدة

وتم كتابة الأداة الفعلية لقيمة HTML في عنصر النقر

ماذا يوجد في خلفية ذلك؟

دعونا نتحقق من ذلك في أداة Google Tag Manager الخاصة بنا

نفتح أدوات المطور مجددًا ونرجع إلى الأمر الخاص بنا

وفي هذه المرة، سأنتقل إلى عناصر GTM

ها نحن ذا

لقد نقرنا على البحث هنا للتو

وبالتالي هذا هو العنصر الذي سيتم تقييمه من ناحية المشغل الخاص بنا

ولدينا هذا متاح أيضًا

مثلًا، إذا قمتَ بالنقر على هذه الصورة هنا أو العودة مرة أخرى

ففي كل مرة سيتم سحب القيمة

ولدينا عنصر GTM متاح لتقييمه في المشغل الخاص بنا

والآن، الجزء المهم الذي نريد أن نطلع عليه بالفعل هو القائمة هنا

لذا، سأقوم بالنقر على هذه والضغط على السهم بالأعلى، وإدخال

وهنا سنحصل على العنصر الأخير والذي كان عنصر القميص

وإذا نقرت يمينًا على هذا

فسيتيح لي بالفعل الكشف عن هذا العنصر في لوحة العناصر

وسيفتح لي ذلك عناصر لوحة التحكم الخاصة بي هنا

حيث يمكننا رؤية HTML

والآن، هناك حيلة صغيرة في أدوات المطور وهي الضغط على مفتاح "Escape"

والذي سيفتح أسفله لوحة التحكم أيضًأ

لذا سنكون قادرين على النظر ورؤية كيف يتصرف HTML بناءً على مدخلاتنا هنا

والآن، عندما ننظر في ترميز HTML

يمكننا رؤية أن كافة هذه العناصر هنا موجودة في

عنصر "ul id= menu-main>

إذن هذا ما أريد استخدامه كمحدد CSS لوضع علامة

ومحاولة تجميع كل هذه العناصر المختلفة الموجودة أسفل "ul"

ولهذا، سأحتاج إلى محدد CSS المناسب الذي يتطابق مع

العناصر الموجودة أسفله

لذا دعونا نلقي نظرة على كيف يمكننا القيام بذلك

إذا كان لدينا بالفعل عنصر GTM المناسب هنا

فيمكننا ببساطة استخدام أمر المطابقة

وبعد ذلك، بدون علامات اقتباس

يمكننا إدخال محدد CSS الخاص بنا

ومعرفة ما إذا كان يتطابق معه

إذن هنا لدينا ahref

لذا، إذا أدخلتَ "a"

فيمكنك رؤية أن محددات CSS أصبحت "صح" في هذه الحالة

الآن حيث يمكنني اختيار أي عنصر هنا

فلنختار هذا العنصر

ولقد حصلتُ على عنصر GTM جديد

وإذا قمتُ بالنقر هنا وكتبتُ "A"

فستصبح كذلك "صح"

ومن الواضح أن هذا ليس صحيحًا

فأنت لا تريدها أن تصبح صحيح

عندما تكون هنا بالأعلى في التنقل نفسه فحسب

لذا مجددًا، سنستخدم مهارات CSS الخاصة بنا لتشكيل محدد CSS

الذي يتطابق فقط عندما يكون عنصر النقر متفرع من "ul id="menu-item>

دعونا نرى إذا كان هذا يعمل

لا يعمل بسبب الصورة التي نقرنا عليها للتو

ولكن لنق نظرة على المعاطف

ويمكننا أن نراه هنا يتحول إلى "صح"

ماذا عن الألبومات؟

لقد أصبحت صح مجددًا

ودعونا نقوم باختبار سلبي

فلننقر هنا وستصبح خطأ

إذن، لدينا الآن محدد CSS

إذا كان يمكنك استخدمه داخل المشغل الخاص بنا

مع الأخد في الاعتبار أنه يمكننا استخدام هذا

انتقل إلى Google Tag Manager

ثم عد إلى النقرات الخاصة بنا هنا

واختار نريد فقط إطلاق هذا إذا كان يطابق محدد CSS

ولنقوم بحفظ ذلك، والتحديث

والعودة إلى الصفحة الخاصة بنا وإعادة تحميل ذلك

وإذا نقرتُ الآن على أي عنصر بالأعلى هنا،

فلدينا نقرة GTM

ولم يتم إطلاق العلامة الخاصة بنا

ونعود إلى هنا، أو لم نربطها فعليًا بالعلامة نفسها

فلنفعل ذلك بسرعة جدًا في حد ذاته

فعندما تقوم بالنقر وتحديث ذلك والعودة هنا

وننقر الآن على القائمة الخاصة بنا

وسنرى أنه تم إطلاق قائمة نقر مناسبة "GA"

وإذا قمت بالنقر على أي عنصر آخر، فلن يتم إطلاقه.

والآن قمنا بوضع علامة بمساعدة محدد CSS

وتدل كافة هذه القائمة بالأعلى هنا على أن العلامة تم إطلاقه

وهناك حقًا طريقة أخرى رائعة لاستخدام أداة Google Tag Manager

لاختبار محددات CSS الخاص بنا مسبقًا

والتأكد من أنهم يعملون

حسنًا

إذن لديك كل شيء

هذه هي الطريقة التي يمكنك بها استخدام أداة Google Tag manager

هل لديك أي حالات استخدام أخرى تستخدمها في

خيار Google Tag Manager في كثير من الأحيان؟

أحب أن أسمع منكم في التعليقات بالأسفل

وإذا أعجبك هذا الفيديو، فلماذا لا تعطينا إعجابًا

وتشترك في قناتنا هناك مباشرة

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

والآن، اسمي جوليان.

قياس سعيد!