مقدمة عن وضع العلامات من جهة الخادم

وضع علامات التتبُّع من جانب الخادم هو طريقة جديدة لاستخدام Google Tag Manager من أجل قياس حالة التطبيق على جميع الأجهزة. تستخدِم حاويات الخادم نموذج العلامة والمشغّل والمتغيّر نفسه الذي اعتدت عليه، مع توفير أدوات جديدة تتيح لك قياس نشاط المستخدِم أينما حدث.

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

الشكل 1: رسم بياني لموقع إلكتروني تم إعداده لاستخدام حاوية ويب في أداة "إدارة العلامات من Google"

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

الشكل 2: مثال على إعدادات وضع العلامات التي تستخدم حاوية خادم

يتم تشغيل الخادم في مشروعك الخاص على Google Cloud Platform أو في بيئة مختلفة من اختيارك، ولا يمكن لأحد غيرك الوصول إلى البيانات الموجودة في الخادم إلى أن تختار إرسالها إلى مكان آخر. يمكنك التحكّم بشكل كامل في طريقة تنظيم هذه البيانات ومكان توجيهها من الخادم. يتم إنشاء العلامات باستخدام تكنولوجيا JavaScript المحصورة في بيئة آمنة. تمنحك الأذونات إمكانية الاطّلاع على الإجراءات التي يمكن أن تنفّذها العلامة، وتتيح لك السياسات وضع حدود حول الحاوية.

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

يطرح هذا النموذج سؤالَين مهمَّين بشأن حاويات الخادم:

• كيف تنتقل بيانات القياس من جهاز المستخدم إلى حاوية الخادم؟
• كيف يتم تحويل بيانات القياس المُرسَلة إلى حاوية خادم إلى حدث؟

الإجابة عن كلا السؤالين هي نوع جديد من العناصر لاستخدامه في حاويات الخادم، وهو العميل.

طريقة عمل العملاء

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

هذا عدد كبير من العناصر! لنلقِ نظرة فاحصة على كل جزء على حدة. يوضّح الشكل 3 تدفّق البيانات إلى حاوية الخادم من متصفّح الويب الخاص بالمستخدم، ومن خادم الويب إلى حاوية الخادم.

الشكل 3: يتعامل عميل مختلف مع كل مصدر بيانات.

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

يتطلّب إعداد هذه الأجهزة الثلاثة باستخدام Google Tag Manager عادةً حاوية مختلفة لكل منصة. بما أنّ حاوية الخادم لا تعمل على الجهاز، يمكن للحاوية نفسها التعامل مع أدوات قياس الإحصاءات لجميع منصات الأجهزة الثلاث. مع ذلك، هناك مشكلة. ولا تتواصل هذه الأجهزة بالطريقة نفسها. بروتوكول "إحصاءات Google" ليس هو نفسه بروتوكول ToastMeasure. وهنا يأتي دور العملاء.

بدلاً من هذه الحاويات الثلاث، تحتوي حاوية الخادم على ثلاثة عملاء. ستتم معالجة كل طلب يصل إلى الحاوية من خلال كل عميل حسب ترتيب الأولوية، بدءًا بالعميل ذي الأولوية الأعلى. أول ما يفعله كل عميل هو تحديد ما إذا كان يعرف كيفية معالجة هذا النوع من الطلبات. إذا كان بإمكان العميل ذلك، "يطالب" بالطلب ويواصل إلى المرحلة التالية من المعالجة. يؤدي طلب الحصول على الإذن إلى منع العملاء اللاحقين من التنفيذ. إذا تعذّر على العميل معالجة الطلب، لن يتّخذ أي إجراء وسيسمح للعملاء الآخرين بتحديد ما إذا كانوا يريدون معالجة الطلب أم لا.

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

الأحداث هي الإجراءات التي تحدث وتريد قياسها. يمكن أن تكون أيًا مما يلي: start_toasting أو finish_toasting أو buy_bread. هناك بعض الاقتراحات بشأن بنية الأحداث التي ينشئها العميل، ولكن الشرط الوحيد هو أن تفهم بقية الحاوية هذه الأحداث.

تُشغّل الجهات العميلة الحاوية. قدّم العميل مطالبة بشأن الطلب وحوّله إلى أحداث. حان الوقت الآن للعلامات والمشغِّلات والمتغيّرات. ينقل العميل كل حدث إلى بقية الحاوية لمزيد من المعالجة.

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

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

مثال قصير

لنلقِ نظرة على مثال سريع لمعرفة كيفية عمل كل هذه الأجزاء معًا. في هذا المثال، ستنشئ ما يلي:

1. موقع إلكتروني بسيط يستخدِم gtag.js لإرسال حدث click إلى حاوية خادم.
2. أحد عملاء "إحصاءات Google" الذي يتلقّى الحدث.
3. مشغّل يتم تنشيطه عند وقوع حدث click.
4. علامة "إحصاءات Google" التي تُرسِل بيانات الحدث إلى "إحصاءات Google" لمعالجتها.

في هذا المثال، سنفترض أنّك أنشأت ونشرت حاوية الخادم.

إعداد gtag.js

عليك أولاً ضبط علامة الموقع الشاملة (gtag.js) لإرسال البيانات إلى حاوية الخادم. باستخدام gtag.js، يتم إرسال البيانات إلى حاوية الخادم بالطريقة نفسها التي يتم بها إرسال البيانات إلى "إحصاءات Google"، مع إجراء تعديل واحد. كما هو موضّح في صفحة المثال أدناه، اضبط خيار الإعداد server_container_url للإشارة إلى حاوية الخادم.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID', {
    server_container_url: 'https://analytics.example.com',
  });
</script>

استبدِل TAG_ID بمعرّف العلامة. استبدِلhttps://analytics.example.com بعنوان URL لحاوية الخادم.

بعد ذلك، أضِف الدالة sendEvent() للتعامل مع أحداث click:

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID', {
    server_container_url: 'https://analytics.example.com',
  });

  function sendEvent() {
    gtag('event', 'click');
  }
</script>

<button onclick="javascript:sendEvent()">Send Event</button>

استبدِل TAG_ID بمعرّف العلامة. استبدِلhttps://analytics.example.com بعنوان URL لحاوية الخادم.

باستخدام هذا الإعداد، سترسل معالجات الأحداث، مثل الدالة sendEvent() المضمّنة في هذا المثال، حدث click إلى حاوية الخادم.

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

يحتاج الحاوي إلى عميل لتلقّي الحدث بعد وصوله إلى الخادم. لحسن الحظ، تتضمّن حاويات الخادم برنامجًا مسبق التثبيت خاصًا بـ "إحصاءات Google"، لذا تكون قد أكملت هذه الخطوة.

مشغِل النقر

بعد ذلك، أنشئ مشغّلاً يتم تنشيطه عند وقوع الحدث click. أنشئ مشغّلاً مخصّصًا يتم تنشيطه عندما تكون قيمة المتغيّر غير القابل للتخصيص اسم الحدث مساويةً لـ "click".

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

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

معاينة الحاوية

بعد إعداد الحاوية، انقر على معاينة. انتقِل إلى موقعك الإلكتروني في نافذة متصفّح مختلفة. عند إرسال الطلبات والأحداث إلى حاوية الخادم، ستظهر الطلبات والأحداث على الجانب الأيمن من صفحة المعاينة.

بعد الانتهاء من التغييرات، انشر حاوية الخادم.

ضبط الخادم على وضع الإنتاج مع العرض من الطرف الأول

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