22

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 في كثير من الأحيان؟أحب أن أسمع منكم في التعليقات بالأسفلوإذا أعجبك هذا الفيديو، فلماذا لا تعطينا إعجابًاوتشترك في قناتنا هناك مباشرةلأننا نقدم مقاطع فيديو جديدة تمامًا مثل هذا الفيديو كل أسبوعوالآن، اسمي جوليان.قياس سعيد!