إضافة analytics.js إلى موقعك الإلكتروني

مكتبة analytics.js (المعروفة أيضًا باسم &&quotعلامة Google Analytics&quot، هي مكتبة JavaScript لقياس كيفية تفاعل المستخدمين مع موقعك الإلكتروني. يشرح هذا المستند كيفية إضافة علامة "إحصاءات Google" إلى موقعك الإلكتروني.

علامة "إحصاءات Google"

يجب إضافة علامة "إحصاءات Google" بالقرب من أعلى العلامة <head> وقبل أي نص برمجي آخر أو علامات CSS أخرى، وإضافة رقم تعريف الموقع لموقع "إحصاءات Google" الذي تريد العمل معه.

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

ينفّذ الرمز أعلاه أربعة أمور رئيسية:

  1. ينشئ العنصر <script> الذي يبدأ تنزيل مكتبة analytics.js JavaScript من https://www.google-analytics.com/analytics.js بشكل غير متزامن.
  2. تعمل هذه السياسة على إعداد دالة ga عامة (تُسمى قائمة انتظار الأوامر ga()) تسمح لك بجدولة الأوامر لتشغيلها بعد تحميل مكتبة analytics.js وجاهزة للاستخدام.
  3. لإضافة أمر إلى قائمة انتظار الأوامر ga() من أجل إنشاء كائن أداة تتبّع جديد للموقع المحدّد من خلال المعلَمة 'GA_MEASUREMENT_ID'.
  4. لإضافة أمر آخر إلى قائمة انتظار الأوامر ga() من أجل إرسال مشاهدة صفحة على الويب إلى "إحصاءات Google" للصفحة الحالية.

قد تتطلب عمليات التنفيذ المخصّصة تعديل السطرين الأخيرين في علامة "إحصاءات Google" (الأوامر create وsend) أو إضافة رمز إضافي لتسجيل المزيد من التفاعلات. ومع ذلك، يجب عدم تغيير الرمز الذي يحمِّل مكتبة analytics.js أو إعداد دالة قائمة انتظار الأوامر ga().

علامة غير متزامنة بديلة

على الرغم من أن علامة "إحصاءات Google" الموضّحة أعلاه تضمن تحميل النص البرمجي وتنفيذه بشكلٍ غير متزامن على جميع المتصفِّحات، إلا أن ذلك ينطوي على عدم السماح للمتصفحات الحديثة بتحميل النص البرمجي مُسبقًا.

تضيف العلامة غير المتزامنة البديلة ما يلي من أجل التحميل المسبق، والذي يوفر أداءً صغيرًا على المتصفحات الحديثة، ولكن يمكن أن ينخفض إلى التحميل المتزامن والتنفيذ على متصفحات IE 9 والإصدارات الأقدم المتوافقة مع الأجهزة الجوّالة والتي لا تتعرّف على سمة النص البرمجي async. لا تستخدم إعدادات العلامة هذه إلا إذا كان زوار موقعك الإلكتروني يستخدمون المتصفّحات الحديثة بشكل أساسي للوصول إلى موقعك الإلكتروني.

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

ما البيانات التي تلتقطها علامة "إحصاءات Google"؟

عند إضافة أيٍّ من هذه العلامات إلى موقعك الإلكتروني، فإنك ترسل مشاهدة صفحة على الويب لكل صفحة يزورها المستخدمون. تعالج خدمة "إحصاءات Google" هذه البيانات ويمكنها استنتاج قدر كبير من المعلومات، بما في ذلك:

  • إجمالي الوقت الذي يقضيه المستخدم على موقعك الإلكتروني.
  • الوقت الذي يستغرقه المستخدم على كل صفحة وترتيب ترتيب زيارة تلك الصفحات.
  • الروابط الداخلية التي تم النقر عليها (استنادًا إلى عنوان URL لمشاهدة الصفحة التالية)

بالإضافة إلى ذلك، يتم استخدام عنوان IP وسلسلة وكيل المستخدم والفحص الأولي للصفحة الذي يؤديه analytics.js عند إنشاء عنصر أداة تتبّع جديد لتحديد عناصر مثل:

  • الموقع الجغرافي للمستخدم.
  • المتصفح ونظام التشغيل قيد الاستخدام.
  • هو حجم الشاشة وما إذا كان قد تم تثبيت Flash أو Java.
  • الموقع الإلكتروني المُحيل

الخطوات اللاحقة

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

توضّح الأدلة على هذا الموقع الإلكتروني كيفية قياس التفاعلات التي تهمك مع analytics.js، ولكن قبل تنفيذ ميزة معيّنة، يُنصح بشدة بقراءة الأدلة الواردة ضمن قسم الأساسيات في شريط التنقل على الجانب الأيمن. ستمنحك هذه الأدلة نظرة عامة عالية المستوى على مكتبة analytics.js وتساعدك على فهم أمثلة الرمز المستخدمة في جميع أنحاء الموقع بشكل أفضل.

يشرح الدليل التالي في هذه السلسلة آلية عمل analytics.js.