إضافة عداد Stats4U باستخدام Google Tag Manager

يوجد دليل لذلك في المدونة من عام 2015. تُظهر لقطات الشاشة فيه واجهة Tag Manager لم تعد تبدو على هذا النحو، وإحدى خطواته السبع — تحديد خانة document.write — لم تعد لازمة على الإطلاق. وهذا المقال يحل محله.

ويجيب أيضًا عن السؤال الذي تخلّى عنه الدليل القديم. فقد أوصى ذلك الدليل باستخدام العداد غير المرئي مع Tag Manager، بحجة أنه لا يمكن التحكم في موضع صورة الإحصائيات. بل يمكن ذلك، والطريقة موضحة في أسفل هذه الصفحة.

الطريقة المختصرة

في Tag Manager: Tags → New → Custom HTML، ثم الصق سطرًا واحدًا في حقل HTML:

<script src="https://www.stats4u.net/s4u.js"
        data-id="YOUR-ID" data-style="981" async></script>

يُضبط عامل التشغيل على All Pages؛ ثم احفظ الحاوية وانشرها. وتأخذ السمة data-id رقم العداد، وهو مدرج في صفحة الإحصائيات.

هذا كل ما في الأمر — ثلاثة حقول وعامل تشغيل، بعد أن كان عام 2015 يتطلب سبع خطوات. ولا حاجة إلى تحديد أي خيار يخص document.write، لأن السكربت لم يعد يستخدمه.

ما الذي يفعله ذلك فعلًا، ولماذا قد لا يكون الخيار الصحيح

يضع السكربت العداد مباشرةً بعده في الصفحة. وعند لصقه مباشرةً في HTML مكتوب يدويًا، يكون هذا هو الصواب تمامًا: يظهر العداد حيث يوجد الكود.

أما عبر Tag Manager فالأمر مختلف، لأن الموضع لم يعد اختيارًا حرًا. فالحاوية هي التي تقرر، وهي تكون عادةً في رأس المستند (head) أو حيثما ثُبّت مقتطف الحاوية. لذلك يُدرَج العداد هناك — لا في التذييل، ولا في الشريط الجانبي، بل حيثما صادف أن حقن Tag Manager الوسم.

بالنسبة إلى العداد غير المرئي لا يهم ذلك إطلاقًا، ولهذا أوصى به الدليل القديم. فالتصميم 980 لا يعرض شيئًا، والتصميم 981 يعرض فقط أيقونة صغيرة ترتبط بصفحة الإحصائيات. وفي هذه الحالة تكفي الطريقة المختصرة أعلاه، وبقية هذا المقال اختيارية.

أما وضع عداد مرئي في مكان محدد فيتطلب جهدًا أكبر قليلًا.

التحكم في مكان ظهور العداد

للسكربت وضع ثانٍ لم يذكره الدليل القديم قط. فبدلًا من السمة data-id يأخذ قائمة، ويبحث عن عناصر نائبة حسب معرّفها (ID).

الخطوة الأولى — عنصر نائب في الصفحة، في المكان الذي يجب أن يظهر فيه العداد. ويوضع في قالب الموقع نفسه، لا في Tag Manager، لأن Tag Manager هو بالضبط ما نحاول إبعاده عن هذا القرار:

<div id="s4u_cp0"></div>

الخطوة الثانية — في Tag Manager، يحل هذا محل السطر الواحد. بنوع الوسم نفسه Custom HTML:

<script>
(function () {
  // No placeholder on this page? Then no counter, and no request either.
  if (!document.getElementById('s4u_cp0')) { return; }

  window.s4uid         = ['YOUR-ID'];
  window.s4u_paramsarr = [{ s4ustyleid: '100' }];

  var s = document.createElement('script');
  s.src = 'https://www.stats4u.net/s4u.js';
  document.head.appendChild(s);
})();
</script>

الخطوة الثالثة — غيّر عامل التشغيل. هذا هو الجزء الذي يوقع الناس في الخطأ. All Pages ينطلق في أبكر وقت يستطيعه Tag Manager، وغالبًا ما يكون ذلك قبل وجود العنصر النائب في المستند. وعامل التشغيل المدمج DOM Ready هو الصحيح هنا. فيجب أن يصل العداد بعد عنصر div، لا قبله.

يظهر العداد الآن داخل عنصر div ذاك، ولا يظهر في أي مكان آخر.

التحكم في الصفحات التي يظهر فيها

هناك وسيلتان مستقلتان للتحكم هنا، ويستحق كلٌّ منهما أن يُفهم على حدة.

العنصر النائب إحداهما. السطر الأول داخل الدالة يقوم بالمهمة: إذا لم يوجد s4u_cp0 في الصفحة، يتوقف ولا يُنزَّل السكربت أصلًا. وهكذا يحصل القالب الذي يتضمن عنصر div على عداد، ولا يحصل عليه القالب الذي لا يتضمنه — ويُتخذ القرار في قوالب الموقع نفسها، دون أي تغيير في Tag Manager ودون خطوة نشر.

وعامل التشغيل هو الوسيلة الأخرى. يمكن اتخاذ القرار نفسه في Tag Manager بدلًا من ذلك: شرط على عامل التشغيل، بحيث ينطلق عند DOM Ready فقط حيث يتطابق Page Path. عامل التشغيل يناسب القواعد المتعلقة بعناوين URL، والعنصر النائب يناسب القواعد المتعلقة بالقوالب.

أكثر من عداد في الصفحة الواحدة

تقبل القائمة ما تحتاجه من العدادات. وموضع العداد في القائمة هو الرقم في معرّف العنصر النائب:

window.s4uid         = ['ID-ONE', 'ID-TWO'];
window.s4u_paramsarr = [{ s4ustyleid: '981' }, { s4ustyleid: '100' }];

يذهب الأول إلى s4u_cp0، والثاني إلى s4u_cp1. وقد جرى التحقق من كليهما في متصفح أثناء كتابة هذا المقال: ظهر الأول أيقونةً بمقاس 20 × 20، والثاني شريطًا بمقاس 162 × 25، كلٌّ منهما داخل عنصره النائب ولا في أي مكان آخر من الصفحة.

أربعة أمور تسبّب المتاعب

• لا يُجمع بين الطريقتين. الوسم الذي يحمل السمة data-id ويضبط القائمة معًا ينتج عدادين، وتُحتسب المشاهدتان كلٌّ على حدة.
• تحتاج القائمة دائمًا إلى s4ustyleid. عند غياب السمة data-style يُستخدم التصميم 30 بديلًا دون أي تنبيه. أما صيغة القائمة فليس لها مثل هذا البديل، وستطلب تصميمًا فارغًا.
• العنصر النائب المفقود يفشل بصمت. لا عداد، ولا خطأ، ولا شيء في وحدة التحكم (console). وعندما لا يظهر شيء، يكون المعرّف أول المشتبه بهم — s4u_cp0، بالرقم صفر، لا بالحرف O.
• العداد غير المرئي بلا رابط عن قصد. يُعرض التصميم 980 دون رابط، لأن هدف نقر شفافًا بحجم بكسل واحد في صفحة شخص آخر فخٌّ لا ميزة. ولمن يريد رابطًا، يفي التصميم 981 بالغرض، بأيقونته الصغيرة.

التحقق من نجاح الإعداد

يُحمِّل وضع Preview في Tag Manager الصفحةَ والحاويةُ مفعّلة. ينبغي أن يظهر الوسم ضمن الوسوم التي انطلقت عند حدث DOM Ready. ثم تؤكد صفحة الإحصائيات ذلك — فالزيارة عبر Preview تُحتسب كأي زيارة أخرى، لذا ينبغي أن يتغير الرقم خلال ثوانٍ قليلة.

إذا انطلق الوسم ولم يظهر شيء، فالسبب هو العنصر النائب أو عامل التشغيل، بهذا الترتيب من حيث الاحتمال.