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

مكتبة analytics.js (المعروفة أيضًا باسم "علامة إحصاءات Google") هي مكتبة 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> يبدأ بتنزيل مكتبة JavaScript analytics.js بشكل غير متزامن من 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.