ماذا سنتعلم من هذا الشرح:
- ما هو Google Tag Manager؟
- آلية العمل
ماهو جوجل تاج مانجر – Google Tag Manager؟
جوجل تاج مانجر هى أداة مجانية تساعدك فى اضافة الاكواد فى الموقع الخاص بك بكل سهولة بدون الرجوع الى فريق الويب لتنفيذ هذه التعديلات البرمجية. مثل اضافة اكواد الاحصائيات الخاصة ب Google Analytics أو ربط Events او Goals الخاصة ب Google Analytics بسهولة في موقعك بدون الحاجه الى التعديلات البرمجية او اضافة اكواد فى الموقع بخلاف اضافة كود Google Tag Manager الأساسي.
ويمكن ربط اداة جوجل تاج مانجر مع معظم أدوات التتبع و تحسين الموقع مثل
- Crazy Egg
- Hotjar
- Google Analytics
- Google Optimizer
- Facebook Pixel
- Google Conversion
والكثير من الادوات التى سوف نقوم بالكتابة عنها تفصيليا وكيفية استخدامها فى الموقع من خلال جوجل تاج مانجر من خلال المقالات التى سوف يتم اضافتها فى هذه المدونة .. ويمكنك متابعة جديد المدونة اسبوعيا من خلال الاشتراك فى النشرة البريدية
آلية العمل
طريقة عمل جوجل Tag Manager على 3 مراحل أساسية وهي:
- ما هي الاداة او الكود المطلوب تنفيذه ( Tags )
- ما هو المحفز الذي سيقوم الزائر بعمله لتنفيذ هذا ( Triggers )
- ما هو المتغير الذي بناء عليه سوف يتم تنفيذ الاداة او الكود ( Variables )
سوف نقوم بتوضيح جميع النقاط الان ونأخذ مثال فعلي على أداة Google Analytics:
الان الاداة التى سوف نقوم باستخدامها لمعرفة سلوك الزوار ف الموقع هى ادارة Google Analytics و لكي نقوم باضافتها من خلال جوجل تاج مانجر سوف نقوم باضافة نوع Tag وهو Google Analytics ولكن ما هو المحفز الأساسي الذي إذا حدث يبدأ فى البحث عن المتغير الثابت لتنفيذ هذا الكود وعلى سبيل المثال أننا نريد تتبع سلوك الزوار عند مشاهدة الصفحة فقط مجرد الدخول عليها فى الموقع وبالتالي سوف يكون Triggers هو عبارة عن Page view ولكن هنا نصل للجزء الاخير ما هو المتغير أو الشرط الذي بناء عليه يظهر الكود فى الموقع عندما يقوم الزائر بمشاهدة صفحة الأسعار وبذلك عندما يقوم الزائر مشاهدة صفحة الزوار يتم تنفيذ كود Google Analytics
فبالتالي طريقة وشروط تنفيذ الكود هي كالاتي:
- الكود ( Tags ) هو Google Analytics
- المحفز ( Triggers ) هي Page View
- المتغير ( Variables ) هو Page Path = /pricing
ويمكننا على هذه الطريقة تنفيذ اي كود فى الموقع خلال دقائق فقط وبدون اي تعديل برمجي نهائي فقط اضافة الكود و تجهيز الشروط و نشر التعديلات
فى الشرح رقم #8 سوف نقوم بالشرح بالتفصيل عن كيفية اضافة الاكواد و الشروط يمكنك الوصول للشرح من خلال