تعرض لك هذه المقالة كيفية تشغيل خدمة Google Tag Manager داخل الموقع الخاص بك. لمعرفة كيفية إنشاء علامات GA4 في Google Tag Manager، راجع وثائق Google.
إن هذه المقالة لا تتبع تعليمات Google حرفيًا، ولكن تم اختبارها وعملت بشكل صحيح. وقد تم تغيير التعليمات عن تعليمات Google للأسباب التالية:
- يطلب منك موقع Google تثبيت الكود في الجزء
<head>
من الموقع. هذه ممارسة سيئة بالنسبة لسرعة الصفحة لأنها ستبطئ تحميل الموقع. ونتيجة لذلك، نضعه في الجزء السفلي<body-end>
، ليتم تحميله أخيرًا. - من الأسهل أن يتم نسخ الكود إلى مكان واحد.
إضافة Google Tag Manager
سوف يعطيك Google الأكواد المضمنة التي ستبدو كما الأمثلة أدناه. يجب تثبيت كل هذه الأكواد في جزء <body-end>
بالموقع. لتحديد مكان <body-end>
ضمن الموقع، في اللوحة الجانبية للمحرر، انقر فوق الإعدادات، ثم انقر فوق Head HTML.
قسم البرنامج النصي |
---|
<!-- 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-XXXX');</script> <!-- End Google Tag Manager --> |
قسم NoScript |
<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> |
إعداد Google Tag Manager
بعد ذلك، يجب أن تستبدل مشغل طريقة العرض الافتراضية "كل الصفحات" بالحدث المخصص الخاص بنا. داخل مدير العلامات، يجب أن ننشئ أولاً مشغل الحدث المخصص:
- انتقل إلى Google Tag Manager وسجل الدخول.
- على اليسار، انقر على المشغلات.
- في الجانب الأيمن، انقر على الزر جديد.
- أدخل اسم المشغل في أعلى اليسار. ونحن نوصي باسم يمكن تذكره، مثل: مشغل طريقة عرض الصفحة المخصص.
- انقر على مربع تكوين المشغل المخصص وحدد الحدث المخصص.
- في مربع اسم الحدث، أدخل dPageView.
- انقر على حفظ في Tag Manager.
بعد إنشاء المشغل، نحتاج إلى تطبيقه على العلامات التي نريدها. يجب القيام بذلك لكل علامة تستخدمها في الموقع لتشغيل أحداث طرق عرض الصفحة. في هذا المثال، نُطبق على Google Analytics Universal ولكن Google Analytics 4 هو الإصدار الأحدث الذي نوصيك باستخدامه. للتعرّف على كيفية إنشاء المشغلات وتطبيقها على علامات GA4 في Google Tag Manager، راجع وثائق Google.
- في Tag Manager، انتقل إلى العلامات.
- أنشئ صفحة جديدة.
- أدخل اسم سهل التذكر.
- انقر على مربع تكوين العلامة وحدد العلامة التي تريد استخدامها. في هذه الحالة، هي Google Analytics Universal.
- بعد إعداد العلامة، انقر على المربع المشغل. اختر المشغل المخصص الذي أنشأناه تحت اسم "مشغل طريقة عرض الصفحة المخصص".
- حدد متغيرًا جديدًا.
- حدد إعدادات Google Analytics.
- اكتب معرف تتبع Google Analytics الخاص بك، واكتب اسمًا للمتغير الخاص بك بأعلى.
- حدد المتغير وانقر على حفظ.
بعد أن تجري هذه التغييرات على Tag Manager، انقر على إرسال ثم نشر لنشر التغييرات على الإعدادات المنشورة.
اعتبارات يجب أخذها في الحسبان تخص Google Tag Manager
- سيتم تشغيل هذا الكود على الموقع المنشور فقط. من الأفضل الحرص على اختباره على الإصدار المنشور.
- لقد أكملنا اختبارات مكثفة ويعمل قسم
body-end.html
ضمن وضع المطور على إضافة كود NoScript والكود الافتراضي. - الرجاء عدم تغيير إعداد 'dataLayer' من Google Tag Manager، لأن هذا سيؤدي إلى قطع التكامل المخصص.