التخطي إلى المحتوى الرئيسي

تتبع Google Tag Manager

تعرض لك هذه المقالة كيفية تشغيل خدمة Google Tag Manager داخل الموقع الخاص بك. لمعرفة كيفية إنشاء علامات GA4 في Google Tag Manager، راجع وثائق Google.

ملاحظة

هذه الميزة متاحة فقط باللغة الانجليزية.

إن هذه المقالة لا تتبع تعليمات Google حرفيًا، ولكن تم اختبارها وعملت بشكل صحيح. وقد تم تغيير التعليمات عن تعليمات Google للأسباب التالية:

  1. يطلب منك موقع Google تثبيت الكود في الجزء <head> من الموقع. هذه ممارسة سيئة بالنسبة لسرعة الصفحة لأنها ستبطئ تحميل الموقع. ونتيجة لذلك، نضعه في الجزء السفلي <body-end>، ليتم تحميله أخيرًا.
  2. ملاحظة

    نوصي بوضع الرمز في <body-end> لأنه وعلى الرغم من أن Google Tag Manager يقوم بالتحميل غير المتزامن بالفعل، فإن المشكلة مع التحميل غير المتزامن له هي أنه سيظل يبدأ في تنزيل الموارد وتنفيذ الكود البرمجي. يتنافس هذا النشاط مع الموارد الأخرى على الهاتف/الكمبيوتر من حيث النطاق الترددي واستخدام المعالج وغير ذلك. إذا وضعت الكود في <head>، فأنت لا تزال تعطيه الأولوية على الموارد الأخرى التي قد يرغب المتصفح في تنزيلها، مثل: تصميم الموقع وتخطيطه، والمحتوى الأساسي، والصور الموجودة في الجزء المرئي من الصفحة، وغير ذلك.

    وجدت أداة إنشاء الموقع والمتجر الإلكتروني من GoDaddy باستمرار أن مواقع الويب التي تضع كود GTM في <head> تؤدي أداءً أسوأ من تلك التي لا تفعل ذلك. لقد قمنا بتحسين موقعنا لتحديد أولويات المحتوى المرئي، بما يتماشى مع مؤشرات الويب الأساسية والمقاييس ذات الصلة لـ FCP وLCP.

  3. من الأسهل أن يتم نسخ الكود إلى مكان واحد.

إضافة Google Tag Manager

سوف يعطيك Google الأكواد المضمنة التي ستبدو كما الأمثلة أدناه. يجب تثبيت كل هذه الأكواد في جزء <body-end> بالموقع. لتحديد مكان <body-end> ضمن الموقع، في اللوحة الجانبية للمحرر، انقر فوق الإعدادات، ثم انقر فوق Head HTML.

ملاحظة

الكود التالي هو مثال فقط؛ لا تنسخه مباشرة إلى الموقع الخاص بك. الرجاء التأكد من الحصول على الكود الصحيح من Google.

قسم البرنامج النصي

 
<!-- 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 داخل الموقع الخاص بك.

بعد ذلك، يجب أن تستبدل مشغل طريقة العرض الافتراضية "كل الصفحات" بالحدث المخصص الخاص بنا. داخل مدير العلامات، يجب أن ننشئ أولاً مشغل الحدث المخصص:

  1. انتقل إلى Google Tag Manager وسجل الدخول.
  2. على اليسار، انقر على المشغلات.
  3. في الجانب الأيمن، انقر على الزر جديد.
  4. أدخل اسم المشغل في أعلى اليسار. ونحن نوصي باسم يمكن تذكره، مثل: مشغل طريقة عرض الصفحة المخصص.
  5. انقر على مربع تكوين المشغل المخصص وحدد الحدث المخصص.
  6. في مربع اسم الحدث، أدخل dPageView.
  7. انقر على حفظ في Tag Manager.

بعد إنشاء المشغل، نحتاج إلى تطبيقه على العلامات التي نريدها. يجب القيام بذلك لكل علامة تستخدمها في الموقع لتشغيل أحداث طرق عرض الصفحة. في هذا المثال، نُطبق على Google Analytics Universal ولكن Google Analytics 4 هو الإصدار الأحدث الذي نوصيك باستخدامه. للتعرّف على كيفية إنشاء المشغلات وتطبيقها على علامات GA4 في Google Tag Manager، راجع وثائق Google.

  1. في Tag Manager، انتقل إلى العلامات.
  2. أنشئ صفحة جديدة.
  3. أدخل اسم سهل التذكر.
  4. انقر على مربع تكوين العلامة وحدد العلامة التي تريد استخدامها. في هذه الحالة، هي Google Analytics Universal.
  5. بعد إعداد العلامة، انقر على المربع المشغل. اختر المشغل المخصص الذي أنشأناه تحت اسم "مشغل طريقة عرض الصفحة المخصص".

    6. ملاحظة

    إذا تم تطبيق مشغل "كل الصفحات" بالفعل، فيرجى حذفه. نحن بحاجة فقط إلى تشغيل المشغل المخصص.

  6. حدد متغيرًا جديدًا.
  7. حدد إعدادات Google Analytics.
  8. اكتب معرف تتبع Google Analytics الخاص بك، واكتب اسمًا للمتغير الخاص بك بأعلى.
  9. حدد المتغير وانقر على حفظ.

بعد أن تجري هذه التغييرات على Tag Manager، انقر على إرسال ثم نشر لنشر التغييرات على الإعدادات المنشورة.

اعتبارات يجب أخذها في الحسبان تخص Google Tag Manager

  • سيتم تشغيل هذا الكود على الموقع المنشور فقط. من الأفضل الحرص على اختباره على الإصدار المنشور.
  • لقد أكملنا اختبارات مكثفة ويعمل قسم body-end.html ضمن وضع المطور على إضافة كود NoScript والكود الافتراضي.
  • الرجاء عدم تغيير إعداد 'dataLayer' من Google Tag Manager، لأن هذا سيؤدي إلى قطع التكامل المخصص.

مقالات ذات صلة